Search code examples
csstailwind-css

TailwindCss - use CSS Color KeyWords like AliceBlue, AntiqueWhite, etc

Is it possible for TailwindCss add and display the CSS Color Keywords like AliceBlue, AntiqueWhite, Aqua, etc. and includes the standards like red, green, yellow, etc. that web designers are familiar with and are now supported in all the browsers?

Solution

  • Yes. It currently does not mention it in the documentation, perhaps because they are pushing the user to create / utilize custom palettes (which are a tailwind strength), but this is easily accomplished using arbitrary color values.

    <div class="bg-[pink] w-40 absolute bottom-1 right-1">Test Div</div>

    Like all arbitrary tailwind values, the values just fall through and are rendered out as a string that the browser can recognize. Currently, there is no intellisense for the colors in the Tailwind CSS Intellisense plugin, but the colors do display inline if valid:

    enter image description here

    The recommendation would be utilize the built-in colors but sometimes I throw down a bg-[aqua] or bg-[lime] etc. when trying to figure out m and p.