Яндекс.Метрика
qr-код - Как-то так стрелка - Как-то так
Leading Economist + ... пиктограмма - Как-то Так THIS     Economic literacy and web solutions
All on the topic: what, how and why. Actual things - in their own words.
Turn your quality WITH ME - BUTW !
If you don't like what you get, change what you give. © Carlos Castaneda     KAKTOTAK.BY - economic design and web development services (php/js - telegram, WordPress, Laravel, Vue, SEO)    Cooperation - on an ongoing basis    Be in the topic   -    SUBSCRIBE      My notes are ECONOMICS +  и  WEB Developer's Guide | php+js+seo   в Telegram   telegram  

The Tailwind CSS Cheat sheet - the main and most necessary styles of the CSS framework

The Tailwind CSS Cheat sheet - the main and most necessary styles of the CSS framework

Эта шпаргалка содержит основные и наиболее необходимые стили 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 на лету.
автор - Михаленко Р.
M R. Автор - kaktotak.by Specialization: financial and economic design - modeling of business, investment projects of the real sector, analysis and evaluation of efficiency, optimization of the management decision system.

A wide range of web-based competencies for solving business problems.

Subscribe to my telegram channel - My notes are ECONOMICS +
Improve your quality with me - what, how and why in economics in a simple way. Micro and macro aspects.

And also - WEB Developer's Guide | php+js+seo
Notes and native solutions to simple local tasks in PHP, JS. Something about Laravel, WordPress, Vue and SEO.

  Personal assistance in economic design and web development:

  • Financial and economic modeling, analysis, accounting, business planning
  • Comprehensive web development/project support on the web (php/js, seo – Laravel, WordPress, Vue, telegram, administration, content, advertising in Yandex Direct

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

Administrator
65
0
Name
E-mail
Rating
Review

Currency Converter
RUB RUB-icon
USD USD-icon
EUR EUR-icon
CNY CNY-icon
BYN BYN-icon
UAH UAH-icon
KZT KZT-icon
SHORT- what is it about
ECONOMIC LITERACY
  Simple online solutions to problems of economics and finance  
I Want To Know Everything. Useful Tips