How to replace @import with @use as @import is being Deprecated?

[micobarac]

I am trying to import Tailwind CSS v.4 and set important globally.

// This is deprecated
@import "tailwindcss" important;

// This throws an error: [ERROR] expected ";".
@use 'tailwindcss' important;

I use @apply a lot to reuse component styles, and some of the classes lists with @apply can be very long. I don't want to append '!' to each and every class inside, as it doesn't look elegant at all.

@import is Deprecated

[wongjn]

As per the Sass docs:

Because @import is also defined in CSS, Sass needs a way of compiling plain CSS @imports without trying to import the files at compile time. To accomplish this, and to ensure SCSS is as much of a superset of CSS as possible, Sass will compile any @imports with the following characteristics to plain CSS imports:

• Imports where the URL ends with .css.

Thus, you can rewrite the @import to be:

@import "tailwindcss/index.css" important;

And you should not get any deprecation messages.

[micobarac]

That's fine to suppress deprecation warning, but what about using @use and @forward, as suggested by the latest SASS Dart specs?

[wongjn]

Anecdotately, Tailwind doesn't work well in that situation. This is because Sass will process some parts of the Tailwind imports. Then after, when Tailwind processes the CSS, some information/metadata is lost, causing Tailwind to not work as intended.

Also, as per the documentation:

Tailwind CSS v4.0 is a full-featured CSS build tool designed for a specific workflow, and is not designed to be used with CSS preprocessors like Sass, Less, or Stylus.

Think of Tailwind CSS itself as your preprocessor — you shouldn't use Tailwind with Sass for the same reason you wouldn't use Sass with Stylus.

Since Tailwind is designed for modern browsers, you actually don't need a preprocessor for things like nesting or variables, and Tailwind itself will do things like bundle your imports and add vendor prefixes.

[micobarac]

OK. Thanks for explanation.