6 советов по работе с цветами в Tailwind CSS

6 советов по цветам в Tailwind CSS

1. Используйте CSS-переменные для тем

Определите цвета через CSS-переменные и переключайте их для светлой и тёмной тем.

2. Соблюдайте контраст

Текст с оттенком 900 на фоне 50 — безопасная комбинация. Проверяйте промежуточные варианты в Проверке контраста.

3. Группируйте цвета по назначению

Создайте семантические классы: primary, secondary, accent, neutral — вместо прямого использования blue-500.

4. Не используйте слишком много цветов

Ограничьтесь 2-3 основными цветами палитры Tailwind и их оттенками.

5. Используйте opacity-модификаторы

`bg-blue-500/75` — фон с 75% прозрачностью. Удобно для оверлеев и полупрозрачных элементов.

6. Тестируйте тёмную тему

Утилита `dark:` позволяет задать альтернативные цвета. Убедитесь, что все элементы читаемы.

Смотрите также: Цветовое колесо, Цвета из изображения