Tailwind v1.3 Adds New Space and Divide Utilities

Published on

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:

 1// tailwind.config.js
 2module.exports = {
 3  theme: {
 4    container: {
 5      padding: {
 6        default: '1rem',
 7        sm: '2rem',
 8        lg: '4rem',
 9        xl: '5rem',
10      },
11    },
12  },
13};

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.