Tailwind CSS для Astro и CMS
Utility-first фреймворк Tailwind CSS: концепции, адаптив, тёмная тема, Typography-плагин и интеграция с Astro.
privacy
Эта заметка участвует в semantic memory.
AI Summary
- Короткий обзор сути: Tailwind CSS — utility-first CSS-фреймворк, позволяющий стилизовать HTML напрямую через классы без отдельных CSS-файлов, выбран за скорость разработки и контроль над дизайном.
🔑 Ключевые факты: утилитарные классы делают ровно одну вещь; адаптивный дизайн через префиксы mobile-first (grid-cols-1 md:grid-cols-2 lg:grid-cols-3); тёмная тема через префикс dark:; кастомизация через конфиг; Tailwind v4 (2025+) перешёл на CSS-конфигурацию, Oxide-движок на Rust и нативные CSS-переменные.
📌 Важные детали: v4 требует проверки версии Astro-тем (многие ещё на v3); плагин Typography обязателен для CMS-контента — один класс prose dark:prose-invert стилизует весь HTML; подключение одной командой npx astro add tailwind.
💡 Вывод и значение: использовать npx astro add tailwind для интеграции; проверить версию Tailwind в теме; настроить @theme директиву в CSS для v4; применять класс prose для статей из CMS.