Переезд с tailwind 3 на tailwind 4⁠⁠

Недавно обновляли корпоративную дизайн систему. Кроме чистки компонентов и их упрощения решили переехать с tailwind 3 на tailwind 4. В качестве сборщика у нас Vite, фреймворк Svelte.

В предыдущей версии компонентов мы не скупясь писали блоки стилей прямо в компонентах, применяя функцию tailwind @apply - это сильно причёсывает код в плане чистоты, как шаблона, так и чистоты стилей.

Стартанули мигрирование, прогнали миграционную утилиту от tailwind, все по православному, но - при запуске apply не работал и tw классы не резолвились. Пошли читать доку, вычислили новые правила про вызов функции @reference в каждом блоке стилей в компоненте. НО блэ, в доке приводят примеры:

• либо ссылаемся относительным путём к своему конфигу tailwind @reference "../../app.css"

• либо красиво и лаконично @reference "tailwindcss" - но тогда твой конфиг отваливается, корпоративные токены и вся прочая мишура остаётся за бортом.

Пошел гуглить, ведь наверняка есть варианты создать свой алиас, чтобы не писать относительные пути. Wasted несколько часов и стаканов кофе, чтобы найти решение в дебатах на github.

Добавляем в конфиг фреймворка алиас:

alias: {

'corp-tailwind': './src/corp-tailwind.css'

},

В компонентах в блоке стилей пишем (у нас scss):

<style scoped lang="scss">

@ import "corp-tailwind" reference;

...

</style>

Почему такой пример нельзя было привести в документации tailwind, я так и не понял. Надеюсь, кому-то пригодится данная заметка.