Tailwindmarkup~15 mins

Arbitrary color values in Tailwind - Mini Project: Build & Apply

Choose your learning style9 modes available

Using Arbitrary Color Values with Tailwind CSS

📖 Scenario: You are creating a simple webpage section that needs a custom background color and text color not included in Tailwind's default palette.

🎯 Goal: Build a <section> with a background color of #4a90e2 and text color of #f5a623 using Tailwind CSS arbitrary color values.

📋 What You'll Learn

Use Tailwind CSS arbitrary values for background and text colors

Create a <section> element with the specified colors

Include accessible semantic HTML

Make sure the text is readable on the background color

💡 Why This Matters

🌍 Real World

Web designers often need colors outside the default palette. Using arbitrary values lets you match brand colors exactly.

💼 Career

Knowing how to use Tailwind's arbitrary values helps you customize designs quickly and precisely in real projects.

Progress0 / 4 steps

Create the HTML skeleton with a <section>

Write the basic HTML structure with a <section> element containing the text Custom Colors Section inside the <body>.

Tailwind




  
  
  Arbitrary Colors
  


   with text 'Custom Colors Section' here -->

Need a hint?

Use a <section> tag inside the <body> with the exact text Custom Colors Section.

Add Tailwind classes for padding and font size

Add Tailwind CSS classes p-6 and text-lg to the <section> element to add padding and increase the font size.

Tailwind




  
  
  Arbitrary Colors
  


   
    Custom Colors Section

Need a hint?

Add the classes p-6 and text-lg inside the class attribute of the <section>.

Apply arbitrary background color using Tailwind

Add the Tailwind class bg-[#4a90e2] to the <section> element to set the background color to #4a90e2.

Tailwind




  
  
  Arbitrary Colors
  


   
    Custom Colors Section

Need a hint?

Use the class bg-[#4a90e2] exactly inside the class attribute.

Add arbitrary text color for contrast

Add the Tailwind class text-[#f5a623] to the <section> element to set the text color to #f5a623 for good contrast.

Tailwind




  
  
  Arbitrary Colors
  


   
    Custom Colors Section

Need a hint?

Add the class text-[#f5a623] inside the class attribute of the <section>.