Порой сложно сразу перейти на стилизацию своего проекта с использованием Tailwind CSS, когда до этого ты всё время стилизовал элементы страницы с помощью стандартного CSS.
В Tailwind CSS, начиная с версии 2.1, можно использовать классы с динамическими значениями, например, с помощью конструкции []. Это позволяет задавать цвета, фоны и размеры с использованием произвольных значений прямо в классе. Это особенно полезно, когда вы хотите использовать кастомные цвета без необходимости изменять конфигурацию Tailwind.
Например, чтобы стилизовать такой элемент на странице, необходимо по стандартам Tailwind CSS добавить в тег следующие классы:
<p class="text-red-500 bg-gray-200 p-3 rounded-md">
Условия для кадровика:
</p>
Но неудобство данного подхода, как по мне, заключается в том, что в этом случае необходимо выбирать цвета и размеры уже из имеющейся линейки Tailwind. Намного удобнее использовать следующую конструкцию, которая позволяет легко кастомизировать родные классы в Tailwind при необходимости.
<p class="text-[red] bg-[#E5E7EB] p-[12px] rounded-[0.375rem]">
Условия для кадровика:
</p>
Пояснение:
- Цвет текста:
text-[red]: Здесь мы используем квадратные скобки, чтобы указать произвольный цвет текста. Можем использовать как стандартное имя цвета CSS, так и HEX, RGB или HSL. - Фоновый цвет:
bg-[#E5E7EB]: Это HEX-код для светлого серого цвета, который соответствует bg-gray-200. - Отступы (padding):
p-[12px]: Вы используете произвольное значение для задания отступов. В данном случае 12px соответствует p-3. - Радиус границ:
rounded-[0.375rem]: Задает радиус закругления границ, который соответствует классу rounded-md (который равен 6px или 0.375rem).
Использование Tailwind CSS с возможностью задания произвольных значений является не только удобным, но и современным подходом к веб-разработке. Этот метод позволяет разработчикам быстрее и гибче настраивать стили своих проектов, не ограничиваясь стандартными цветами и размерами.