False positive invalid.illegal.unexpected-token.css at @import 'tailwindcss' prefix(tw);

[ratijas]

What seems to be a perfectly legal syntax in PostCSS is highlighted as invalid by Sublime Text PostCSS plugin:

@import 'tailwindcss' prefix(tw);

source.postcss
source.css.postcss
invalid.illegal.unexpected-token.css

[ratijas]

Since PostCSS rules reuse CSS syntax, it might even make sense to extend the upstream CSS package. At any rate, parsing prefix as meta.selector.css entity.name.tag.other.css doesn't seem right.

[ratijas]

I'd like to note that the following is not valid:

@import 'tailwindcss' {
  prefix: 'tw';
}

it causes errors like

[@tailwindcss/vite:generate:build] Cannot apply utility class `tw:border-2` because the `tw` variant does not exist.

so it's not the same as / not interchangeable with the inline syntax @import 'tailwindcss' prefix(tw);

[deathaxe]

Since PostCSS rules reuse CSS syntax, it might even make sense to extend the upstream CSS package

Both PostCSS and TailwindCSS package are actually only extensions of core CSS syntax.

What seems to be a perfectly legal syntax in PostCSS

Do you have any documentation or references about that?

1. Default CSS @import just supports a restricted subset of functions, according to https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@import

2. PostCSS seems to rely on https://github.com/postcss/postcss-import to support it, not sure.

3. TailwindCSS doesn't seem to state anything about prefix() either, according to https://tailwindcss.com/docs/functions-and-directives#import-directive.

[ratijas]

I tried looking up documentation for which syntax PostCSS considers valid, but there doesn't seem to be one definitive answer, unfortunately.

https://github.com/postcss/postcss/blob/main/docs/syntax.md

3. TailwindCSS doesn't seem to state anything about prefix() either, according to tailwindcss.com/docs/functions-and-directives#import-directive.

I'm not a frontend expert by any means, but from what I gather Tailwind v4 messed it up big time. It's so hard to find any docs on those prefixes, and even then it doesn't always work (e.g. not supported with @reference kind of import inside Vue SFC <style> tags):

• Adding a custom prefix for tailwind 4.0 tailwindlabs/tailwindcss#16046

The prefix became a variant starting from v4, so Tailwind can now apply it at the very beginning of every class name. For example, in v3: tw-text-sky-500 hover:tw-text-sky-800, whereas from v4 onward: tw:text-sky-500 tw:hover:text-sky-800.

Basically it used to allow dash-separated prefixes, but now it's only double-colon, and people suddenly have to migrate all their code in one go, meh. Like, why…

It's not the only fckup with Tailwind v4, but the most relevant to the current issue here.