Ronalds Vilciņš

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:

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

npm install tailwindcss
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.

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
<link rel="stylesheet" href="/css/main.css">
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:

npm install -D postcss-cli
npm install -D postcss-import postcss-preset-env
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.

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
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.