Sometimes it's difficult to immediately switch to styling your project using Tailwind CSS, when before that you were always styling page elements using standard CSS.
In Tailwind CSS, starting from version 2.1, you can use classes with dynamic values, for example, using the [] construct. This allows you to set colors, backgrounds, and sizes using arbitrary values right in the classroom. This is especially useful when you want to use custom colors without having to change the Tailwind configuration.
For example, to style such an element on a page, you must add the following classes to the tag according to Tailwind CSS standards:
<p class="text-red-500 bg-gray-200 p-3 rounded-md">
Conditions for the HR officer:
But the disadvantage of this approach, as for me, is that in this case it is necessary to choose colors and sizes from the existing Tailwind line. It is much more convenient to use the following construction, which makes it easy to customize native classes in Tailwind if necessary.
<p class="text-[red] bg-[#E5E7EB] p-[12px] rounded-[0.375rem]">
Conditions for the HR officer:
Explanation:
- Text color:
text-[red]: Here we use square brackets to indicate an arbitrary text color. We can use either the standard CSS color name, or HEX, RGB, or HSL. - Background color:
bg-[#E5E7EB]: This is the HEX code for the light gray color, which corresponds to bg-gray-200. - Padding:
p-[12px]: You are using an arbitrary value to set the margins. In this case, 12px corresponds to p-3. - Border radius:
rounded-[0.375rem]: Sets the border radius corresponding to the rounded-md class (which is 6px or 0.375rem).
Using Tailwind CSS with the ability to set arbitrary values is not only convenient, but also a modern approach to web development. This method allows developers to customize the styles of their projects faster and more flexibly, not limited to standard colors and sizes.