Эта шпаргалка содержит основные и наиболее необходимые стили 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 на лету.