Tailwind v1.3 Adds New Space and Divide Utilities

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.

Filed in: News / tailwind

Newsletter

Join 31,000+ others and never miss out on new tips, tutorials, and more.

Laravel News Partners

Laravel Jobs

Laravel Partner Seeks Team Lead / Developer
Remote
Kirschbaum Development Group, LLC
Engineering Director
Vancouver or remote (EST/PST preferred)
Engine Digital
Full-Stack Engineer
Vancouver or remote (EST/PST preferred)
Engine Digital
Sr. Software Engineer
Boca Raton - Florida, Remote - USA Only
Honorlock
Lead PHP Developer (€++)
Hoorn, The Netherlands
Portabase