Глава 35. Tailwind CSS: быстрые стили без боли

Зачем эта глава

Tailwind CSS позволяет быстро стилизовать интерфейс, не переключаясь между файлами. Это популярный инструмент у современных фронтендеров.

Как подключить Tailwind

В реальном проекте Tailwind подключается через установку пакетов и файл конфигурации.

Bash

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Пример использования

JSX

export default function Card() {
  return (
    <div className="p-4 rounded-xl border shadow-sm">
      <h3 className="text-lg font-semibold">Карточка</h3>
      <p className="text-gray-600">Описание товара</p>
      <button className="mt-3 bg-blue-600 text-white px-4 py-2 rounded">
        Купить
      </button>
    </div>
  );
}

Подсказка: Tailwind удобно использовать, когда дизайн часто меняется.

Задания

Задание: Tailwind-карточка

Сделай карточку с кнопкой.
Добавь тени и скругления.
Сделай hover-эффект.

Проверка себя

Ты понимаешь принцип Tailwind и можешь стилизовать интерфейс без отдельного CSS.

← Предыдущая Следующая глава →