Шпаргалка по 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 на лету.

Простой пример с использованием основных стилей Tailwind CSS

Для более наглядного понимания работы стилей фреймворка Tailwind CSS сверстаем простой блок, который будет включать в себя практически все вышеописанные стили.


<div class="flex items-center justify-center h-screen bg-gray-100">
    <div class="bg-white shadow-lg rounded-lg p-6 max-w-sm sm:max-w-md md:max-w-lg lg:max-w-xl">
        <h2 class="text-2xl sm:text-3xl font-bold text-gray-800 mb-4">Заголовок</h2>
        <p class="text-gray-600 mb-4">
            Это пример текстового содержимого, оформленного с помощью Tailwind CSS.
        </p>
        <button class="bg-blue-500 text-white font-semibold py-2 px-4 rounded hover:bg-blue-600 transition duration-200">
            Нажми меня
        </button>
    </div>
</div>

Tailwind CSS - простой пример со всеми стилями

Объяснение адаптивных классов:

sm:max-w-md: Устанавливает максимальную ширину контейнера 28rem (448px) на устройствах с минимальной шириной экрана 640px и выше.
md:max-w-lg: Устанавливает максимальную ширину контейнера 32rem (512px) на устройствах с минимальной шириной экрана 768px и выше.
lg:max-w-xl: Устанавливает максимальную ширину контейнера 36rem (576px) на устройствах с минимальной шириной экрана 1024px и выше.
sm:text-3xl: Увеличивает размер шрифта заголовка до 3xl на устройствах с минимальной шириной экрана 640px и выше.

Объяснение классов:

flex: Устанавливает элемент как flex-контейнер, позволяя использовать свойства Flexbox для выравнивания дочерних элементов.
items-center: Выравнивает элементы по центру вдоль поперечной оси (по вертикали).
justify-center: Располагает элементы по центру вдоль основной оси (по горизонтали).
h-screen: Устанавливает высоту контейнера на 100% высоты экрана.
bg-gray-100: Задает фоновый цвет светло-серого оттенка.
bg-white: Устанавливает белый цвет фона для внутреннего блока.
shadow-lg: Применяет большой теневой эффект для создания глубины.
rounded-lg: Добавляет скругление углов с большими радиусами.
p-6: Устанавливает внутренний отступ (padding) равный 1.5rem (24px) со всех сторон.
max-w-sm: Устанавливает максимальную ширину блока, равную 24rem (384px).
text-2xl: Задает размер шрифта для заголовка.
font-bold: Устанавливает текст заголовка как жирный.
text-gray-800: Устанавливает цвет текста заголовка на темно-серый.
mb-4: Добавляет нижний отступ (margin-bottom) равный 1rem (16px).
text-gray-600: Устанавливает цвет текста параграфа на средне-серый.
bg-blue-500: Задает фоновый цвет кнопки на ярко-синий.
text-white: Устанавливает цвет текста кнопки на белый.
font-semibold: Устанавливает текст кнопки как полужирный.
py-2: Устанавливает вертикальный внутренний отступ (padding) кнопки равный 0.5rem (8px).
px-4: Устанавливает горизонтальный внутренний отступ (padding) кнопки равный 1rem (16px).
rounded: Добавляет скругление углов кнопки с небольшим радиусом.
hover:bg-blue-600: Изменяет цвет фона кнопки на более темный синий при наведении курсора мыши, что улучшает интерактивность.
transition: Устанавливает плавный переход для изменения стилей, таких как цвет фона.
duration-200: Задает продолжительность перехода в 200 миллисекунд, что делает эффект более гладким.

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