Tailwind CSS v3.3 is here, with a bunch of new features people have been asking for and a bunch of new things you didn’t even know you wanted.
- Expanded shadow palette: New 950 darker shades for each color.
- ESM and TypeScript support: Write your configuration file using ESM or TypeScript.
- Simplified RTL support with logical properties: create layouts that adjust in different directions.
- Fine-tune color stop positions for gradients: Specify the exact position of each color stop.
- Out-of-Box Line Appending: Truncate text across multiple lines without a plugin.
- New line height modifier: Set your font size and line height with a class.
- CSS variables without var(): New abbreviated syntax for arbitrary values.
- Configurable Font Variation Settings: Built directly into the Font* utilities.
- New List Style Image Utilities: How To Use Horrible Bullet Point Clipart Images.
- New Hyphen Utilities: To fine-tune the behavior of hyphens.
- New Labeling Utilities: Label your spreadsheets with style.
That covers the most exciting things, but check out the release notes for a comprehensive list of all the small improvements we’ve made since the last release.
Updating your projects is as easy as installing the latest version of tailwindcss from npm:
npm install -D tailwindcss@latest
You can also try all of Tailwind Play’s new features right in your browser.
Exciting color palette for dark tones
One of the most common requests we’ve had over the years has been to add darker shades for each color – usually because someone is creating a dark UI and just wants more options in that dark part of the spectrum.
That wish has been granted – in Tailwind CSS v3.3 we added a new nuance”950“For every color.
In shades of grey, they look like a tinted black, which is ideal for very dark user interfaces:
In the rest of the color spectrum we have optimized the hue “950” for high-contrast text and tinted control backgrounds:
Believe it or not, the hardest part of this project was convincing us to accept 11 shades per color. Trying to make this beautiful in the colormap documentation was a nightmare.
ESM and TypeScript support
You can now configure Tailwind CSS in ESM or even in TypeScript:
1 | /** @type {import(‘tailwindcss’).Config} */ export default { content: []Theme: {extend: {}, }, Plugins: []} |
When you run npx tailwindcss init we will detect if your project is an ESM module and automatically generate your configuration file with the correct syntax.
You can also explicitly generate an ESM configuration file with the –esm option:
npx tailwindcss init –esm
To generate a TypeScript configuration file, use the –ts option: npx tailwindcss init –ts
A lot of people think it’s easy because they’re already writing their own code in ESM (even if it’s transpiled by their build tool), but it’s actually quite difficult – we literally have to transpile the file from the config so that you they steal.
It’s a bit easier to understand why this needs to happen if you think of the TypeScript case, since Tailwind is of course distributed as JavaScript and can’t magically import an uncompiled TypeScript file.
We can do that with the wonderful library jiti under the hood and we use Sugar to transpile code with the best possible performance while keeping installation space small.
Simplified RTL support with logical properties
It’s been possible to style multidirectional websites with our LTR and RTL variants for a while, but now you can use logical properties to perform most of these styling operations more easily and automatically.
New utilities like ms-3 and me-3 allow you to set the beginning and end of an element so that your styles automatically adapt to RTL instead of writing code like ltr:ml-3 rtl:mr-3 :
1 |  … … |
We’ve added new logical property utilities for inset, margin, padding, border radius, scroll margin, and scroll padding.
Here’s a full list of all the new utilities we’ve added and what they do:
These utilities should save you a lot of code if you regularly build websites that need to support LTR and RTL, and you can always combine them with the ltr and rtl variants if you need more control.
Adjusted position of color stops in gradients
We’ve added new utilities like from-5%, via-35%, and to-85% that allow you to adjust the actual position of each color stop in your gradients:
1 |
We’ve included all values from 0% to 100% in increments of 5, but of course you can use any values to get exactly the effect you want:
1 |
Cord clamp ready to use
We released our official line clamp plugin a little over two years ago and although it uses a lot of weird deprecated -webkit-* stuff, it works and always will work in all browsers, so we decided to put it in the Framework to integrate yourself.
1 | Increase your conversion rateIllo sint voluptas. Error voluptates culpa eligendi. Hic vel totam vitae illo. Non aliquid explicabo necessitatibus unde. Sed exercitationem placeat consectetur nulla deserunt vel iusto corrupti dicta laboris incident. Lindsey Walton
|
So if you update to 3.3, you can safely remove the line clamp plugin if you used it:
1 | module.exports = { // … Plugins: [
require(‘@tailwindcss/line-clamp’) ]} |
New abbreviation for line height for font size utilities
One thing we’ve found over the years while designing great things with Tailwind is that we never set the thickness of a line without also setting the font size.
So, inspired by our syntax for changing the opacity of colors, we decided to save some characters by adjusting them at the same time with a single utility:
1 | So I started going in the water. I won’t lie to you guys, I was scared. But I kept going, and as I passed the surf a strange calm came over me. I don’t know if it was divine intervention or the kinship of all living beings, but I’ll tell you, Jerry, in that moment I was marine biologist. |
You can use any value defined in your leading scale, or use any values if you need to deviate from your design tokens:
CSS variables without var()
To reduce typing, we also made it possible to omit var() when using a CSS variable as an arbitrary value:
1 | export function MyComponent({ company }) { return ( ) } |
This is a pretty cool trick for using things like hover: with styles coming from the database or something.
Configure font variation settings for custom font families
When using custom fonts, you often want to configure things like font feature settings or font variation settings to opt for specific modifications offered by the font.
We’ve made this easier for font feature settings for a while, but now you can do the same with font variation settings by assigning it a value in some sort of options object that you can place after the list of fonts in your Configuration file:
1 | module.exports = { theme: { fontFamily: { sans: [
‘Inter var, sans-serif’, { fontFeatureSettings: ‘”cv11″, “ss01″‘, fontVariationSettings: ‘”opsz” 32’, }, ]}, }, } |
In the above example we are using a newer version of Inter This allows the optical size axis to be used to trigger the “display” variant of the font, which is optimized for large sizes like titles.
New list-style image utilities
Ever wanted to use a picture of a carrot to mark an entry in your list? This is now possible thanks to the new list-image-* utilities.
1 |
|
We don’t start shipping plant cliparts with the framework, but you can use any image, either as an arbitrary value or by setting it in the listStyleImage section of your theme.
New utilities for hyphens
Have you ever heard of the & shy;* HTML entity? Neither will I until we add support for those dash* utilities.
Using hyphens-manually and a & shy; carefully placed, you can tell the browser where to insert a hyphen when it needs to break a multiline word:
1 | … Motor vehicle liability insurance is a … |
New Legend Side Utilities
Another novelty for me: this
1 |
On Tailwind CSS v3.3! No drastic changes, just a bunch of fun new stuff. Try it out in your projects today by upgrading to the latest version with npm: npm install -D tailwindcss@latest Source: Tailwind CSS And you ?
See also
|
What do you think of Tailwind’s CSS improvements?