點燈坊

失くすものさえない今が強くなるチャンスよ

Integrating TailwindCSS with Hugo

Sam Xiao's Avatar 2022-02-09

TailwindCSS is great for JAMstack, but we have to integrate TailwindCSS with Hugo manually.

Version

Hugo 0.92
TailwindCSS 3.0

Create New Site

$ hugo new site hugo-tailwind --format json
  • hugo new site : create a new site with default skeloton
  • --format json : use JSON as Hugo config format

tailwind000

Add Packages

$ npm install -D tailwindcss prettier prettier-plugin-tailwindcss npm-run-all
  • tailwindcss : for TailwindCSS
  • prettier : code formatter for HTML/CSS/JavaScript
  • prettier-plugin-tailwindcss : code formatter for TailwindCSS
  • npm-run-all : run NPM scripts in sequential or in parallel

tailwind001

Prettier

tailwind011

WebStorm -> Preferences -> Language & Frameworks -> Prettier

  • Prettier package : WebStorm will get a path automatically after installing Prettier
  • Rule for files : add html for Prettier to work with TailwindCSS
  • On Reformat Code action : run Prettier with the default Reformat code action
  • On save : run Prettier on save

After checking On Reformat Code action and On save, Prettier works as the default code formatter instead of WebStorm internal formatter

TailwindCSS Config

$ npx tailwindcss init

Use Tailwind CLI to generate default tailwind.config.js.

tailwind002

tailwind.config.js

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

Line 2

content: ["content/**/*.md", "layouts/**/*.html"],

Purge unused CSS by specified file extensions.

  • 'content/**/*.md' : all markdown files in content folder
  • layouts/**/*.html : all template files in layouts folder

tailwind003

CSS

input.css

@tailwind base;
@tailwind components;
@tailwind utilities;
  • Add input.css on the root folder of project
  • Tailwind CLI transpiles input.css to output.css

tailwind004

Layout

layouts/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="output.css" />
    <title>Hello Hugo</title>
  </head>
  <body>
    <div class="text-4xl text-red-700">Hello TailwindCSS</div>
  </body>
</html>

Line 6

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

Link CSS file to output.css which is transpiled by Tailwind CLI.

Line 10

<div class="text-4xl text-red-700">Hello TailwindCSS</div>

Use TailwindCSS utilities for HTML.

tailwind005

NPM Config

package.json

{
  "scripts": {
    "dev:css": "npx tailwindcss -i input.css -o static/output.css -w",
    "dev:hugo": "hugo server",
    "dev": "run-p dev:*",
    "build:css": "NODE_ENV=production npx tailwindcss -i input.css -o static/output.css -m",
    "build:hugo": "hugo",
    "build": "run-s build:*"
  },
  "devDependencies": {
    "npm-run-all": "^4.1.5",
    "prettier": "^2.5.1",
    "prettier-plugin-tailwindcss": "^0.1.6",
    "tailwindcss": "^3.0.19"
  }
}

Line 3

"dev:css": "npx tailwindcss -i input.css -o static/output.css -w",

Use Tailwind CLI to build CSS under development mode :

  • -i input.css : use input.css as the source CSS file
  • -o static/output.css : use output.css as the target CSS file
  • -w : watch for changes and rebuild as needed

Line 4

"dev:hugo": "hugo server",

Run web server by Hugo.

Line 5

"dev": "run-p dev:*",

run-p : run all dev:* in parallel under development mode.

Line 6

"build:css": "NODE_ENV=production npx tailwindcss -i input.css -o static/output.css -m",

Use Tailwind CLI to build CSS under production mode :

  • -i input.css : use input.css as source CSS file
  • -o static/output.css : use output.css as target CSS file
  • -m : minify target CSS file

Line 7

"build:hugo": "hugo",

Build markdown to the public folder by Hugo.

Line 8

"build": "run-s build:*"

run-s : run all build:* in sequential under production mode.

tailwind006

Development Mode

$ npm run dev

Start web server under development mode.

tailwind007

TailwindCSS with Hugo is enabled successfully under development mode.

tailwind008

Production Mode

$ npm run build
$ serve public
  • Build Hugo with minified target CSS file under production mode
  • Use serve to run web server

tailwind009

TailwindCSS with Hugo is enabled successfully under production mode.

tailwind010

Conclusion

  • We used to integrate PostCSS with TailwindCSS traditionally, but this time we use Tailwind CLI to generate the CSS file

Reference

Praveen Juge, Use Tailwind JIT with Hugo
TailwindCSS, Installation
TailwindCSS, Optimizing for Production

# Hugo # TailwindCSS