What’s New in Tailwind CSS V2.0?
Tailwind CSS is a utility-first framework. In contrast to other CSS frameworks like Bootstrap or Materialize CSS, it doesn’t come with pre-defined components. Instead, Tailwind CSS operates on a lower level and provides you with a set of CSS helper classes. By using these classes, you can rapidly create a custom design with ease.
In short, Tailwind CSS is a great way to keep your CSS style sheet lean.
Almost exactly 18 months ago, Tailwind CSS v1.0 was released. This version clearly signaled a commitment to stability while continuing to push the boundaries with exciting additional features in every minor release. Over the course of those 18 months’ nine minor versions were released. These versions added features like placeholder styling, screen reader visibility, CSS grid, transitions, transformations, animations, layout utilities, integrated tree-shaking, gradients, and many more.
All this led up to the release of the brand new TailwindCSS v2.0, which marks the first major update ever.
Updated Features in Tailwind CSS v2.0
- Extended color palette
The new color palette includes 22 colors which was 10 in the last version, with 10 shades each with an extra light shade.
- Extra-wide 2XL breakpoint
V2.0 added a new 2xl breakpoint out-of-the-box that lets you target things at 1536px and above.
- Default line-heights per font-size
Now every font-size has its own line-height specified by default
- Extended spacing, typography, and opacity scales
For fine-tuning things at the micro-level, making an even bigger impact with huge headlines, and for when opacity-25 wasn’t enough and opacity-50 was too much. Now you can be more specific when defining margin, padding, font-size, or opacity.
- @apply
@apply now works with anything, including responsive, hover, focus, and other variants. If you have a certain pattern in CSS class, instead of writing it all over again, @apply can be used to list those classes and use them directly.
- Group-hover and focus-within are now enabled by default
This is useful if you want to highlight a whole container if a button inside of it is in focus, or change the text color of all children if you hover over a parent div container.
- Default CSS transition
Predefine your CSS transition duration and easing and then only apply one class. You only have to add 17 classes to make a button instead of 19.
- Dropped IE11 support
It has allowed CSS custom properties to be fully embraced for all sorts of features. It’s what makes things like the new ring utilities even possible. The good news is that if you need to support IE11, you can always use Tailwind CSS v1.9, which is still an amazingly productive framework.
Additional Features
- Dark mode support
It is now easy to enable dark mode and use dark variant, making it easier than ever to dynamically change your design when dark mode is enabled.
- Outline ring utilities
Better-looking outlines for buttons and inputs. The ring utilities work a lot like the border utilities, except they add a solid box-shadow rather than a border so they don’t affect the layout.
- @tailwindcss/forms
Official plugin to help you style forms using utility classes (live demo). Alongside Tailwind CSS v2.0, a brand-new official plugin called @tailwindcss/forms is released that normalizes and resets all the basic form controls across browsers to a state that is super easy to style with pure utility classes.
- Text overflow utilities
More options to control text-overflow. Until v2.0, if you wanted to control overflowing text all it had was the fairly heavy-handed ‘truncate’ utility. Now newly added dedicated overflow-ellipsis and overflow-clip utilities control just the text-overflow property, in case you wanted to add ellipsis to overflowing text without restricting that text to one line.
- Extend variants
Now you can just extend variants instead of defining all of them. Basically it means that before you have to list down all the elements if you want to add a new element. Now, just extend the one you want.
So that’s quite a long list of updated and new features, that I am sure everyone is excited to try on their projects. There you have it, that’s Tailwind CSS v2.0 in a nutshell!
