Spacing

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, .h-medium, .gap-large, or other possibilities.

If we like the existing scale but want more options, we use the extends option:

module.exports = {
  theme: {
    extend: {
      spacing: {
        '15': '60rem',
        '17': '76rem'
      }
    } 
  }
}

Other core plugins

Nearly every Tailwind utility has a series of suffixes off a base pattern. Most of them allow us to override or extend them the same way we do for spacing and colors.

Every core plug-in’s page in the Tailwind documentation explains how to modify that plug-in. Let’s look at an example:

module.exports = {
  theme: {
    extend: {
      zIndex: {
        "-1": "-1",
        "-5": "-5",
        "-1000": "-1000"
      } 
    }
  }
}

In this case, Tailwind generates the negative classes consistent with negative margins, so the negative classes here are .-z-1, .-z-5, and .-z-1000. If we want the complete set of z-index options, we don’t use extends:

module.exports = {
  theme: {
    zIndex: {
      "1": "1",
      "5": "5",
      "1000": "1000"
      "-1": "-1",
      "-5": "-5",
      "-1000": "-1000"
    } 
  }
}

We have .z-1, .z-5, and .z-100 alongside .-z-1, .-z-5, and .-z-1000, but the original classes are no longer generated. Every core plugin with multiple options allows for similar replacement or extension of the options. Again, the Tailwind documentation has the full listing.

In the following playground, we’ll customize the spacing by updating the Tailwind configuration file: