Bird
Raised Fist0
Tailwindmarkup~5 mins

Arbitrary color values in Tailwind

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Introduction

Arbitrary color values let you use any color you want in Tailwind CSS, not just the preset ones. This helps you match exact colors for your design.

You want a specific brand color that Tailwind doesn't have.
You need a unique background color for a special section.
You want to try a custom text color that fits your style.
You are designing a button with a color from a design tool.
You want to quickly test a new color without changing Tailwind config.
Syntax
Tailwind
class="bg-[#123abc] text-[#f0e68c] border-solid border-[2px] border-[#ff6347]"
Use square brackets [ ] to wrap your custom color value.
You can use hex codes (#123abc), rgb(), rgba(), hsl(), or any valid CSS color inside the brackets.
Examples
This sets a custom blue background color using a hex code.
Tailwind
<div class="bg-[#3490dc] p-4">Hello with blue background</div>
This uses rgb() color for the text.
Tailwind
<p class="text-[rgb(255,99,71)]">Tomato colored text</p>
This uses hsl() color for a bright green background.
Tailwind
<button class="bg-[hsl(120,100%,50%)] text-white p-2 rounded">Green button</button>
This uses rgba() for a half-transparent red border.
Tailwind
<div class="border-solid border-[3px] border-[rgba(255,0,0,0.5)] p-3">Semi-transparent red border</div>
Sample Program

This example shows a heading with a custom green text color, a paragraph with a custom dark red text color inside a light background box, and a button with a custom blue background that changes shade on hover.

Tailwind
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Arbitrary Color Values Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="flex flex-col items-center gap-6 p-6">
  <h1 class="text-[rgb(34,139,34)] text-3xl font-bold">Custom Green Text</h1>
  <div class="bg-[#ffdead] p-6 rounded shadow-md">
    <p class="text-[#8b0000]">This paragraph has a custom dark red text color.</p>
  </div>
  <button class="bg-[hsl(210,100%,50%)] text-white px-4 py-2 rounded hover:bg-[hsl(210,100%,40%)] transition">
    Custom Blue Button
  </button>
</body>
</html>
OutputSuccess
Important Notes

Always wrap your custom color value in square brackets to tell Tailwind it's an arbitrary value.

You can combine arbitrary colors with other Tailwind utilities like padding, margin, and rounded corners.

Use browser DevTools to inspect and tweak colors live for best results.

Summary

Arbitrary color values let you use any color by writing it inside square brackets.

You can use hex, rgb, rgba, hsl, or any valid CSS color format.

This helps you match exact colors without changing Tailwind's default settings.

Practice

(1/5)
1. What is the purpose of using arbitrary color values in Tailwind CSS?
bg-[#ff5733]
easy
A. To create animations with colors
B. To use any custom color not in Tailwind's default palette
C. To add shadows to elements
D. To change font sizes dynamically

Solution

  1. Step 1: Understand Tailwind's default colors

    Tailwind provides a set of default colors but sometimes you need a specific shade not included.

  2. Step 2: Use arbitrary color values

    By writing colors inside square brackets like bg-[#ff5733], you can use any valid CSS color.

  3. Final Answer:

    To use any custom color not in Tailwind's default palette -> Option B

  4. Quick Check:

    Arbitrary colors = custom colors [OK]
Hint: Square brackets let you add any color code directly [OK]
Common Mistakes:
  • Thinking arbitrary colors create animations
  • Confusing color usage with font size changes
  • Using arbitrary colors for shadows instead of colors
2. Which of the following is the correct syntax to set a background color to a semi-transparent red using arbitrary values in Tailwind CSS?
easy
A. bg-[rgba(255,0,0,0.5)]
B. bg-rgba(255,0,0,0.5)
C. bg-[rgb(255,0,0,0.5)]
D. bg-(rgba(255,0,0,0.5))

Solution

  1. Step 1: Check the correct use of square brackets

    Arbitrary values must be inside square brackets exactly, so bg-[...] is correct.

  2. Step 2: Validate the color function syntax

    The color function rgba(255,0,0,0.5) is valid CSS and correctly placed inside brackets.

  3. Final Answer:

    bg-[rgba(255,0,0,0.5)] -> Option A

  4. Quick Check:

    Correct brackets + valid rgba = bg-[rgba(255,0,0,0.5)] [OK]
Hint: Always wrap color values in square brackets for arbitrary colors [OK]
Common Mistakes:
  • Omitting square brackets
  • Using parentheses instead of brackets
  • Using rgb instead of rgba for transparency
3. What color will the text be if you use this Tailwind class?
text-[hsl(120,100%,50%)]
medium
A. Bright green
B. Bright red
C. Bright blue
D. Bright yellow

Solution

  1. Step 1: Understand HSL color values

    HSL stands for hue, saturation, and lightness. Hue 120° corresponds to green.

  2. Step 2: Analyze saturation and lightness

    100% saturation and 50% lightness means the color is bright and fully saturated green.

  3. Final Answer:

    Bright green -> Option A

  4. Quick Check:

    Hue 120° = green [OK]
Hint: Hue 120° in HSL means green color [OK]
Common Mistakes:
  • Confusing hue degrees with other colors
  • Ignoring saturation and lightness effects
  • Assuming default Tailwind colors instead of arbitrary
4. Identify the error in this Tailwind class:
bg-[#12345G]
medium
A. Missing square brackets
B. Wrong prefix, should be 'background-'
C. Invalid hex color code due to 'G'
D. Hex code too short

Solution

  1. Step 1: Check hex color validity

    Hex colors only allow digits 0-9 and letters A-F (case-insensitive). 'G' is invalid.

  2. Step 2: Confirm brackets and prefix

    Square brackets and prefix bg- are correct here.

  3. Final Answer:

    Invalid hex color code due to 'G' -> Option C

  4. Quick Check:

    Hex digits must be 0-9 or A-F [OK]
Hint: Hex colors only use 0-9 and A-F letters [OK]
Common Mistakes:
  • Ignoring invalid hex characters
  • Thinking brackets are missing
  • Confusing prefix names
5. You want a button with a background color that changes based on light or dark mode using arbitrary colors. Which Tailwind class combination is correct?
hard
A. bg-[rgb(255,255,255)] dark:bg-[rgb(300,300,300)]
B. bg-[rgb(255,255,255)] bg-dark:[rgb(30,30,30)]
C. bg-[rgb(255,255,255)] dark:bg(rgb(30,30,30))
D. bg-[rgb(255,255,255)] dark:bg-[rgb(30,30,30)]

Solution

  1. Step 1: Use correct dark mode prefix

    Tailwind uses dark: prefix to apply styles in dark mode.

  2. Step 2: Use correct arbitrary color syntax

    Colors must be inside square brackets with valid CSS color values.

  3. Step 3: Validate color values

    RGB values must be between 0 and 255; bg-[rgb(255,255,255)] dark:bg-[rgb(300,300,300)] has invalid 300 values.

  4. Final Answer:

    bg-[rgb(255,255,255)] dark:bg-[rgb(30,30,30)] -> Option D

  5. Quick Check:

    Correct dark: prefix + valid colors = bg-[rgb(255,255,255)] dark:bg-[rgb(30,30,30)] [OK]
Hint: Use dark: prefix and brackets for dark mode colors [OK]
Common Mistakes:
  • Using wrong dark mode prefix syntax
  • Omitting square brackets for arbitrary colors
  • Using invalid RGB values above 255