Tailwindmarkup~30 mins

Custom spacing scale in Tailwind - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Custom Spacing Scale with Tailwind CSS

📖 Scenario: You are building a simple webpage layout using Tailwind CSS. You want to create a custom spacing scale to control the padding and margin sizes consistently across your page.

🎯 Goal: Create a Tailwind CSS configuration with a custom spacing scale. Then use the custom spacing classes to add padding and margin to a <div> element. The final page should show a centered box with the custom spacing applied.

📋 What You'll Learn

Create a Tailwind CSS config file with a custom spacing scale including values: 4: '1rem', 7: '1.75rem', 9: '2.25rem'

Use the custom spacing scale in the HTML by applying padding and margin classes

Center the box horizontally and vertically using flexbox utilities

Ensure the box has a visible background color and text to see spacing effect

💡 Why This Matters

🌍 Real World

Custom spacing scales let designers and developers keep consistent spacing in websites and apps, making layouts look neat and balanced.

💼 Career

Knowing how to customize Tailwind CSS config is useful for frontend developers to create unique designs and maintain scalable style systems.

Progress0 / 4 steps

Create Tailwind config with custom spacing scale

Create a tailwind.config.js file. Inside the theme.extend.spacing object, add these exact spacing values: 4: '1rem', 7: '1.75rem', and 9: '2.25rem'.

Tailwind

// Create tailwind.config.js with theme.extend.spacing
// Your code here

Need a hint?

Remember to export the config object with module.exports = {}. Put the custom spacing inside theme.extend.spacing.

Add HTML structure with a container div

Create an index.html file. Add a <div> with class container inside the <body>. This will hold the box you style later.

Tailwind




  
  
  Custom Spacing

Need a hint?

Make sure the <div> has the exact class container.

Add a box div with custom padding and margin classes

Inside the container div, add another <div> with classes bg-blue-500, p-7, and m-9. Add the text Custom Spacing Box inside this box.

Tailwind




  
  
  Custom Spacing

Need a hint?

Use the exact classes bg-blue-500 p-7 m-9 on the inner div and add the text inside.

Center the container using flexbox utilities

Add the classes flex, items-center, justify-center, and min-h-screen to the body tag to center the container horizontally and vertically.

Tailwind




  
  
  Custom Spacing
  


  
  
    Custom Spacing Box

Need a hint?

Apply all four classes exactly on the body tag to center content.