Use modern Tailwind syntax

[hhharmEpm]

EPAM AI UI Kit version

0.0.1

What happened?

Currently syntax like @import is used in tailwind files (instead of modern @use). Need to change compiler in the way that such syntax can be used and won't cause styles not being applied

Confidential information

• I confirm that do not share any confidential information

[NastassiaKryshtal]

Using Sass @use here is probably not worth it.

@use requires adding a Sass precompile step before Tailwind, because Tailwind/PostCSS cannot resolve Sass modules. That makes the CSS pipeline more complex: SCSS → Sass → Tailwind → final CSS.
E.g.
"build:css": "sass ./src/styles/tailwind-entry.scss ./src/styles/.tailwind-post-sass.css --no-source-map && tailwindcss -m -i ./src/styles/.tailwind-post-sass.css --postcss ./postcss.config.js -o ./dist/index.css",

It also introduces Sass/Tailwind syntax friction. Some Tailwind patterns that worked before, like important utilities in @apply (!border-controls-accent), must be rewritten with Sass interpolation because Sass parses the file first.

For the current styles, @use does not bring much value: the files mostly contain global CSS classes and Tailwind @apply, with no shared Sass variables, mixins, or module API that would benefit from Sass modules.

So the tradeoff is unfavorable: more build complexity, intermediate files, watcher orchestration, and syntax workarounds, with little practical gain over the existing @import/PostCSS setup.