TailwindCSS

TailwindCSS - набор CSS-классов-утилиток, типа grid, text-white, rounded

Tailwind - это что-то между чистым CSS и UI-фреймворком

Как юзать

• Просто пишешь css-классы
• Можно юзать с фреймворками, типа Vue
• Можно добавить в проект без JS, типа сюда в MkDocs, используя Tailwind CLI
• Есть интеграции с Idea и VSCode

FAQ

Что за tailwind.config.js?

• Настройки Tailwind
• content - какие файлы чекать на предмет Tailwind-классов
• safelist - принудительное добавление класса в итоговый css
• theme - стилизовочка
• plugins - плагин для интеграции с фреймворками, плагины для Tailwind

Как убрать сброс CSS?

Нужно убрать preflight-слой:

/* Удаляем это из файла с tailwind-слоями */
@tailwind base;

Когда не стоит юзать Tailwind?

• Если уже юзаешь UI-фреймворк, типа Vuetify, то может что-то поехать — лучше придерживаться фреймворка
  • хотя можно извратиться

Тулзы / Ресурсы

• Читшита, еще одна
• Подборочка Tailwind штук
• DaisyUI - UI на Tailwind
• shadcn.ui - еще UI на Tailwind
• Typewind - типизированный Tailwind
• Tailscan - интерактивный Tailwind
• Mailwind - письма на Tailwind