Tailwind — потужний, але з підводними каменями
Tailwind CSS стрімко набрав популярність, і ми у Franya перейшли на нього понад рік тому. За цей час ми набили чимало шишок і виробили набір практик для великих проєктів.
Модульна архітектура замість одного великого CSS
Ми використовуємо @apply для створення компонентних класів та @layer для організації. Це дає найкраще з обох світів: швидкість утиліт для розмітки та чистоту компонентних класів.
PurgeCSS: не забудьте налаштувати!
Без PurgeCSS ваш зібраний CSS може важити 3-5 МБ. З правильним PurgeCSS фінальний CSS зменшується до 10-30 КБ.
Dark mode: два підходи
Ми рекомендуємо class-підхід — він дає користувачу контроль та дозволяє зберігати вибір.
Кастомний дизайн-токени
Налаштуйте свою палітру через tailwind.config.js. Це робить дизайн узгодженим та дозволяє легко змінювати брендинг.
Responsive design: mobile first
Tailwind використовує mobile-first підхід. Починайте верстку з найменшого екрану, додавайте breakpoints поступово.
Висновок
Tailwind CSS — відмінний інструмент для швидкої розробки, але у продакшені потрібна дисципліна. Модульна архітектура, правильний PurgeCSS, контроль dark mode та власні дизайн-токени — це те, що перетворює хаос утиліт на підтримувану систему.