Tailwindmarkup~30 mins

Why arbitrary values exist in Tailwind - See It in Action

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Understanding Why Arbitrary Values Exist in Tailwind CSS

📖 Scenario: You are building a simple webpage where you want to style a box with a custom width and background color that are not part of Tailwind's default options.

🎯 Goal: Create a box using Tailwind CSS that uses arbitrary values for width and background color to demonstrate how you can customize styles beyond the default Tailwind classes.

📋 What You'll Learn

Use Tailwind CSS to style a <div> element

Set the width of the box to exactly 18rem using an arbitrary value

Set the background color of the box to exactly #4a90e2 using an arbitrary value

Add some padding and rounded corners using standard Tailwind classes

Ensure the box is centered horizontally on the page

💡 Why This Matters

🌍 Real World

Web developers often need to apply styles that are not included in Tailwind's default set. Arbitrary values let them do this quickly without writing custom CSS.

💼 Career

Knowing how to use arbitrary values in Tailwind CSS is valuable for frontend developers to create unique designs while keeping code clean and maintainable.

Progress0 / 4 steps

Create the HTML structure with a <div> box

Write the basic HTML skeleton with a <div> element that will be styled later. The <div> should have a class box.

Tailwind




  
  
  Arbitrary Values Example

Need a hint?

Start with a simple HTML page and add a <div> with class box inside the <body>.

Add a config variable for the box width using an arbitrary value

Add the Tailwind class w-[18rem] to the <div> with class box to set its width to exactly 18rem.

Tailwind




  
  
  Arbitrary Values Example

Need a hint?

Use the square bracket syntax w-[18rem] to set a custom width in Tailwind.

Add an arbitrary background color using Tailwind

Add the Tailwind class bg-[#4a90e2] to the <div> with class box w-[18rem] to set its background color to exactly #4a90e2.

Tailwind




  
  
  Arbitrary Values Example

Need a hint?

Use the square bracket syntax bg-[#4a90e2] to set a custom background color in Tailwind.

Add padding, rounded corners, and center the box horizontally

Add the Tailwind classes p-6, rounded-lg, and mx-auto to the <div> with class box w-[18rem] bg-[#4a90e2] to add padding, rounded corners, and center it horizontally on the page.

Tailwind




  
  
  Arbitrary Values Example

Need a hint?

Add padding with p-6, rounded corners with rounded-lg, and center horizontally with mx-auto.