In this guide I want to show you how you can create a new HUGO project and install Tailwind CSS (v4) together with Flowbite so that you can start building websites and blog pages much faster with this tech stack.
Introduction
HUGO is a popular and open-source static site generator framework that makes it easy to organize your files and assets where you can also leverage a taxonomy system, multilingual support, fast assets pipeline, and more. HUGO is used by millions of developers and by websites such as Bootstrap, Litecoin, Smashing Magazine, and even Flowbite.
Check out this guide to learn how to install and set up a HUGO project together with Tailwind CSS and the UI components from Flowbite to start building websites with a stack that enhances your front-end development workflow.
Requirements
Make sure that you have both HUGO and Node.js installed locally on your computer.
Create a HUGO project
Follow the next steps to learn how to create a new HUGO project after you've installed the dependencies.
- Run the following CLI command to create a new HUGO application:
hugo new site flowbite-app
cd flowbite-app
- The next step is to create a local custom theme:
hugo new theme flowbite-theme
This command will create a new scaffolded theme directory that we can extend with our HUGO app.
- Next, add the theme to the
config.tomlfile:
theme = ["flowbite-theme"]
- Run a local server using the following command:
hugo server -D
Now you should see a basic HUGO website running at a generated localhost server.
Congratulations! You have now successfully installed and configured HUGO.
Install Tailwind CSS
Tailwind CSS is a popular utility-first CSS framework that allows better control over the styling of your website and makes it easier to work together with other team members within your organization.
- Go to the
flowbite-theme/directory and run the following command:
npm install tailwindcss @tailwindcss/cli --save-dev
- Inside your
main.cssfile from theflowbite-theme/directory add the following:
@import "tailwindcss";
- Compile the CSS code for Tailwind CSS by running this command inside of your theme directory:
npx @tailwindcss/cli -i ./assets/css/main.css -o ./assets/css/output.css --watch
- Update the
css.htmlfile from theflowbite-theme/directory with the following:
{{- with resources.Get "css/output.css" }}
{{- if eq hugo.Environment "development" }}
<link rel="stylesheet" href="{{ .RelPermalink }}">
{{- else }}
{{- with . | minify | fingerprint }}
<link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
{{- end }}
{{- end }}
{{- end }}
- In order to test out Tailwind CSS, add a utility class inside the
single.htmlfile:
{{ define "main" }}
<h1 class="text-blue-500">{{ .Title }}</h1>
{{ $dateMachine := .Date | time.Format "2006-01-02T15:04:05-07:00" }}
{{ $dateHuman := .Date | time.Format ":date_long" }}
<time datetime="{{ $dateMachine }}">{{ $dateHuman }}</time>
{{ .Content }}
{{ partial "terms.html" (dict "taxonomy" "tags" "page" .) }}
{{ end }}
By browsing to one of the post pages, you should now see the text updated in blue.
Install Flowbite
Now that you have a working HUGO project configured with Tailwind CSS, you can now install Flowbite.
Please make sure that you install the dependency, just as with Tailwind CSS, inside your flowbite-theme directory.
- Install Flowbite as a dependency using NPM by running the following command:
npm install flowbite --save
- Import the default theme variables from Flowbite inside your main
main.cssCSS file:
@import "flowbite/src/themes/default";
- Import the Flowbite plugin file in your CSS:
@plugin "flowbite/plugin";
- Configure the source files of Flowbite in your CSS:
@source "../../node_modules/flowbite";
- Add the Flowbite JavaScript inside your
js.htmlfile:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/flowbite.min.js"></script>
{{- with resources.Get "js/main.js" }}
{{- if eq hugo.Environment "development" }}
{{- with . | js.Build }}
<script src="{{ .RelPermalink }}"></script>
{{- end }}
{{- else }}
{{- $opts := dict "minify" true }}
{{- with . | js.Build $opts | fingerprint }}
<script src="{{ .RelPermalink }}" integrity="{{- .Data.Integrity }}" crossorigin="anonymous"></script>
{{- end }}
{{- end }}
{{- end }}
- Let's now test out Flowbite by updating our
menu.htmlfile from the theme directory:
{{- /*
Renders a menu for the given menu ID.
@context {page} page The current page.
@context {string} menuID The menu ID.
@example: {{ partial "menu.html" (dict "menuID" "main" "page" .) }}
*/}}
{{- $page := .page }}
{{- $menuID := .menuID }}
{{- with index site.Menus $menuID }}
<nav class="bg-white border-gray-200 dark:bg-gray-900">
<div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
<a href="https://flowbite.com/" class="flex items-center space-x-3 rtl:space-x-reverse">
<img src="https://flowbite.com/docs/images/logo.svg" class="h-8" alt="Flowbite Logo" />
<span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">Flowbite</span>
</a>
<button data-collapse-toggle="navbar-default" type="button" class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="navbar-default" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/>
</svg>
</button>
<div class="hidden w-full md:block md:w-auto" id="navbar-default">
<ul class="font-medium flex flex-col p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
{{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" .) }}
</ul>
</div>
</div>
</nav>
{{- end }}
{{- define "partials/inline/menu/walk.html" }}
{{- $page := .page }}
{{- range .menuEntries }}
{{- $attrs := dict "href" .URL }}
{{- if $page.IsMenuCurrent .Menu . }}
{{- $attrs = merge $attrs (dict "class" "active" "aria-current" "page") }}
{{- else if $page.HasMenuCurrent .Menu .}}
{{- $attrs = merge $attrs (dict "class" "ancestor" "aria-current" "true") }}
{{- end }}
{{- $name := .Name }}
{{- with .Identifier }}
{{- with T . }}
{{- $name = . }}
{{- end }}
{{- end }}
<li>
<a
class="block py-2 px-3 text-gray-900 rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent"
{{- range $k, $v := $attrs }}
{{- with $v }}
{{- printf " %s=%q" $k $v | safeHTMLAttr }}
{{- end }}
{{- end -}}
>{{ $name }}</a>
{{- with .Children }}
<ul>
{{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" .) }}
</ul>
{{- end }}
</li>
{{- end }}
{{- end }}
After you reload the server, the pages from the menu should now be rendered inside the navbar component.
UI components
Now that you have everything installed and set up you can start using the UI components from Flowbite to build up your website with HUGO much faster and easier with hero sections, navigation bars, admin CRUD layouts, and more.
HUGO starter theme
We have developed a free and open-source HUGO starter theme that you can use to build up your website as a starting point or use it directly as a personal blog website that already has HUGO, Tailwind CSS and Flowbite configured.