TailwindCSS v4 supported?

[codyng]

Hi, may I know if this great library supports TailwindCSS v4?

When I executed it on my web project using TailwindCSS v4 it threw below errors:

<local-project-root-path>/node_modules/css/lib/parse/index.js:62
    var err = new Error(options.source + ':' + lineno + ':' + column + ': ' + msg);
              ^

Error: undefined:1:79: missing '}'
    at error (<local-project-root-path>/node_modules/css/lib/parse/index.js:62:15)
    at declarations (<local-project-root-path>/node_modules/css/lib/parse/index.js:260:26)
    at rule (<local-project-root-path>/node_modules/css/lib/parse/index.js:561:21)
    at rules (<local-project-root-path>/node_modules/css/lib/parse/index.js:118:70)
    at stylesheet (<local-project-root-path>/node_modules/css/lib/parse/index.js:81:21)
    at module.exports [as parse] (<local-project-root-path>/node_modules/css/lib/parse/index.js:565:20)
    at <local-project-root-path>/node_modules/next-css-obfuscator/dist/handlers/css.js:98:38
    at Array.forEach (<anonymous>)
    at createSelectorConversionJson (<local-project-root-path>/node_modules/next-css-obfuscator/dist/handlers/css.js:96:14)
    at obfuscate (<local-project-root-path>/node_modules/next-css-obfuscator/dist/index.js:26:44) {
  reason: "missing '}'",
  filename: undefined,
  line: 1,
  column: 79,
  source: ':root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Col

The css-obfuscator folder was created but it was empty.

The contentIgnoreRegexes in next-css-obfuscator.config.js is here. I am not sure it's matter.

	contentIgnoreRegexes: [
		/\.jsxs\)\("\w+"/g,	// default
		/id="[\w\-]+"/g,	// ignore all id="xxx" for HTML
	],

But it's fine if I used TailwindCSS v3.

Cheers,
Cody

[codyng]

I found that TailwindCSSd 4 uses @layer to wrap the minified styles, which causes the compilation to fail.
The last css content started with

/*! tailwindcss v4.0.6 | MIT License | https://tailwindcss.com */@layer theme{:root,:host{--font-sans:ui
...
...

In my dist folder that is succeeded in TailwindCSS v3, I tried to place a css file with below content:

@layer theme {
	.hello {
		color: red;
	}
}

Indeed it threw the same error:

...
  reason: "missing '}'",
  filename: undefined,
  line: 2,
  column: 2,
  source: '.hello {\n\t\tcolor: red;\n\t}\n}'
}

[codyng]

It looks like the css library issue.

Will you consider to use css-tools? It seems that it supports @layer rule and many others.

[soranoo]

Good question! I haven't touched v4 at all 😢 . I will take a look at it and see if I can come up with a better solution (Im looking at Lightning CSS)

[andr3i1010]

any updates?

[soranoo]

A new CSS transformation engine is complete, but it has not yet been fully integrated into this package (currently beta, ps. features are subject to change without notice). I am also looking for a complex tailwind 4 project for testing purposes. Let me know if you got one.

[andr3i1010]

try my repo PolarLearn, it uses shadcn and alot of tw 4 classes, please note that the repo and project itself is dutch so you might need a translator

[soranoo]

v.3.0.0 now supports TailwindCSS 4

Migrate from version 2.x to 3.x

ps. I don't see any problems with tw4 so far, except for the issue related to the JS part, which can be fixed by fine-tuning the config(very likely). Thank you for your resources @andr3i1010

[andr3i1010]

No problem at all!