Upcoming Tailwind CSS 1.2.0 Includes Grid Support and New Utilities

Adam Wathan, creator of the Tailwind CSS, published the early release notes for the upcoming version 1.2.0 update to the framework. The new version will include the much-anticipated support for CSS grids and several other useful features for app and website designers. There are no planned breaking changes with the update.

Tailwind CSS is a utility-first CSS framework that is quickly gaining support from designers and developers. Some WordPress themes are starting to pop up in the public sphere that use it, but is more often used as part of the in-house toolset at agencies, in which standards are necessary to keep teams on the same page.

For developers already using the framework, they can look for an update within days. “Right now I don’t have any changes to these features planned, so as long as nobody finds any huge issues I’ll tag the real v1.2.0 next week once I get some documentation together,” said Wathan on Twitter.

Now is a good time for new developers to start tinkering with the CSS framework. With the addition of new CSS grid classes, there is little that is not possible for the majority of use cases.

I have been building with Tailwind, or a subset of its classes, for about a year now. Aside from highly-custom scenarios, I have been able to build most projects while writing little CSS code. For someone who comes primarily from a developer background, it has been a godsend for quickly putting together complex layouts. CSS grid support was the big item I had been waiting for. I had already built a custom grid system based on Tailwind’s naming scheme. My implementation is nearly the same as what is shipping in Tailwind CSS 1.2.0.

Other new features include classes for CSS features such as:

transition

transform

stroke-width

box-sizing

clear

Version 1.2.0 adds extra utility classes for rounded corners and shadow sizes. It also extends its support for setting an element’s maximum width. New utility classes were added for removing a max-width and setting it based on predefined breakpoints.

The Inter font now sits at the top of the font stack and will be used if installed on the user’s system or if the developer loads it on the site. Inter is a popular font created specifically for computer screens. It comes in both fixed and variable options. The Twenty Twenty theme released with WordPress 5.3 uses the variable version of Inter for several elements within its design.

For developers who are extending Tailwind CSS, they now have a new plugin API for building custom plugins. Plugins can also extend the user’s configuration file.

Overall, it looks like it will be a solid update. I am excited about digging into it and using some of the new utility classes.