Tailwind v1.3 Adds New Space and Divide Utilities

Published on by

Tailwind v1.3 Adds New Space and Divide Utilities image

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.

Jason Beggs photo

TALL stack (Tailwind CSS, Alpine.js, Laravel, and Livewire) consultant and owner of roasted.dev.

Cube

Laravel Newsletter

Join 40k+ other developers and never miss out on new tips, tutorials, and more.

image
Tinkerwell

Version 4 of Tinkerwell is available now. Get the most popular PHP scratchpad with all its new features and simplify your development workflow today.

Visit Tinkerwell
Laravel Forge logo

Laravel Forge

Easily create and manage your servers and deploy your Laravel applications in seconds.

Laravel Forge
Tinkerwell logo

Tinkerwell

The must-have code runner for Laravel developers. Tinker with AI, autocompletion and instant feedback on local and production environments.

Tinkerwell
No Compromises logo

No Compromises

Joel and Aaron, the two seasoned devs from the No Compromises podcast, are now available to hire for your Laravel project. ⬧ Flat rate of $7500/mo. ⬧ No lengthy sales process. ⬧ No contracts. ⬧ 100% money back guarantee.

No Compromises
Kirschbaum logo

Kirschbaum

Providing innovation and stability to ensure your web application succeeds.

Kirschbaum
Shift logo

Shift

Running an old Laravel version? Instant, automated Laravel upgrades and code modernization to keep your applications fresh.

Shift
Bacancy logo

Bacancy

Supercharge your project with a seasoned Laravel developer with 4-6 years of experience for just $2500/month. Get 160 hours of dedicated expertise & a risk-free 15-day trial. Schedule a call now!

Bacancy
Lucky Media logo

Lucky Media

Bespoke software solutions built for your business. We ♥ Laravel

Lucky Media
Lunar: Laravel E-Commerce logo

Lunar: Laravel E-Commerce

E-Commerce for Laravel. An open-source package that brings the power of modern headless e-commerce functionality to Laravel.

Lunar: Laravel E-Commerce
LaraJobs logo

LaraJobs

The official Laravel job board

LaraJobs
Larafast: Laravel SaaS Starter Kit logo

Larafast: Laravel SaaS Starter Kit

Larafast is a Laravel SaaS Starter Kit with ready-to-go features for Payments, Auth, Admin, Blog, SEO, and beautiful themes. Available with Vue and Livewire stacks.

Larafast: Laravel SaaS Starter Kit
SaaSykit: Laravel SaaS Starter Kit logo

SaaSykit: Laravel SaaS Starter Kit

SaaSykit is a Laravel SaaS Starter Kit that comes with all features required to run a modern SaaS. Payments, Beautiful Checkout, Admin Panel, User dashboard, Auth, Ready Components, Stats, Blog, Docs and more.

SaaSykit: Laravel SaaS Starter Kit
Rector logo

Rector

Your partner for seamless Laravel upgrades, cutting costs, and accelerating innovation for successful companies

Rector

The latest

View all →
New Proposed Array Find Functions in PHP 8.4 image

New Proposed Array Find Functions in PHP 8.4

Read article
Laracon AU 2024 tickets are now on sale image

Laracon AU 2024 tickets are now on sale

Read article
Dash UI is a Laravel Blade Component Library Inspired by Shopify Polaris image

Dash UI is a Laravel Blade Component Library Inspired by Shopify Polaris

Read article
A Look at What's Coming to PHP 8.4 image

A Look at What's Coming to PHP 8.4

Read article
Is class instantiation without extra parenthesis coming to PHP 8.4? image

Is class instantiation without extra parenthesis coming to PHP 8.4?

Read article
Validation Errors Card for Laravel Pulse image

Validation Errors Card for Laravel Pulse

Read article