Основные концепции Tailwind CSS

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

Ниже приведены некоторые основные концепции и примеры использования Tailwind CSS:

КонцепцияОписание
Утилитарные классы (Utility-First)В основе Tailwind CSS лежат утилитарные классы, позволяющие быстро задавать стили и применять их непосредственно к HTML-элементам.
Адаптивные префиксыИспользуйте, например,sm:, md:, lg:, xl:префиксы для управления стилями на разных размерах экрана.
Цвета и размерыПредоставляет предопределённые цвета (такие какbg-red-500) и размеры (такие какtext-lg) для быстрой настройки стилей.
ОтступыЧерезp-, m-, pt-, pr-и другие классы для управления padding и margin.
LayoutПредоставляетflex, grid, floatи другие классы для реализации управления макетом.
Стили текстаВключает утилитарные классы для выравнивания текста, стилей шрифта, цветов и преобразований, такие какtext-center, font-bold, uppercase。
Фоны и границыПредоставляет утилитарные классы для цветов фона, фоновых изображений, стилей границ и цветов, такие какbg-gray-200, border-red-500。
Наведение и состоянияИспользуйтеhover:, focus:, active:и другие префиксы для определения стилей интерактивных состояний.
РазмерыИспользуйтеw-, h-классы для управления шириной и высотой, такие какw-64, h-screen。
ВидимостьИспользуйтеvisible, invisibleи другие классы для управления видимостью элемента.
Система сетокПредоставляет утилитарные классы на основе CSS Grid, такие какgrid, grid-cols-3, col-span-2, для реализации адаптивных сеточных макетов.
Пользовательская конфигурацияЧерезtailwind.config.jsнастраивать цвета, отступы, размеры шрифта и т. д. в соответствии с потребностями проекта.
Тёмный режимПоддерживает темный режим, используяdark:префикс для настройки стилей, а тёмный режим можно включить в конфигурации.
ПлагиныРасширяйте функциональность с помощью плагинов, добавляя пользовательские утилитарные классы или возможности.
ДирективыИспользование в CSS-файлах@tailwindдирективы для импорта различных слоёв стилей, таких какbase, components, utilities。

Детали концепции

1. Утилитарные классы (Utility-First)

Утилитарные классы Tailwind позволяют разработчикам быстро задавать стили без ручного написания CSS.

Пример

<div class="text-center text-blue-500 font-bold">
  Утилитарные классы Tailwind
</div>

Попробуйте »

Пояснение:

  • text-center: Выравнивание по центру.
  • text-blue-500: Синий текст.
  • font-bold: Жирный шрифт.

2. Адаптивные префиксы

Используйте префиксы для задания стилей при разных размерах экрана.

Пример

<div class="bg-red-500 sm:bg-green-500 md:bg-blue-500 lg:bg-yellow-500">
  Адаптивный пример
</div>

Попробуйте »

Пояснение:

  • По умолчанию: красный фон.
  • Маленькие экраны (≥640px): зелёный фон.
  • Средние экраны (≥768px): синий фон.
  • Большие экраны (≥1024px): жёлтый фон.

3. Цвета и размеры

Tailwind предоставляет богатый набор предопределённых цветов и размеров для быстрого применения.

Пример

<p class="text-lg text-gray-600">
  Текст с предопределённым размером и цветом
</p>

Попробуйте »

Пояснение:

  • text-lg: Размер шрифта.
  • text-gray-600: Серый текст.

4. Отступы

Задайте внутренние и внешние отступы элемента с помощью служебных классов отступов.

Пример

<div class="p-4 m-8">
  Пример с padding и margin
</div>

Попробуйте »

Пояснение:

  • p-4: Padding равен 1rem.
  • m-8: Margin равен 2rem.

5. Layout

Предоставленные классы позволяют быстро реализовать гибкие методы макета, такие как Flexbox и Grid.

Пример

<div class="flex justify-between items-center">
  <div>Элемент 1</div>
  <div>Элемент 2</div>
</div>

Попробуйте »

Пример Grid:

Пример

<div class="grid grid-cols-3 gap-4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Попробуйте »

6. Стили текста

Управляйте выравниванием текста, цветом, размером и другими стилями.

Пример

<p class="text-center font-semibold text-red-500">
  Полужирный текст по центру
</p>

Попробуйте »

7. Фоны и границы

Используйте утилитарные классы для настройки цвета фона, изображений и стилей границ.

Пример

<div class="bg-yellow-200 border border-gray-400">
  Пример фона и границы
</div>

Попробуйте »

8. Наведение и состояния

Задайте стили состояний для интерактивных элементов.

Пример

<button class="bg-blue-500 hover:bg-blue-700 text-white">
  Наведите на меня
</button>

Попробуйте »

9. Размеры

Задайте ширину и высоту элементов.

Пример

<div class="w-64 h-32 bg-gray-300">
  Ширина и высота
</div>

Попробуйте »

10. Видимость

Управляйте отображением и скрытием элементов.

Пример

<div class="invisible sm:visible">
  Отображается только на маленьких экранах
</div>

Попробуйте »

11. Система сеток

Используйте утилитарные классы Grid в Tailwind для создания макетов сетки.

Пример

<div class="grid grid-cols-3 gap-2">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Попробуйте »

12. Пользовательская конфигурация

Настройте дизайн-систему с помощью файлов конфигурации.

Пример

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#1D4ED8',
      },
    },
  },
}

Попробуйте »

13. Тёмный режим

Включите тёмный режим и определите стили.

Пример

<div class="bg-white dark:bg-black text-black dark:text-white">
  Пример тёмного режима
</div>

Попробуйте »

14. Плагины

Расширяйте функциональность Tailwind с помощью плагинов.

Пример

// tailwind.config.js
const plugin = require('tailwindcss/plugin')
module.exports = {
  plugins: [
    plugin(function({ addUtilities }) {
      addUtilities({
        '.rotate-45': {
          transform: 'rotate(45deg)',
        },
      })
    }),
  ],
}

15. Директивы

Через@tailwindдирективы для загрузки различных слоёв Tailwind.

Пример

@tailwind base;
@tailwind components;
@tailwind utilities;
Другие расширения