7 мин чтения
2026-01-15
Tailwind CSS предоставляет тщательно подобранную палитру из 22 цветов, каждый с 11 оттенками (от 50 до 950). Это более 240 готовых цветов для любого проекта.
Формат: `{свойство}-{цвет}-{оттенок}`
`bg-blue-500` — фон синего цвета средней яркости
`text-gray-900` — тёмно-серый текст
`border-red-300` — светло-красная рамка
| Оттенок | Применение |
|---|---|
| 50 | Очень светлый фон |
| 100-200 | Фон карточек, подложки |
| 300-400 | Рамки, разделители |
| 500 | Основной цвет |
| 600-700 | Hover-состояния, акценты |
| 800-900 | Текст, заголовки |
| 950 | Максимально тёмный |
Рекомендуется создавать семантические переменные:
Primary — основной цвет действий
Secondary — вторичный цвет
Success — green-500
Warning — amber-500
Error — red-500
Tailwind позволяет расширять палитру через tailwind.config.js, добавляя собственные цвета и оттенки.
Смотрите также: Material Design цвета, Проверка контраста, Конвертер цветов