Zoltán Szőgyényi

Posted on Mar 27 • Originally published at flowbite.com

How to install HUGO with Tailwind CSS and Flowbite

#hugo #tailwindcss #flowbite #opensource

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.toml file:

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.css file from the flowbite-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.html file from the flowbite-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.html file:

{{ 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.css CSS 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.html file:

<script src="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/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.html file 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.

Deliver your unique apps, your own way.

Heroku tackles the toil — patching and upgrading, 24/7 ops and security, build systems, failovers, and more. Stay focused on building great data-driven applications.

Learn More