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

Функции:

Утилита прежде всего:

Tailwind css — это CSS-фреймворк, ориентированный на утилиты, который предоставляет низкоуровневые служебные классы для создания пользовательских проектов без написания CSS. Этот подход позволяет нам реализовать полностью индивидуальный дизайн компонентов без написания единой строки пользовательского CSS. «Вы не тратите энергию на придумывание названий классов».

Очистка контента:

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

Команды:

Подчеркивание:

underline 
underline-offset-
decoration-- //color for underline
decoration- // size of underline
decoration-

Стилизация текста

text-- //color of text
text-opacity- //opacity of text
text- //size of text
text- //alignment of text

Цвет фона

bg--

Радиус границы

rounded-

Стилизация шрифта

font-

Курсив:

italic

Видимость

Скрыть элементы:

hidden

Отображение (напротив скрытия):

block

Отступы

p-   /* All sides */
px-  /* Horizontal (left and right) */
py-  /* Vertical (top and bottom) */
pl-  /* Left */
pr-  /* Right */
pt-  /* Top */
pb-  /* Bottom */

Допуск

m-   /* All sides */
mx-  /* Horizontal (left and right) */
my-  /* Vertical (top and bottom) */
ml-  /* Left */
mr-  /* Right */
mt-  /* Top */
mb-  /* Bottom */

Флексбокс

flex
flex- // row or column

Обоснование содержания

justify-

Выровнять элементы

items- //start,end,center

Адаптивный дизайн

sm  /* Small devices */
md  /* Medium devices */
lg  /* Large devices */
xl  /* Extra large devices */

Размеры

h-
w-

Границы

border
border-
border-

Состояния при наведении

hover: