This article has been machine-translated from Chinese. The translation may contain inaccuracies or awkward phrasing. If in doubt, please refer to the original Chinese version.
A colleague suddenly mentioned in our group chat: “This new feature in Tailwind v3.3 is pretty nice — you can finally write font size and line height in a single class.” So I took a break to check out the Tailwind update. Without further ado, here’s the summary:
Tailwind CSS v3.3 was released on March 28, 2023. It’s a fantastic release that brings many new features and improvements, making our development more efficient and flexible. In this article, I’ll introduce some of the most exciting new features, including:
-
Extended color palette for darker darks: An extended color palette adding a deeper 950 shade for every color, now with 11 shades total, e.g.,
bg-slate-950 -
ESM and TypeScript support: Support for ESM and TypeScript configuration files, allowing you to configure Tailwind CSS with modern syntax and type checking.
-
Fine-tune gradient color stop positions: Allows you to precisely control gradient effects by specifying the exact position of each color stop in the gradient, such as
from-5%,via-35%, andto-85% -
Line-clamp out of the box: Truncate multi-line text without a plugin, e.g.,
line-clamp-3.We released our official line-clamp plugin over two years ago, and even though it uses a bunch of weird deprecated -webkit-* stuff, it works in every browser and it’s going to work forever, so we decided to bake it right into the framework itself.
-
New line-height shorthand for font-size utilities: This is very useful — you can set font size and line height with a single class (when not in the preset), e.g.,
text-lg/7,text-sm/[17px],text-[20px]/[24px] -
CSS variables without the var(): Shorthand syntax for CSS variables, allowing you to use arbitrary values without the var() function: before:
bg-[var(--brand-color)]after:bg-[--brand-color] -
Configurable font-variation-settings: Support for configuring font-variation-settings, letting you use font-* utilities to set font variations directly.
-
New list-style-image utilities: This is also very useful — want to use images as your list item markers? Now you can with the new
list-image-*utilities, e.g.,list-image-[url(carrot.png)] -
New hyphens utilities: For fine-tuning hyphenation behavior. Have you ever heard of the HTML entity? Neither had we before adding support for these hyphens-* utilities. With hyphens-manual and carefully placed , you can tell the browser where to insert hyphens when it needs to break a word across multiple lines.
-
New caption-side utilities: Utilities for controlling the alignment of caption elements within tables, allowing you to add captions to tables and set their position. See Caption Side for details.
caption-toppositions the caption element at the top of the tablecaption-bottompositions the caption element at the bottom of the table.
These are just some of the most notable new features. If you want to learn about more details and improvements, check out the full release notes. To upgrade to v3.3, simply install the latest tailwindcss package from npm:
npm install -D tailwindcss@latestYou can also try out all the new features online at Tailwind Play.
喜欢的话，留下你的评论吧～