How to setup Tailwind CSS in Hugo

Tailwind CSS is a popular utility-based CSS framework that allows you to quickly style your web projects by providing pre-defined classes for various styling purposes. In this article, we will go over how to set up Tailwind CSS in a Hugo website.

Before we begin, make sure you have the following prerequisites installed on your system:

Hugo: A static site generator that we will use to build our website. You can install Hugo by following the instructions on their official website.
Node.js: A JavaScript runtime that we will use to install and run Tailwind CSS. You can install Node.js by downloading the installer from the official website and following the prompts.

Now that you have the prerequisites installed, let’s start by setting up Tailwind CSS in our Hugo project.

Navigate to the root directory of your Hugo project in your terminal.
Install the Tailwind CSS package by running the following command:

npm install tailwindcss

Create a configuration file for Tailwind CSS by running the following command:

npx tailwindcss init

This will create a tailwind.config.js file in the root directory of your project. This file allows you to customize the styles and layout of your website using Tailwind CSS.

Next, we need to create a CSS file that will import the styles generated by Tailwind CSS. Create a new file called main.css in the static/css directory of your project, and add the following line to import the styles:

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

In order to use the CSS file we just created, we need to include it in the head of our HTML templates. Open the layouts/partials/head.html file and add the following line to include the main.css file:

<link rel="stylesheet" href="/css/main.css">

Finally, we need to generate the styles for our website by running the following command:

npx tailwindcss build static/css/main.css -o static/css/main.css

This will generate the styles for your website based on the configuration in your tailwind.config.js file and output them to the main.css file.

That’s it! You have now successfully set up Tailwind CSS in your Hugo website. You can start using the pre-defined classes provided by Tailwind CSS to quickly style your website.

You can also set up Tailwind CSS in Hugo using PostCSS

Postcss is a tool that allows you to process your CSS files with JavaScript plugins.

Here are the additional steps you need to take to set up Tailwind CSS with PostCSS in Hugo:

Install the postcss-cli package by running the following command:

npm install -D postcss-cli

Install the postcss-import and postcss-preset-env packages by running the following command:

npm install -D postcss-import postcss-preset-env

Create a configuration file for postcss by creating a postcss.config.js file in the root directory of your project and adding the following code:

module.exports = {
  plugins: [
    require('postcss-import'),
    require('postcss-preset-env')({ stage: 0 }),
    require('tailwindcss'),
  ]
}

This file tells postcss to use the postcss-import, postcss-preset-env, and Tailwind CSS plugins when processing your CSS files.

In your main.css file, replace the lines that import the Tailwind CSS styles with the following line:

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

Finally, generate the styles for your website by running the following command:

npx postcss static/css/main.css -o static/css/main.css

This will process the main.css file using the PostCSS and Tailwind CSS plugins and output the results to the same file.

That’s it! You have now successfully set up Tailwind CSS in Hugo using postcss. You can start using the pre-defined classes provided by Tailwind CSS to quickly style your website.