Полный список основных групп классов в Tailwind CSS

Tailwind CSS — это мощный инструмент для создания пользовательских интерфейсов с использованием утилитарного подхода. Все классы в Tailwind CSS можно разделить на несколько основных групп, каждая из которых отвечает за определенный аспект стилизации. Ниже приведено подробное описание всех классов, разбитых по группам.

1. Layout (Макет)

Классы, которые управляют макетом элементов, включая позиционирование, отображение и контейнеры.

• Container:
• container: Центрирует содержимое и добавляет максимальную ширину в зависимости от размера экрана.
• Box Sizing:
• box-border: Устанавливает box-sizing: border-box.
• box-content: Устанавливает box-sizing: content-box.
• Display:
• block, inline-block, inline, flex, inline-flex, grid, inline-grid, table, table-caption, table-cell, table-column, table-column-group, table-footer-group, table-header-group, table-row-group, table-row, flow-root, contents, list-item, hidden: Управление типом отображения элемента.
• Positioning:
• static, fixed, absolute, relative, sticky: Управление позиционированием элемента.
• Floats:
• float-right, float-left, float-none: Управление обтеканием элемента.
• Clear:
• clear-left, clear-right, clear-both, clear-none: Управление очисткой обтекания.
• Isolation:
• isolate, isolation-auto: Управление контекстом наложения.
• Object Fit:
• object-contain, object-cover, object-fill, object-none, object-scale-down: Управление масштабированием изображений.
• Overflow:
• overflow-visible, overflow-hidden, overflow-scroll, overflow-auto, overflow-x-visible, overflow-y-visible, etc.: Управление переполнением контента.
• Z-Index:
• z-0, z-10, z-20, …, z-auto: Управление порядком наложения элементов.

2. Flexbox & Grid (Флексбокс и сетка)

Классы для управления макетами с использованием Flexbox и CSS Grid.

• Flex Direction:
• flex-row, flex-row-reverse, flex-col, flex-col-reverse: Направление главной оси.
• Flex Wrap:
• flex-wrap, flex-wrap-reverse, flex-nowrap: Управление переносом элементов.
• Align Items:
• items-start, items-end, items-center, items-baseline, items-stretch: Выравнивание элементов по поперечной оси.
• Justify Content:
• justify-start, justify-end, justify-center, justify-between, justify-around, justify-evenly: Выравнивание элементов по главной оси.
• Gap:
• gap-0, gap-1, …, gap-96: Управление расстоянием между элементами.
• Grid Template Columns:
• grid-cols-1, grid-cols-2, …, grid-cols-12: Определение количества колонок.
• Grid Template Rows:
• grid-rows-1, grid-rows-2, …, grid-rows-6: Определение количества строк.
• Grid Auto Flow:
• auto-cols-auto, auto-cols-min, auto-cols-max, auto-cols-fr: Управление автоматическим потоком колонок.

3. Spacing (Отступы и поля)

Классы для управления внешними и внутренними отступами.

• Padding:
• p-0, p-1, …, p-96: Общий отступ.
• px-0, py-0, pt-0, pr-0, pb-0, pl-0: Отступы по осям или сторонам.
• Margin:
• m-0, m-1, …, m-96: Общий внешний отступ.
• mx-0, my-0, mt-0, mr-0, mb-0, ml-0: Внешние отступы по осям или сторонам.
• Space Between:
• space-x-0, space-y-0: Расстояние между дочерними элементами.

4. Sizing (Размеры)

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

• Width:
• w-0, w-1, …, w-full, w-screen, w-auto: Ширина элемента.
• Height:
• h-0, h-1, …, h-full, h-screen, h-auto: Высота элемента.
• Max Width/Height:
• max-w-xs, max-w-sm, …, max-w-full: Максимальная ширина.
• max-h-0, max-h-full: Максимальная высота.
• Min Width/Height:
• min-w-0, min-w-full: Минимальная ширина.
• min-h-0, min-h-full: Минимальная высота.

5. Typography (Типографика)

Классы для управления текстом и шрифтами.

• Font Family:
• font-sans, font-serif, font-mono: Семейство шрифтов.
• Font Size:
• text-xs, text-sm, text-base, …, text-9xl: Размер шрифта.
• Font Weight:
• font-thin, font-extralight, …, font-black: Толщина шрифта.
• Text Alignment:
• text-left, text-center, text-right, text-justify: Выравнивание текста.
• Text Transform:
• uppercase, lowercase, capitalize, normal-case: Преобразование регистра.
• Line Height:
• leading-none, leading-tight, …, leading-loose: Высота строки.

6. Backgrounds & Borders (Фон и границы)

Классы для управления фоном и границами элементов.

• Background Color:
• bg-transparent, bg-black, bg-white, bg-gray-100, …, bg-blue-500: Цвет фона.
• Border:
• border, border-0, border-2, border-solid, border-dashed, etc.: Границы элемента.
• Border Radius:
• rounded-none, rounded-sm, rounded-md, …, rounded-full: Радиус скругления.
• Box Shadow:
• shadow-sm, shadow-md, shadow-lg, shadow-xl, shadow-none: Тени.

7. Effects (Эффекты)

Классы для управления эффектами, такими как прозрачность и фильтры.

• Opacity:
• opacity-0, opacity-25, …, opacity-100: Прозрачность.
• Filters:
• blur-sm, blur-md, blur-lg, brightness-50, contrast-50, etc.: Фильтры.

8. Transitions & Animations (Переходы и анимации)

Классы для управления анимациями и переходами.

• Transition:
• transition-none, transition-all, transition-colors, etc.: Переходы.
• Animation:
• animate-none, animate-spin, animate-pulse, etc.: Анимации.

9. Interactivity (Интерактивность)

Классы для управления состояниями элементов, такими как курсоры и события.

• Cursor:
• cursor-auto, cursor-pointer, cursor-not-allowed, etc.: Вид курсора.
• Pointer Events:
• pointer-events-none, pointer-events-auto: Управление событиями указателя.

10. SVG & Accessibility (SVG и доступность)

Классы для работы с SVG и улучшения доступности.

• Fill:
• fill-current: Заливка текущим цветом текста.
• Stroke:
• stroke-current: Обводка текущим цветом текста.
• Screen Readers:
• sr-only, not-sr-only: Скрытие элементов для экранного чтения.

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

1. Фиксированные значения

Эти значения задают максимальную ширину в пикселях или других единицах измерения.

2. Процентные значения

Эти значения задают максимальную ширину в процентах от ширины родительского элемента.

3. Viewport-relative значения

Эти значения задают максимальную ширину относительно ширины окна браузера (viewport).

Стандартные цвета и их оттенки

Каждый цвет в Tailwind имеет несколько оттенков, от 50 (самый светлый) до 900 (самый темный). Вот список стандартных цветов и их оттенков:

1. Серый (Gray)

2. Синий (Blue)

3. Красный (Red)

4. Зеленый (Green)

5. Желтый (Yellow)

6. Фиолетовый (Purple)

7. Розовый (Pink)

8. Оранжевый (Orange)

9. Голубой (Sky)

10. Бирюзовый (Teal)