Search⌘ K
AI Features
Home
Courses
Understanding the Basics of Tailwind CSS

Customizing Tailwind’s Spacing Utilities

Explore how to customize Tailwind CSS spacing utilities by adding or overriding default classes for precise control. Understand core plugin customization through examples like modifying blur filter variations for smoother transitions and better visual effects.

We'll cover the following...

In this lesson, we’ll explore how we can customize Tailwind’s spacing utilities by customizing the core plugins.

Adding spacing utilities

Tailwind has a rich set of spacing utilities, but sometimes we might need a bit more precision. In that situation, we can add the needed utilities again in two ways.

One, we can just discard the Tailwind utilities and replace them with our own.

Javascript (babel-node)
module.exports = {
  theme: {
    spacing: {
      sm: '8px',
      md: '12px',
      lg: '16px',
      xl: '24px',
    } 
  }
}

Here, we’ve overridden Tailwind’s default spacing utilities ...