What surprises does Tailwind CSS v3.3 bring us?

A colleague suddenly mentioned in the group chat at work: "Tailwind v3.3 has a new feature that's pretty good. Finally, we can write a class for line height and font size." So, I took a break and checked out the Tailwind update. Without further ado, here's a summary:

Tailwind CSS v3.3 was released on March 28, 2023. This is a fantastic version that brings us many new features and improvements, making our development more efficient and flexible. In this article, I will introduce some of the most exciting new features, including:

Extended color palette for darker darks: This extends the color palette for each color with a deeper 950 shade, resulting in 11 hues, e.g., bg-slate-950.

ESM and TypeScript support: This version supports ESM and TypeScript configuration files, allowing you to configure Tailwind CSS using modern syntax and type checking.
Fine-tune gradient color stop positions: This feature allows you to precisely control gradient effects by specifying the position of each color stop in the gradient, such as from-5%, via-35%, and to-85%.

Out-of-the-box line-clamp: You can now truncate multi-line text without plugins using the line-clamp-3 utility class.

We released our official line-clamp plugin over two years ago. Despite using a bunch of weird deprecated -webkit-* stuff, it works in all browsers and will continue to do so, so we decided to integrate it into the framework itself.

🌟Font size and line height shorthand: This is very useful as it allows you to set font size and line height with a single class when they are not in the default presets, such as text-lg/7, text-sm/[17px], and text-[20px]/[24px].

CSS variables without the var(): This version supports a shorthand syntax for CSS variables, allowing you to use arbitrary values without the need for the var() function. For example:
before: bg-[var(--brand-color)]
after: bg-[--brand-color]
Configurable font-variation-settings: This feature allows you to configure font-variation-settings, enabling you to directly use font-* utility classes to set font variations.
🌟New list-style-image utilities: This is also very useful if you want to use images as your list item markers. Now you can use the new list-image-* utilities. For example: list-image-[url(carrot.png)].

🌟New hyphens utilities: These utilities are used to fine-tune hyphenation behavior.

Have you heard of the HTML entity? We hadn't either before adding support for these hyphens-* utilities.

Using hyphens-manual and carefully placed , you can tell the browser where to insert hyphens when breaking words across multiple lines.

🌟New caption-side utilities: These utilities control the alignment of caption elements inside tables. You can add captions to tables and set their position. See Caption Side for more details.

caption-bottom positions the caption element at the bottom of the table.
caption-bottom positions the caption element at the top of the table.

These are just some of the most prominent new features. If you want to learn more details and improvements, please check out the complete release notes. To upgrade to version v3.3 as soon as possible, simply install the latest tailwindcss package from npm:

npm install -D tailwindcss@latest

You can also experience all the new features online on Tailwind Play.