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.
New .space-x-* and .space-y-* utilities were added to make it easier to add consisten 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.
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 have been added to be used in combination with the rest of the transition-related classes added in v1.2.
A couple new display type classes have been introduced, .inline-grid and .flow-root.
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',
},
},
},
};These are just the highlights of the release. Check out the release notes on Github to view a full list of additions.