Tailwind v1.1

Published on by

Tailwind v1.1 image

Tailwind v1.1 has been released with some cool new features and a couple of bug fixes. This is the first feature release since the Tailwind v1.0 release, so let’s dig into some of the updates.

Screenreader utilities were added

The sr-only and not-sr-only classes were added to make it easier to make your websites accessible. These utilities can be used to hide elements visually, but still accessible to screenreaders. The focus and responsive variants of these utilities are generated by default, but you can customize those in your config file as needed.

Placeholder utilities were added

There are new utilities that allow you to customize the color of placeholder text on your inputs. To use the placeholder utilities, add a placeholder-{color} class to your inputs, replacing {color} with one of the colors from your Tailwind config.

<input class="text-gray-900 placeholder-gray-500 ...">

First, last, even, and odd variants were added

first, last, even, and odd variants were added to help target elements that are generated in a loop. They’ll be very helpful when dealing with tables in Tailwind. For more details on how these work, see the release notes.

Disabled and visited variants were added

A disabled variant has been added to help style disabled buttons and form elements without writing custom CSS. A similar visited variant has been added to help style links that have been visited by the user.

Increased specificity when using important

Previously, Tailwind offered an important option in the config file that would add !important to all generated utilities. This could cause some issues with third-party libraries that add inline styles, so now the important option has more flexibility. Instead of passing true to just enable the option, you can pass a CSS selector (something like #app) and the generated classes will be scoped to that selector instead having the !important flag appended. This will make it so your Tailwind classes have more specificity than normal, but they won’t override inline styles.

/* Before */
.block {
display: block !important;
}
 
/* After */
#app .block {
display: block;
}

Conclusion

In addition to the features mentioned here, there were several more added, as well as a few bug fixes that I didn’t mention. I highly recommend taking a look at the release notes over on the repo to see all the details about the release, including more code examples.

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
Paragraph

Manage your Laravel app as if it was a CMS – edit any text on any page or in any email without touching Blade or language files.

Visit Paragraph
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 VILT and TALL 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 →
Microsoft Clarity Integration for Laravel image

Microsoft Clarity Integration for Laravel

Read article
Apply Dynamic Filters to Eloquent Models with the Filterable Package image

Apply Dynamic Filters to Eloquent Models with the Filterable Package

Read article
Property Hooks Get Closer to Becoming a Reality in PHP 8.4 image

Property Hooks Get Closer to Becoming a Reality in PHP 8.4

Read article
Asserting Exceptions in Laravel Tests image

Asserting Exceptions in Laravel Tests

Read article
Reversible Form Prompts and a New Exceptions Facade in Laravel 11.4 image

Reversible Form Prompts and a New Exceptions Facade in Laravel 11.4

Read article
Basset is an alternative way to load CSS & JS assets image

Basset is an alternative way to load CSS & JS assets

Read article