https://github.com/bep/hugo-testing-tailwindcss-v4
A test/demo repo.
https://github.com/bep/hugo-testing-tailwindcss-v4
Last synced: about 1 year ago
JSON representation
A test/demo repo.
- Host: GitHub
- URL: https://github.com/bep/hugo-testing-tailwindcss-v4
- Owner: bep
- License: mit
- Created: 2024-06-25T08:29:41.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2025-01-23T14:03:49.000Z (over 1 year ago)
- Last Synced: 2025-03-24T15:49:41.491Z (about 1 year ago)
- Language: CSS
- Size: 26.4 KB
- Stars: 22
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Hugo `v0.128.0` added improved support for the upcoming [TailwindCSS v4](https://tailwindcss.com/blog/tailwindcss-v4-alpha).
This version is still in alpha, and there are still some missing pieces. This repo contains a few variants of how to set up TailwindCSS with Hugo as a test/documentation about what's working and what's not.
Notes below updated 2024-06-25:
## General
TailwindCSS v4 alpha does not yet support custom a Tailwind configuration file. This means that there's currently no way to configure the input to TailwindCSS's build, e.g:
```js
module.exports = {
content: ['./hugo_stats.json'],
};
```
TailwindCSS scans text files for HTML identifiers starting from the project directory, and is very fast and smart about it. But this is a limitation we expect to be fixed before the final release.
## Variants
### TailwindCSS CLI Simple
Triggers CSS rebuild on changes to CSS or to layout files.
Benefits:
* Simple to set up.
* Works well in simple setups.
Drawbacks:
* Triggers CSS rebuild on changes to layout files that's not related to style.
* Does not work in more complex setups (e.g. HTML identifiers from Hugo Modules).
### TailwindCSS CLI Defer
Only triggers CSS rebuilds when either CSS or the `hugo_stats.json` file changes.
Benefits:
* Faster rebuilds when changing layout files that's not related to style.
* Works in more complex setups (e.g. HTML identifiers from Hugo Modules).
Drawbacks:
* Slightly more complex setup.
### PostCSS CLI Defer
This is same as `TailwindCSS CLI Defer`, but using PostCSS CLI instead of TailwindCSS CLI.
Benefits:
* Can use PostCSS plugins. But note that TailwindCSS v4 comes with autoprefixer and nesting built-in.
Drawbacks:
* Slower builds (about 170ms vs 100ms for the others for this small setup).