Яндекс.Метрика
qr-код - Как-то так стрелка - Как-то так
Ведущий экономист + ... пиктограмма - Как-то Так THIS     Экономическая грамотность и web-решения
Всё по теме: что, как и почему. Актуальные вещи - своими словами.
Повышайте своё качество WITH ME - СПЭМ !
Если тебе не нравится то, что ты получаешь, измени то, что ты даешь. © Карлос Кастанеда     KAKTOTAK.BY - услуги по экономическому проектированию и web-разработке (php/js - telegram, WordPress, Laravel, Vue, SEO)    Кооперация - на постоянной основе    Будь в теме   -    ПОДПИШИСЬ      Мои заметки - ЭКОНОМИКА +  и  Справочник WEB-разработчика | php+js+seo   в Telegram   telegram  

Шпаргалка по Tailwind CSS - основные и наиболее необходимые стили CSS-фреймворка

Шпаргалка по Tailwind CSS - основные и наиболее необходимые стили 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 мощным инструментом для разработки.

автор - Михаленко Р.
M R. Автор - kaktotak.by Специализация: финансово-экономическое проектирование - моделирование бизнеса, инвестиционных проектов реального сектора, анализ и оценка эффективности, оптимизация системы управленческих решений.

Широкий спектр web-компетенций для решения задач бизнеса.

Подписывайтесь на мой телеграмм канал - Мои заметки - ЭКОНОМИКА +
Там я ничего не втюхиваю и не навязываю. Просто делюсь полезной информацией по экономической грамотности. Повышайте своё качество вместе со мной: что, как и почему в экономике на простом языке. Понятия, алгоритмы, процессы, микро- и макроаспекты и многое другое. Может, будет интересно !

А так же - Справочник WEB-разработчика | php+js+seo
Заметки и нативные решения простых локальных задач на PHP, JS. Кое-что про Laravel, WordPress, Vue и SEO.

  Персональная помощь в экономическом проектировании и веб-разработке:

  • Финансово-экономическое моделирование, анализ, учёт, бизнес-планирование
  • Комплексная web-разработка/поддержка проекта в сети (php/js, seo – Laravel, WordPress, Vue, telegram, администрирование, контент, реклама в Яндекс Директ

  telegram или форма обратной связи

Administrator
725
0
Имя
E-mail
Рейтинг
Отзыв

Конвертер валют
RUB RUB-icon
USD USD-icon
EUR EUR-icon
CNY CNY-icon
BYN BYN-icon
UAH UAH-icon
KZT KZT-icon
SHORT - о чём речь
ЭКОНОМИЧЕСКАЯ ГРАМОТНОСТЬ
Хочу Всё Знать. Полезные Советы