How to Add Tailwind to Hugo: A Step-by-Step Guide

If you’re using Hugo for your website and want to enhance its styling capabilities, integrating Tailwind CSS can be a great choice. In this guide, we’ll walk you through the process of adding Tailwind to Hugo.

Here’s how you can get started:

Step 1: Set up Tailwind CSS

Inside your theme folder, open a terminal window and run the following command to initialize npm:

npm init -y

Next, install Tailwind CSS as a development dependency by running this command:

npm install -D tailwindcss

To configure Tailwind, initialize it with the default configuration file by running this command:

npx tailwindcss init

This will create a tailwind.config.js file in your project.

Step 2: Configure Tailwind for Your Theme

Open the tailwind.config.js file in your preferred code editor. In the content property, specify the paths to your theme layout files by modifying the array as follows:

module.exports = {
  content: ['content/**/*.md', 'layouts/**/*.html'],
  theme: {
    extend: {},
  },
  plugins: [],
}

This ensures that Tailwind is applied to the specified theme layout files.

Step 3: Create the Tailwind CSS File

Now, create a new file named tailwind.css in your theme’s folder. In this file, add the following Tailwind directives:

@tailwind base;
@tailwind components;
@tailwind utilities;

Step 4: Update the Package.json File

Open the package.json file in your theme’s folder and locate the scripts section. Add the build and watch commands to it as shown below:

{
  "name": "your-theme-name",
  "version": "1.0.0",
  "description": "Your theme description",
  "main": "index.js",
  "scripts": {
    "build": "npx tailwindcss -i ./tailwind.css -o ./assets/style.css",
    "watch": "npx tailwindcss -i ./tailwind.css -o ./assets/style.css --watch"
  },
  "keywords": [],
  "author": "Your Name",
  "license": "ISC",
  "devDependencies": {
    "tailwindcss": "^3.1.4"
  }
}

Step 5: Build the Tailwind Stylesheet

To build the Tailwind stylesheet, run the following command in your terminal:

npm run build

This will generate the style.css file in the assets folder of your theme.

| Tip: Use the npm run watch command when making changes to your theme. This command ensures that the changes are saved to the style.css file automatically whenever you save a file.

Step 6: Include Tailwind CSS in your Hugo Layouts

To include the Tailwind styles in your Hugo layouts, you need to add the following code to the desired layout file (e.g., layouts/partials/header.html):

{{ $styles := resources.Get "style.css" }}
<link rel="stylesheet" href="{{ $styles.RelPermalink }}">

Save the file, and now your Hugo website will be styled with Tailwind CSS!

By following these steps, you can easily add Tailwind CSS to your Hugo project and enjoy its powerful styling capabilities. Happy coding!