Search⌘ K
AI Features
Home
Courses
Modern CSS with Tailwind

Spacing

Explore how to customize spacing in Tailwind CSS by overriding or extending the spacing scale in the configuration file. Learn to apply new spacing values for padding, margins, width, height, and other utilities. Understand how similar customization works with other core plugins to tailor your design system.

We'll cover the following...

Spacing used

We can use theme#spacing or theme#extend#spacing to override properties, such as padding, margins, width, height, and more. We replace the spacing, as shown below:

module.exports = {
  theme: {
    spacing: {
      'small': 4px,
      'medium': 12px,
      'large': 36px
    } 
  }
}

These new suffixes will apply anywhere the spacing goes. Therefore, we now have .p-small, ...