Arbitrary color values in Tailwind - Cheat Sheet & Quick Revision

Recall & Review

beginner

What are arbitrary color values in Tailwind CSS?

Arbitrary color values let you use any color you want by writing it directly inside square brackets, like <code>bg-[#123abc]</code>. This means you are not limited to Tailwind's default colors.

beginner

How do you write a background color using an arbitrary hex color in Tailwind?

You write the class like this: <code>bg-[#ff6347]</code>. This sets the background color to the hex color #ff6347 (tomato red).

intermediate

Can you use arbitrary color values with opacity in Tailwind CSS? How?

Yes! You can add opacity by using RGBA or HSLA colors inside the brackets, for example: bg-[rgba(255,99,71,0.5)] sets a semi-transparent tomato background.

beginner

Why might you choose arbitrary color values over Tailwind's default palette?

Sometimes you need a very specific color that Tailwind does not include. Arbitrary values let you use any color code you want without changing Tailwind's config.

beginner

What is the correct syntax to use an arbitrary color value for text color in Tailwind?

Use text-[color] with your color inside brackets. For example, text-[#4caf50] sets the text color to a green shade.

How do you apply a custom background color #1a2b3c using Tailwind's arbitrary value syntax?

A bg-[#1a2b3c]

B bg-#1a2b3c

C background-[#1a2b3c]

D bg{#1a2b3c}

The correct syntax uses square brackets around the color: bg-[#1a2b3c].

Which of these is a valid way to set semi-transparent red background using arbitrary values?

A bg-rgba(255,0,0,0.5)

B bg-[rgba(255,0,0,0.5)]

C bg-[#ff000080]

D bg-opacity-50-red

You must put the entire rgba color inside brackets: bg-[rgba(255,0,0,0.5)].

Why use arbitrary color values in Tailwind CSS?

A To use colors outside the default palette

B To write CSS without classes

C To disable Tailwind colors

D To create animations

Arbitrary values let you use any color, not just Tailwind's built-in ones.

Which is the correct class to set text color to #123abc in Tailwind?

A color-#123abc

B text-#123abc

C text-[#123abc]

D text{#123abc}

Use square brackets for arbitrary colors: text-[#123abc].

Can you use named CSS colors like 'rebeccapurple' as arbitrary values in Tailwind?

A Only if configured in Tailwind config

B No, only hex colors allowed

C Only with RGB values

D Yes, like bg-[rebeccapurple]

You can use any valid CSS color inside brackets, including named colors.

Explain how to use arbitrary color values in Tailwind CSS and why they are useful.

Think about how you can write any color code inside Tailwind classes.

Describe how to set a semi-transparent background color using arbitrary values in Tailwind.

Remember opacity can be included in rgba or hsla colors.