Tailwind CSS v3.3: Prolonged colour palette, ESM/TS help, logical properties, and extra

Tailwind CSS v3.3 is right here — bringing a bunch of recent options folks have been asking for eternally, and a bunch of recent stuff you didn’t even know you wished.

That covers essentially the most thrilling stuff, however try the release notes for an exhaustive record of each single little enchancment we’ve made because the final launch.

Upgrading your initiatives is as straightforward as putting in the newest model of tailwindcss from npm:

npm set up -D tailwindcss@newest

You too can check out all the new options on Tailwind Play, proper in your browser.

Prolonged colour palette for darker darks

One of the crucial frequent characteristic requests we’ve had over time is so as to add darker shades for each colour — normally as a result of somebody is constructing a darkish UI and simply needs extra choices down in that darkish finish of the spectrum.

Properly want granted — in Tailwind CSS v3.3 we’ve added a brand new 950 shade for each single colour.

Within the grays they act as principally a tinted black, which is nice for extremely darkish UIs:

And in the remainder of the colour spectrum we optimized 950 for top distinction textual content and tinted management backgrounds:

Consider it or not the toughest half about this challenge was convincing ourselves to be okay with having 11 shades per colour. Making an attempt to make that look good within the color palette documentation was a nightmare.

Additionally pour one out for the 50 shades of grey jokes we used to have the ability to make.

ESM and TypeScript help

Now you’ll be able to configure Tailwind CSS in ESM, and even in TypeScript:

export default {
  content material: [],
  theme: {
    lengthen: {},
  },
  plugins: [],
}

import sort { Config } from 'tailwindcss'

export default {
  content material: [],
  theme: {
    lengthen: {},
  },
  plugins: [],
} satisfies Config

If you run npx tailwindcss init, we’ll detect in case your challenge is an ES Module and robotically generate your config file with the best syntax.

You too can generate an ESM config file explicitly by utilizing the --esm flag:

npx tailwindcss init --esm

To generate a TypeScript config file, use the --ts flag:

npx tailwindcss init --ts

Lots of people assume that is straightforward as a result of they’re writing their very own code in ESM already (even when it’s being transpiled by their construct software) but it surely’s truly fairly difficult — we actually must transpile the config file for you on the fly.

It’s a bit simpler to grasp why this has to occur whenever you consider the TypeScript case, due to course Tailwind is distributed as JavaScript, and it could actually’t magically import an uncompiled TypeScript file.

We’re dealing with this with the fantastic jiti library below the hood, and utilizing Sucrase to transpile the code with the very best efficiency whereas conserving the set up footprint small.

Simplified RTL help with logical properties

We’ve made it attainable to type multi-directional web sites utilizing our LTR and RTL variants for some time, however now you should use logical properties to do most of this styling extra simply and robotically.

Utilizing new utilities like ms-3 and me-3, you’ll be able to type the begin and finish of a component in order that your types robotically adapt in RTL, as an alternative of writing code like ltr:ml-3 rtl:mr-3:

Left-to-right

Tom Cook dinner

Director of Operations

Proper-to-left

تامر كرم

الرئيس التنفيذي

<div class="group flex items-center">
  <img class="shrink-0 h-12 w-12 rounded-full" src="..." alt="" />
  <div class="ltr:ml-3 rtl:mr-3">
  <div class="ms-3">
    <p class="text-sm font-medium text-slate-700 group-hover:text-slate-900">...</p>
    <p class="text-sm font-medium text-slate-500 group-hover:text-slate-700">...</p>
  </div>
</div>
<div class="group flex items-center">
  <img class="shrink-0 h-12 w-12 rounded-full" src="..." alt="" />
  <div class="ltr:ml-3 rtl:mr-3">
  <div class="ms-3">
    <p class="text-sm font-medium text-slate-300 group-hover:text-white">...</p>
    <p class="text-sm font-medium text-slate-500 group-hover:text-slate-300">...</p>
  </div>
</div>

We’ve added new logical property utilities for inset, margin, padding, border-radius, scroll-margin, and scroll-padding.

Right here’s a full record of all the new utilities we’ve added and what they map to:

These ought to prevent a ton of code should you frequently construct websites that have to help each LTR and RTL languages, and you’ll all the time mix these with the ltr and rtl variants whenever you want extra management.

Tremendous-tune gradient colour cease positions

We’ve added new utilities like from-5%, via-35%, and to-85% that allow you to regulate the precise place of every colour cease in your gradients:

<div class="bg-gradient-to-r from-indigo-500 from-10% via-purple-500 via-30% to-pink-500 to-90% ...">
  
</div>

We’ve included each worth from 0% to 100% in steps of 5 out of the field, however you’ll be able to in fact use arbitrary values to get precisely the impact you need:

<div class="bg-gradient-to-r from-cyan-400 from-[21.56%] ...">
  
</div>

For extra particulars, try the gradient color stops documentation.

Line-clamp out of the field

We launched our official line-clamp plugin simply over two years in the past and regardless that it makes use of a bunch of bizarre deprecated -webkit-* stuff, it really works in each browser and it’s going to work eternally, so we determined to only bake it into the framework itself.

Mar 10, 2020

Increase your conversion charge

Nulla dolor velit adipisicing duis excepteur esse in duis nostrud occaecat mollit incididunt deserunt sunt. Ut ut sunt laborum ex occaecat eu tempor labore enim adipisicing minim advert. Est in quis eu dolore occaecat excepteur fugiat dolore nisi aliqua fugiat enim ut cillum. Labore enim duis nostrud eu. Est ut eiusmod consequat irure quis deserunt ex. Enim laboris dolor magna pariatur. Dolor et advert sint voluptate sunt elit mollit officia advert enim sit consectetur enim.

Lindsay Walton

<article>
  <div>
    <time datetime="2020-03-16" class="block text-sm/6 text-gray-600">Mar 10, 2020</time>
    <h2 class="mt-2 text-lg font-semibold text-gray-900">Increase your conversion charge</h2>
    <p class="line-clamp-3 mt-4 text-sm/6 text-gray-600">
      Illo 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 incididunt.
    </p>
  </div>
  <div class="mt-4 flex gap-x-2.5 text-sm font-semibold leading-6 text-gray-900">
    <img src="..." class="h-6 w-6 flex-none rounded-full bg-gray-50" />
    Lindsay Walton
  </div>
</article>

So whenever you improve to v3.3, you’ll be able to safely take away the line-clamp plugin should you have been utilizing it:

module.exports = {
  
  plugins: [
    require('@tailwindcss/line-clamp')
  ]
}

Don’t let the door hit you within the ass on the best way out, plugin.

Take a look at the brand new line-clamp documentation to be taught extra about the way it all works should you haven’t performed with it earlier than.

New line-height shorthand for font-size utilities

One factor we’ve discovered over years and years of designing lovely stuff with Tailwind is that we actually by no means set a line-height with out additionally setting the font-size on the identical time.

So impressed by our colour opacity modifier syntax, we determined to make it attainable to save lots of a number of characters by setting them along with a single utility:

  <p class="text-lg leading-7 ...">
  <p class="text-lg/7 ...">
    So I began to stroll into the water. I will not misinform you boys, I used to be terrified. However
    I pressed on, and as I made my well past the breakers a wierd calm came to visit me.
    I do not know if it was divine intervention or the kinship of all dwelling issues however
    I inform you Jerry at that second, I <em>was</em> a marine biologist.
  </p>

You should utilize any worth outlined in your line-height scale, or use arbitrary values if it is advisable deviate out of your design tokens:

<p class="text-sm/[17px] ..."></p>

Take a look at the font size documentation for a number of extra examples.

CSS variables with out the var()

Within the spirit of typing much less, we’ve additionally made it attainable to omit the var() when utilizing a CSS variable as an arbitrary worth:

export perform MyComponent({ firm }) {
  return (
    <div
      type={{
        '--brand-color': firm.brandColor,
        '--brand-hover-color': firm.brandHoverColor,
      }}
      className="bg-[var(--brand-color)] hover:bg-[var(--brand-hover-color)]"
      className="bg-[--brand-color] hover:bg-[--brand-hover-color]"
    />
  )
}

That’s a reasonably cool trick proper there for utilizing issues like hover: with types that come from the database or one thing by the best way.

Configure font-variation-settings for customized font households

When utilizing customized fonts, you’ll usually wish to configure issues like font-feature-settings or font-variation-settings to opt-in to particular tweaks the font affords.

We’ve made it straightforward to do that for font-feature-settings for some time, however now you are able to do the identical factor with font-variation-settings by offering a price for it within the sort-of choices object you’ll be able to plop after the font record in your config file:

module.exports = {
  theme: {
    fontFamily: {
      sans: [
        'Inter var, sans-serif',
        {
          fontFeatureSettings: '"cv11", "ss01"',
          fontVariationSettings: '"opsz" 32',
        },
      ],
    },
  },
}

Within the instance above we’re utilizing a latest launch of Inter that helps utilizing the optical dimension axis to set off the “Show” variation of the font, optimized for bigger sizes like headlines.

New list-style-image utilities

Ever wished to make use of an image of a carrot as your record merchandise marker? Properly now you’ll be able to, with the brand new list-image-* utilities.