Tailwind Connect - New Features and Tips

Here at Steadfast Collective, we are big proponents of the Tailwind library. 

In their own words, Tailwind is a "utility-first CSS framework", which means that it prioritises the creation and management of website styles through a comprehensive set of pre-built utility classes. These classes offer a fine-grained approach to styling, allowing developers to quickly apply specific styles to elements without the need to write custom CSS from scratch.

By leveraging these utilities, developers can efficiently design responsive and visually appealing interfaces while maintaining a streamlined and maintainable codebase. The difference it’s made in our day-to-day development lives cannot be overstated.

Not too long ago they held their first ever in-person event - 'Tailwind Connect' - during which they held a keynote. I thought it would be worth highlighting some of the awesome new features and tips that were announced!

The Accent Class:

When creating a frontend, a continual sticking point most have run into is native elements. Checkboxes, selects, etc. We want to give our client an app that really reflects their brand - but giving these elements custom styling can be an absolute nightmare. Enter: the accent class.

The accent class allows us to pass a colour into an input label, and the custom styling over the native input is handled for us. Including the hover, and active states.

Here’s a nice example:

See the Pen Tailwind - Accent Class by Alex Turner (@Alex-Turner-the-sans) on CodePen.

Group Has:

Now you want to style a form - based on the state of an input. Problem - CSS has no way of checking the state of a child input…right?

Introducing the ‘has’ tag. Now you can check for the style of any child dev - and style a parent based on its presence.

See my demo here:

See the Pen Taiwind - Has Styling by Alex Turner (@Alex-Turner-the-sans) on CodePen.

Unified toolchain:

In the very near future, instead of having to have a separate CSS preprocessor (such as postcss) for things like @import or vendor prefixing, all of this will be handled by a Tailwind.

This removes the need for extra dependencies and makes compiling even faster. All thanks to their new engine, ‘Oxide’.

It’s touted that this new engine will even double compile speeds. For more info see here.