Quickstart hugo and tailwind.css
Hugo and Tailwind CSS work really well together. Here's a five-step quickstart guide for anyone who's interested.
1. Create a new site
hugo new site mysite && cd mysite
2. Create a new theme
hugo new theme mytheme && echo "theme = 'mytheme'" >> config.toml && cd themes/mytheme
Add an index.html
echo "{{ define \"main\" }}<h1 class=\"text-2xl\">Hello world</h1>{{end}}" > layouts/index.html
3. Integrate tailwind css
npm init -y && npm i tailwindcss --save-dev && npx tailwindcss init
Replace tailwind.config.js with
module.exports = {
content: ["content/**/*.md", "layouts/**/*.html"],
theme: {
extend: {},
},
plugins: [],
};
Add and configure css files
mkdir -p assets/css && touch assets/css/tailwind.css && echo "@tailwind base;\n@tailwind components;\n@tailwind utilities;" > assets/css/tailwind.css && touch assets/css/style.css
4. Add styles to head
{{ $style := resources.Get "css/style.css" | minify | fingerprint }}
<link rel="stylesheet" href="{{ $style.Permalink }}">
5. Configure package.json
Add tailwind scripts to package.json
"scripts": {
"build": "npx tailwindcss -i ./assets/css/tailwind.css -o ./assets/css/style.css",
"watch": "npx tailwindcss -i ./assets/css/tailwind.css -o ./assets/css/style.css -w"
}
All set
Run
hugo server -D
and within your theme directory,
npm run watch
And the result is...
