Tailwind v1.3 Adds New Space and Divide Utilities

Tailwind v1.3 was tagged this week with some really helpful additions. Space and divider utilities, inline-grid and flow-root utilities, transition-delay utilities, and more flexible container customization are just some of the new classes introduced in this update.

#Space Utilities

New .space-x-* and .space-y-* utilities were added to make it easier to add consistent spacing between all children of an element. Previously, you’d have to add a class like .ml-4 to every child except the first. Now, you can just add .space-x-4 to the wrapper element, and Tailwind will handle the rest.

#Divide Utilities

New .divide-x-*, .divide-y-*, .divide-{color} utilities were added to make it easier to add borders between elements, but excluding the outside edges.

#Transition Delay Utilities

Transition delay utilities have been added to be used in combination with the rest of the transition-related classes added in v1.2.

#Inline-grid and Flow-root

A couple of new display type classes have been introduced, .inline-grid and .flow-root.

#Container Customization

The container configuration has been updated to support a different padding amount for each breakpoint using the following syntax:

// tailwind.config.js
module.exports = {
  theme: {
    container: {
      padding: {
        default: '1rem',
        sm: '2rem',
        lg: '4rem',
        xl: '5rem',
      },
    },
  },
};

#Release Notes and Documentation

These are just the highlights of the release. Check out the release notes on Github to view a full list of additions.