Вот некоторые часто используемые CSS-классы Tailwind и примеры их кода:

1. Флексбокс:

   • flex: применение макета flexbox к элементу.
   • flex-row: установите направление гибкости для строки.
   • flex-col: установите направление гибкости для столбца.
     Пример:

     <div class="flex flex-row">
     <!-- Content here -->
     </div>

2. Интервал:

   • m-{size: применить поле к элементу. Размеры: 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64.
   • p-{size: применить отступы к элементу. Размеры: 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64.
     Пример:

     <div class="m-4 p-2">
     <!-- Content here -->
     </div>

3. Ширина и высота:

   • w-{size: установите ширину элемента. Размеры: авто, пикселей, 1/2, 1/3, 2/3, 1/4, 2/4, 3/4, 1/5, 2/5, 3/5, 4/5, 1/6, 2/6, 3/6, 4/6, 5/6, 1/12, 2/12, 3/12, 4/12, 5/12, 6/12, 7/12, 8/12, 9/ 12, 10/12, 11/12, полный, экран.
   • h-{size: установка высоты элемента. Размеры: авто, пикселей, полный, экран.
     Пример:

     <div class="w-1/2 h-64">
     <!-- Content here -->
     </div>

4. Фоны:

   • bg-{color}: установите цвет фона. Цвета: серый, красный, синий, зеленый, желтый, индиго, фиолетовый, розовый, бирюзовый, оранжевый.
   • bg-opacity-{opacity: установите непрозрачность фона. Непрозрачность: 0, 25, 50, 75, 100.
     Пример:

     <div class="bg-blue-500 bg-opacity-50">
     <!-- Content here -->
     </div>

5. Типографика:

   • text-{size: установите размер шрифта. Размеры: xs, sm, base, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl.
   • text-{color}: установите цвет текста. Цвета: серый, красный, синий, зеленый, желтый, индиго, фиолетовый, розовый, бирюзовый, оранжевый.
     Пример:

     <p class="text-xl text-red-500">
     This is some text.
     </p>

6. Границы:

   • border: примените рамку к элементу.
   • border-{size: установите размер границы. Размеры: 0, 2, 4, 8.
   • border-{color}: установите цвет границы. Цвета: серый, красный, синий, зеленый, желтый, индиго, фиолетовый, розовый, бирюзовый, оранжевый.
     Пример:

     <div class="border border-blue-500">
     <!-- Content here -->
     </div>

7. Адаптивный дизайн:

   • sm, md, lg, xl: применяйте адаптивные стили на основе точек останова (небольшие, средний, большой, очень большой).
     Пример:

     <div class="text-center md:text-left">
     <!-- Content here -->
     </div>