Переезд с 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, я так и не понял. Надеюсь, кому-то пригодится данная заметка.
