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
Laravel News Partners

Laravel Jobs

Senior Full Stack Engineer - Laravel
Remote
Givebutter
Laravel partner seeks Lead Developer
Remote
Kirschbaum Development Group
Senior Programmer **Immediate Opening** (send resume to daniel@sbgcorp.com)
Remote
SBG Corp
Web Developer - Laravel
Grand Forks, North Dakota
Center for Rural Health
Senior Full-Stack Laravel Developer
Berlin, Germany
felmo.de

Newsletter

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