hugo-testing-tailwindcss-v4

KO | EN

gitlite — search

#python #hacktoberfest #react #typescript #llm #go #android #deep-learning #docker #java #cli #awesome-list #mcp #open-source

hugo-testing-tailwindcss-v4

(★ 22)

A test/demo repo.

hugo-testing-tailwindcss-v4 Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

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).

hugo-testing-tailwindcss-v4

hugo-testing-tailwindcss-v4 Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

hugo-testing-tailwindcss-v4

hugo-testing-tailwindcss-v4 Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README