What is new in Tailwind CSS version 2.2?

Tailwind CSS version 2.2 was just released today. This update brings many great new features to Tailwind CSS. This update is mostly focused on improving and expanding the JIT capabilities, but it’s also bringing some cool new features to the regular Tailwind CSS version. Let’s dive in, and discover what’s new!

Table of contents

Background-origin utilities

With the background-origin property you can control how and where the background starts. This is especially handy for making buttons with gradient-background and border. There are 3 background-origin utility classes specified: bg-origin-border, bg-origin-padding and bg-origin-content. Let’s take a look at how we can use these new classes.

Without Background-origin

First let’s see what the default browser behavior is when not specifying any background-origin properties on the button. Notice that the background gradient is not visible underneath the dotted border.

<a href="..." class="px-6 py-4 mt-6 font-bold text-white no-underline bg-no-repeat border-8 border-white border-dotted rounded-lg bg-gradient-to-r from-blue-400 to-green-500 ">Buy WindyBlocks</a>

Background-origin border-box

Luckily we can make the button nicer with applying the background-origin border-box property. To do this, simply add bg-origin-border to the button. Do you notice that now that gradient is visible underneath the border? Looks much better!

<a href="..." class="px-6 py-4 mt-6 font-bold text-white no-underline bg-no-repeat border-8 border-white border-dotted rounded-lg bg-gradient-to-r from-blue-400 to-green-500 bg-origin-border">Buy WindyBlocks</a>

Background-origin padding-box

Background-origin padding-box mimics the browser’s default behavior. Where the background stops when touching the element’s borders. You can apply it with the class bg-origin-border.

<a href="..." class="px-6 py-4 mt-6 font-bold text-white no-underline bg-no-repeat border-8 border-white border-dotted rounded-lg bg-gradient-to-r from-blue-400 to-green-500 bg-origin-padding">Buy WindyBlocks</a>

Background-origin content-box

And lastly we have Background-origin content-box property. This only shows the background under the inside content of the button. You can use this to create some pretty funky things. Apply it with the class bg-origin-content.

<a href="..." class="px-6 py-4 mt-6 font-bold text-white no-underline bg-no-repeat border-8 border-white border-dotted rounded-lg bg-gradient-to-r from-blue-400 to-green-500 bg-origin-content">Buy WindyBlocks</a>

Use !important in combination with @apply

Starting from Tailwind version 2.2 you can use the !important modifier inside @apply. Inside your style.css file you can now do this:

.custom-link {
  @apply !text-red-500;
}

The code above transforms in a Custom link with red text. Note that this will only work when JIT mode is activated. See the corresponding compiled code below:

.custom-link {
    --tw-text-opacity: 1 !important;
    color: rgba(239, 68, 68, var(--tw-text-opacity)) !important;
}

The new Empty variant

With the :empty CSS pseudo-class you can style elements differently when they don’t have any nested elements. This can be very useful for situations where data is not always granted. Let’s see how we can use this to highlight rows that don’t have any information.

<div class="space-y-4">
  <div class="flex items-center h-12 px-4 py-4 bg-gray-700 empty:bg-red-500">This is a row with content</div>
  <div class="flex items-center h-12 px-4 py-4 bg-gray-700 empty:bg-red-500">This is a row with content</div>
  <div class="flex items-center h-12 px-4 py-4 bg-gray-700 empty:bg-red-500"></div>
  <div class="flex items-center h-12 px-4 py-4 bg-gray-700 empty:bg-red-500">This is a row with content</div>
</div>

Opacity modifiers for colors

When in JIT mode, starting from version 2.2 you may now use a new syntax to define the amount of opacity. This new syntax also allows you to use any arbitrary value for your desired opacity.

New syntax explained

Before: <div class="px-6 py-2 bg-indigo-500 bg-opacity-75 rounded-lg">Old way: bg-indigo-500 bg-opacity-25</div>

New syntax: <div class="px-6 py-2 rounded-lg bg-indigo-500/75">New way: bg-indigo-500/25</div>

And this new syntax also works for things like text opacity.

New syntax: <div class="text-indigo-500/75">This text is 25% transparent</div>

But you aren’t limited to any predefined opacity class. With JIT mode you can enter any number. For example: enter 18 to apply 18% opacity to an element.

New syntax: <div class="bg-indigo-500/18">

Opacity and background gradients

Previously it wasn’t possible to combine a background gradient in combination with a background opacity utility class. But starting from version 2.2 you can now do the following.

<div class="px-6 py-2 rounded-lg bg-gradient-to-r from-indigo-500/50">hello world</div>

Caret colour styling

Version 2.2 brings you the option to style the caret-color. The caret is that blinking vertical line when you enter text into an input field. Simply use carent-color-red-600 (or any other color) to change the caret color of your inputs.

<input class="px-3 py-2 text-base text-gray-800 bg-white rounded-md caret-red-600" placeholder="Select your....">

Per side border colors

You now have the option to separately control each border color. This function is only available for the Tailwind JIT version. You can use the same syntax format that you use to set the border width.

<div class="px-6 py-2 border-2 border-t-indigo-600 border-l-green-500 border-r-green-500">Look Ma, different border colors</div>

Transform and Filter utility class no longer needed

Great news, you don’t longer have to include transform when using transform classes like: scale-*, translate-y-*, skew-x-*, and rotate-*. and filter class when using utilities like _backdrop-filter. This will save me a lot of time figuring out why my transformations aren’t working.

<div class="px-6 py-2 transform rounded-lg -rotate-2 bg-gradient-to-r from-indigo-500/50">The old way of doing things</div>

<div class="px-6 py-2 rounded-lg -rotate-2 bg-gradient-to-r from-indigo-500/50">The new way of doing things</div>

Selected text variants

With the new selection variant you can now control how highlighting text will look like. This feature is only available in JIT mode.

<div class="selection:bg-red-500">When you select this text the background will be red!</div>

First-letter and first-line styling

You can now style the first letter or fire line with Tailwind CSS. For example, you can make your first letter bold with first-letter:font-bold or make your first line red with first-line:text-red-500. This feature is only available in JIT mode.

<div class="first-letter:font-bold first-letter:text-blue-600">The first letter of this sentence is big, bold and blue</div>

<div class="first-line:text-red-600">The first line is red. There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.</div>

Before and After pseudo-elements

You can now use before and after to style pseudo elements. Tailwind will automatically set content:” ” so no need to add this.

<div class="flex items-center before:block before:bg-indigo-500 before:h-6 before:w-6 before:mr-2">Wow! there is a square before this text line!</div>

Peer variants

Use peer-* variants to style sibling elements. You can use variants like peer-hover, peer-focus and peer-disabled. Let’s see how we can use this to style a checked checkbox.

<label class="flex items-center space-x-2 cursor-pointer">
  <input type="checkbox" class="sr-only peer">
  <span class="inline-block w-4 h-4 bg-gray-200 border rounded-md peer-checked:bg-indigo-500">&nbsp;</span>
  <span>This is a custom checkbox</span>
</label>

More pseudo-class and pseudo-element variants

And the last thing on the list are the missing pseudo classes. Tailwind CSS Update 2.2 brings support for the following missing pseudo-classes:

• only
• first-of-type
• last-of-type
• only-of-type
• target
• default
• indeterminate
• placeholder-shown
• autofill
• required
• valid
• invalid
• in-range
• out-of-range

How to upgrade?

Tailwind CSS 2.2 doesn’t introduce any braking changes in normal mode. You are save to just upgrade to the latest version. Simply run the following command in your terminal.

npm install tailwindcss@latest

And don’t forget. If you were previously using the @tailwindcss/jit package, please uninstall it via npm. It now comes with the default Tailwind Package.

npm uninstall @tailwindcss/jit

What is your favorite new Tailwind CSS feature? You can read the full changelog on github