Cheat sheet on Tailwind CSS

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

1. Основы Flexbox

flex - устанавливает флекс-контейнер.
flex-row - элементы располагаются в строку.
flex-col - элементы располагаются в колонку.
justify-start - выравнивание по началу.
justify-end - выравнивание по концу.
justify-center - выравнивание по центру.
justify-between - равномерное распределение элементов.
justify-around - равномерное распределение с отступами.
items-start - выравнивание элементов по верхнему краю.
items-end - выравнивание элементов по нижнему краю.
items-center - выравнивание по центру.

2. Основы Сеток

grid - устанавливает грид-контейнер.
grid-cols-1, grid-cols-2, ..., grid-cols-12 - количество колонок.
gap-{size} - промежуток между ячейками.

3. Отступы (Padding и Margin)

p-{size} - внутренний отступ.
px-{size} - горизонтальный внутренний отступ.
py-{size} - вертикальный внутренний отступ.
m-{size} - внешний отступ.
mx-{size} - горизонтальный внешний отступ.
my-{size} - вертикальный внешний отступ.

4. Типография

text-{color} - цвет текста.
text-sm, text-base, text-lg, ..., text-4xl - размеры текста.
font-{weight} - начертание шрифта (font-normal, font-bold).
italic - курсив.
underline - подчеркнутый текст.
line-through - зачеркивание текста.

5. Цвета и Фон

bg-{color} - цвет фона.
bg-opacity-{value} - прозрачность фона.
border - добавить границу.
border-{color} - цвет границы.
border-{size} - ширина границы.
rounded - закругленные углы.
rounded-{size} - размер закругления (например, rounded-lg).

6. Размеры

w-{size} - ширина (например, w-1/2, w-full).
h-{size} - высота (например, h-64).
min-w-{size} - минимальная ширина.
min-h-{size} - минимальная высота.
max-w-{size} - максимальная ширина.
max-h-{size} - максимальная высота.

7. Позиционирование

relative - относительное позиционирование.
absolute - абсолютное позиционирование.
fixed - фиксированное позиционирование.
sticky - прилипающее позиционирование.
inset-0 - все четыре стороны к 0.
top-{value}, right-{value}, bottom-{value}, left-{value} - отступы от границ.

8. Фоновые изображения

bg-cover - фоновое изображение с покрытием.
bg-contain - фоновое изображение в пределах контейнера.
bg-center - центрирование фонового изображения.
bg-no-repeat - не повторять фоновое изображение.

9. Анимации и Переходы

transition - активирует переходы.
duration-{time} - задает время анимации.
ease-in, ease-out, ease-in-out - типы эффекта плавности.
transform - активирует трансформации.
scale-{value} - масштабирование (например, scale-50 для 50%).

10. Тени

shadow - легкая тень.
shadow-md - средняя тень.
shadow-lg - большая тень.
shadow-xl - очень большая тень.
shadow-2xl - огромная тень.
shadow-inner - внутренняя тень.
shadow-none - убирает тень.

11. Условия отображения

hidden - скрывает элемент.
block - отображает элемент как блочный.
inline-block - отображает элемент как строчно-блочный.
inline - отображает элемент как строчный.
flex - отображает элемент как флекс-контейнер.

12. Responsive Design

sm:{class} - для минимальной ширины экрана 640px.
md:{class} - для минимальной ширины экрана 768px.
lg:{class} - для минимальной ширины экрана 1024px.
xl:{class} - для минимальной ширины экрана 1280px.
2xl:{class} - для минимальной ширины экрана 1536px.

13. Границы (Borders)

border - добавляет границу.
border-{color} - задает цвет границы (например, border-red-500).
border-{size} - задает толщину границы (например, border-2).
rounded - скругляет углы.
rounded-{size} - задает радиус скругления (например, rounded-lg).

14. Flexbox

flex - включает Flexbox.
flex-row, flex-col - направление (горизонтальное или вертикальное).
justify-center, justify-between - управление выравниванием по главной оси.
items-center, items-start - управление выравниванием по поперечной оси.
flex-wrap - позволяет оборачивать элементы.

15. Grid Layout

grid - включает сетку.
grid-cols-{n} - задает количество колонок.
grid-rows-{n} - задает количество строк.
gap-{size} - задает расстояние между ячейками.
col-span-{n} - задает количество колонок, занимаемых элементом.
row-span-{n} - задает количество строк, занимаемых элементом.

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

p-{size} - задает внутренние отступы (padding).
m-{size} - задает внешние отступы (margin).
py-{size} - отступы по вертикали.
px-{size} - отступы по горизонтали.
pt-{size}, pr-{size}, pb-{size}, pl-{size} - отступы по конкретным направлениям (верх, право, низ, лево).

17. Текст

text-{color} - задает цвет текста (например, text-gray-700).
text-{size} - задает размер текста (например, text-lg).
font-bold, font-medium, font-light - задает толщину шрифта.
text-center, text-right - выравнивание текста.
uppercase, lowercase, capitalize - стилизация текста.

18. Задний фон (Background)

bg-{color} - задает цвет фона (например, bg-blue-500).
bg-opacity-{value} - задает непрозрачность фона.
bg-fixed - фоновое изображение фиксировано по отношению к окну.
bg-local - фоновое изображение прокручивается вместе с содержимым.
bg-scroll - фоновое изображение прокручивается с фоном.

19. Иконки и Изображения

inline - отображение изображения или иконки как встроенного элемента.
object-cover - задает, как изображение адаптируется в контейнере.
object-contain - изображение сохраняет пропорции, чтобы вписаться в контейнер.
max-w-full - изображение не превышает ширину контейнера.

20. Доступность (Accessibility)

sr-only - скрывает элемент для визуальных пользователей, но делает его доступным для экранных читалок.
focus:outline-none - убирает стандартный контур при фокусировке.
focus:ring - добавляет кольцо фокуса.

Дополнительные Примечания

Tailwind CSS можно настраивать через файл конфигурации tailwind.config.js.
Можно использовать плагин для добавления дополнительных утилит.
Для разработки удобно использовать JIT (Just In Time) режим, который генерирует CSS на лету.