Руководства

• CSS против Tailwind — Классический CSS силён в сложных селекторах и анимациях. Tailwind держит визуальные решения рядом с разметкой. Большинство команд используют оба подхода.
• Отступы CSS в Tailwind — padding: 1.5rem становится p-6. Сокращения раскрываются в side-утилиты. Вне шкалы: p-[13px].
• Типографика CSS в Tailwind — font-size: 1.5rem → text-2xl. font-weight: 700 → font-bold. Цвет — text-*.
• CSS Flexbox в Tailwind — display:flex → flex. flex-direction:column → flex-col. justify-content:space-between → justify-between. gap:1rem → gap-4.
• CSS Grid в Tailwind — grid-template-columns: repeat(3, 1fr) → grid-cols-3. Свои треки — через arbitrary values.
• Цвета CSS в Tailwind — Известные hex → text-gray-900. Неизвестные → bg-[#1a2b3c].
• Границы CSS в Tailwind — border: 1px solid → border + border-color. border-radius: 0.5rem → rounded-lg.
• Адаптивный CSS в Tailwind — @media (min-width: 768px) → md:. 1024px → lg:. Сложные запросы — ручная проверка.
• Тени CSS в Tailwind — Обычные тени → shadow / shadow-lg. Уникальные → arbitrary shadow.
• Позиционирование CSS в Tailwind — position:absolute → absolute. Стороны → top/right/bottom/left. Свой z-index → arbitrary.
• Стратегии миграции CSS — Инкрементальная миграция: новые компоненты на Tailwind, затем горячие пути, legacy CSS до замены.

Открыть конвертер Расширение Chrome