CSS Tailwind Syntax

[lishaduck]

Tip

There is now an issue, please (don't?) discuss there #7223
Biome 2.3 will include the associated patch, so all we've got left to do is wait.
For now, you can use https://pkg.pr.new/@biomejs/biome@72a8b02.

Important

PLEASE THINK BEFORE COMMENTING. Biome is an OSS project, and things don't change by continually harassing maintainers with +1-style comments.
If this is an actual issue for your company, please come implement it yourself. If this is just an issue for you personally, I'm sorry. I do feel you. I hate to ignore rules, but sometimes it's a necessary evil.
— OP

---

Update: Biome now seems to parse Tailwind 3 properly, but there are reports below of it failing on Tailwind 4's syntax.

---

Tailwind adds a few custom at-rules. I tried to see how well the new css work does on my css, but it fails at my @apply declarations. I can comment them out, but that's not a long-term solution. Probably the parser should just parse @apply. Surprisingly, @tailwind just works. Eventually, I'd like it if #1274 could also be integrated into @apply, but that's certainly not needed at this point.

Thanks for considering this! Biome is great!

P.S. After commenting it out, it linted my css just fine! It only found an empty ruleset b/c I'd commented it out, but it's running, finding issue, and, of course, it's fast ;)

[znycheporuk]

Could you clarify if Biome will support the Tailwind v4 syntax, which includes the following to prevent the generation of default CSS variables, or if it will only support standard CSS syntax? I'm ready to contribute if you are open to supporting it.

@import "tailwindcss";

@theme {
	--color-*: initial;
	--spacing-*: initial;
}

[znycheporuk]

this is already fixed on tailwind side
tailwindlabs/tailwindcss#15603

[mkvlrn]

Hijacking so there isn't yet another thread about this. Trying v4 today and setting a base path for tailwind using the source function with @import is an error:

[kisamoto]

As a workaround to this I moved the source to:

@import "tailwindcss";
@source ".";

[xcrap]

Yeah the work around does not work with source(none); and even using biome-ignore it stills warns me about this, any solution ?

[ekwoka]

This is because it's not a linting error, but a parsing error...

[schang124]

Seems like there is no workaround for prefix for tailwind v4.
If Biome support tailwind v4 syntax, that would be great since lots of people uses it.

@import "tailwindcss" prefix(tw); // <-- this gives error

[jole78]

might be totally wrong here but I think this works...does for me at least

@import 'tailwindcss/theme' layer(theme);
@import 'tailwindcss/utilities' layer(utilities);

@theme prefix(tw) {
  --\*: initial;
  ...your theme here...

[EKliptus]

In my case, Biome can't format css files when the necessary Vscode settings associate css file to tailwind. Biome isn't associate to tailwind languageID :

// settings.json
 "files.associations": {
    "*.css": "tailwindcss" // https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss#files.associations
  }

It is needed for vscode to recognize @plugin directive and others

With Biome is it possible to override file extension to tell all css file is parse/format/lint/check by Biome ?

[lishaduck]

That's a different issue, this is about syntax support (although if you fixed it, then you'd probably hit this as well)

[therealJonSnow]

I came across the same issue when using --color-*: initial; as per the tailwind docs for removing all tailwind default colors.

@jole78 solution seems to remove all tailwind default classes (including margin, padding etc).

If you just want to remove colors then i found the --color-\*: initial; worked.

I have literally no experience with biomejs - but hope this helps and works for others.

[jesseb34r]

escaping with a \ also worked for me

[AlbaOngaro]

same here!

[Mnigos]

Any workaround for this?

[ekwoka]

escaping with \* works fine.

[cantutar]

My problem was it picks up @apply and @plugin and @custom-variant for example:

src/styles/index.css:4:2 lint/suspicious/noUnknownAtRules ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Unexpected unknown at-rule: plugin 
  
    2 │ @import "tw-animate-css";
    3 │ /* index.css veya global CSS'te */
  > 4 │ @plugin "tailwindcss-debug-screens";
      │  ^^^^^^
    5 │ 

[yairEO]

Yeah.. really terrible thing. I would prefer Biome to allow the biome.json file to "extend" the noUnknownAtRules with a whitelist, something like so:

{
  "linter": {
    "rules": {
      "suspicious": {
        "noUnknownAtRules": {
          "level": "warn",
          "options": {
            "whitelist": ["@apply", "@plugin"]
          }
        }  
      }
    }
  }
}

[Netail]

Stylelint also has an exclude option; https://stylelint.io/user-guide/rules/at-rule-no-unknown/. I think this would be nice to add, even if Tailwind syntax will be supported soon

[rickyzhangca]

getting Property whitelist is not allowed. for using whitelist

[lishaduck]

getting Property whitelist is not allowed. for using whitelist

Please read the whole comment before responding. That was an idea for what might be added someday if someone decides to implement generic CSS rule support. As is, there is no such support.

[Netail]

Biome 2.3.0 will land an ignore option; #7745. But will also support tailwind syntax, so probably won't be needed. More a future proof feature ;)