dev.to

How to install HUGO with Tailwind CSS and Flowbite

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" }} {{- else }} {{- with . | minify | fingerprint }} {{- end }} {{- end }} {{- end }} In order to test out Tailwind CSS, add a utility class inside the single.html file: {{ define "main" }} {{ .Title }} {{ $dateMachine := .Date | time.Format "2006-01-02T15:04:05-07:00" }} {{ $dateHuman := .Date | time.Format ":date_long" }} {{ $dateHuman }} {{ .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: {{- with resources.Get "js/main.js" }} {{- if eq hugo.Environment "development" }} {{- with . | js.Build }} {{- end }} {{- else }} {{- $opts := dict "minify" true }} {{- with . | js.Build $opts | fingerprint }} {{- 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 }} Flowbite Open main menu {{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" .) }} {{- 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.HasMenuCu

Mar 27, 2025 - 17:29
 0
How to install HUGO with Tailwind CSS and Flowbite

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.

  1. Run the following CLI command to create a new HUGO application: 
hugo new site flowbite-app
cd flowbite-app
  1. 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.

  1. Next, add the theme to the config.toml file: 
theme = ["flowbite-theme"]
  1. 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.

  1. Go to the flowbite-theme/ directory and run the following command: 
npm install tailwindcss @tailwindcss/cli --save-dev
  1. Inside your main.css file from the flowbite-theme/ directory add the following: 
@import "tailwindcss";
  1. 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
  1. Update the css.html file from the flowbite-theme/ directory with the following: 
{{- with resources.Get "css/output.css" }}
  {{- if eq hugo.Environment "development" }}
     rel="stylesheet" href="{{ .RelPermalink }}">
  {{- else }}
    {{- with . | minify | fingerprint }}
       rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
    {{- end }}
  {{- end }}
{{- end }}
  1. In order to test out Tailwind CSS, add a utility class inside the single.html file: 
{{ define "main" }}
   class="text-blue-500">{{ .Title }}

  {{ $dateMachine := .Date | time.Format "2006-01-02T15:04:05-07:00" }}
  {{ $dateHuman := .Date | time.Format ":date_long" }}
   datetime="{{ $dateMachine }}">{{ $dateHuman }}

  {{ .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.

  1. Install Flowbite as a dependency using NPM by running the following command: 
npm install flowbite --save
  1. Import the default theme variables from Flowbite inside your main main.css CSS file: 
@import "flowbite/src/themes/default";
  1. Import the Flowbite plugin file in your CSS: 
@plugin "flowbite/plugin";
  1. Configure the source files of Flowbite in your CSS: 
@source "../../node_modules/flowbite";
  1. Add the Flowbite JavaScript inside your js.html file: 


{{- with resources.Get "js/main.js" }}
  {{- if eq hugo.Environment "development" }}
    {{- with . | js.Build }}
      
    {{- end }}
  {{- else }}
    {{- $opts := dict "minify" true }}
    {{- with . | js.Build $opts | fingerprint }}
      
    {{- end }}
  {{- end }}
{{- end }}
  1. 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 }}
 class="bg-white border-gray-200 dark:bg-gray-900">
   class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
     href="https://flowbite.com/" class="flex items-center space-x-3 rtl:space-x-reverse">
         src="https://flowbite.com/docs/images/logo.svg" class="h-8" alt="Flowbite Logo" />
         class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">Flowbite
    
     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">
         class="sr-only">Open main menu
         class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
             stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/>
        
    
     class="hidden w-full md:block md:w-auto" id="navbar-default">
       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" .) }}
{{- 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 }}
  • 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 }} {{- with .Children }}
      {{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" .) }}
    {{- end }}
    • {{- end }} {{- end }}