Tailwindmarkup~30 mins

Square bracket notation for custom values in Tailwind - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Using Square Bracket Notation for Custom Values in Tailwind CSS

📖 Scenario: You are building a simple webpage section that needs a custom background color and custom padding size not available in the default Tailwind CSS palette.

🎯 Goal: Create a <div> element styled with Tailwind CSS using square bracket notation to apply a custom background color #4a90e2 and custom padding of 2.5rem.

📋 What You'll Learn

Create a <div> element with Tailwind CSS classes.

Use square bracket notation to set the background color to #4a90e2.

Use square bracket notation to set the padding to 2.5rem.

Add text inside the <div> that says 'Custom Styled Box'.

Ensure the code is valid HTML5 and uses Tailwind CSS classes correctly.

💡 Why This Matters

🌍 Real World

Web designers often need to use colors or sizes that are not included in the default Tailwind CSS palette. Square bracket notation lets them add these custom values easily without changing the Tailwind config.

💼 Career

Knowing how to use square bracket notation in Tailwind CSS helps frontend developers quickly apply custom styles, making their designs more flexible and unique while keeping code clean and maintainable.

Progress0 / 4 steps

Create the HTML skeleton with a <div>

Write the basic HTML structure with a <div> element containing the text Custom Styled Box inside the <body>.

Tailwind




    
    
    Custom Tailwind Box

Need a hint?

Use a <div> tag inside the <body> and write the text exactly as shown.

Add a custom background color using square bracket notation

Add a Tailwind CSS class to the <div> that sets the background color to #4a90e2 using square bracket notation. Use the class bg-[#4a90e2].

Tailwind




    
    
    Custom Tailwind Box
    


    
    Custom Styled Box

Need a hint?

Add the class bg-[#4a90e2] inside the class attribute of the <div>.

Add custom padding using square bracket notation

Add a Tailwind CSS class to the <div> that sets padding to 2.5rem using square bracket notation. Use the class p-[2.5rem] alongside the existing background color class.

Tailwind




    
    
    Custom Tailwind Box
    


    
    Custom Styled Box

Need a hint?

Add the class p-[2.5rem] next to bg-[#4a90e2] inside the class attribute.

Add text color for better contrast

Add a Tailwind CSS class to the <div> that sets the text color to white using the class text-white, along with the existing classes.

Tailwind




    
    
    Custom Tailwind Box
    


    
    Custom Styled Box

Need a hint?

Add the class text-white next to the other classes inside the class attribute.