According to its official site, Tailwind CSS is a “utility-first CSS framework packed with classes … that can be composed to build any design, directly in your markup.” It’s low-level and, compared to other CSS frameworks, which basically tell you what to do, it’s not opinionated. This allows you to compose your UI elements in a declarative manner with very minimal CSS.
This post covers some of the new features in Tailwind CSS 2.0 and how to use them in your project. It will also cover some of the breaking changes and, finally, the migration path to version 2.0. Let’s get started!
In recent times, dark mode has become a highly desirable feature. To add dark mode styling in a Tailwind app, prefix classes with dark:, like so:
<div class="bg-white dark:bg-gray-800"> ... </div>
Dark mode is not enabled by default due to the impact it will have on the final bundle size. To enable dark mode, add the following to the tailwind.config.css file:
// tailwind.config.js
module.exports = {
darkMode: 'media',
// ...
}
Under the hood, it uses the prefers-color-scheme media feature to toggle the dark variants. So when dark mode is enabled by the user’s operating system, the dark variants take precedence over unprefixed classes.
There’s also a way to manually toggle dark mode without relying on the operating system preference. In the Tailwind config file, replace media with class:
// tailwind.config.js
module.exports = {
darkMode: 'class',
// ...
}
Dark mode classes will be applied when the class dark is present on the root <html> tag:
<!-- Dark mode enabled -->
<html class="dark">
<body>
<!-- Will be black -->
<div class="bg-white dark:bg-black">
<!-- ... -->
</div>
</body>
</html>
Tailwind CSS 2.0 comes with an all-new color palette with a total of 220 values, far more than the 90 values in the previous version. The shades of each color now range from 50–900. The palette also includes five shades of grey, which range from “blue grey” to “warm grey.”
A new extra-light shade 50 has been added to all colors and can be used like so:
<div class="bg-gray-50">This div has a gray background.</div>
With its v2 release, the Tailwind team has decided to drop support for IE11. This will lead to smaller build sizes since no polyfills are bundled into the final build. Focus will be shifted to newer features like CSS custom properties, which enable greater possibilities.
If you still need support for IE11, you can continue to use Tailwind CSS v1.9, which is still great — though it doesn’t offer the new features mentioned in this article.
custom-forms pluginForm elements looked very bare with the previous version of Tailwind CSS, so a lot of custom styling had to be written to make them look somewhat decent.
Alongside the v2.0 release, a new official plugin called @tailwindcss/custom-forms was released. It resets form controls to a state that can be easily styled with the inbuilt utility classes.
<!-- This will be a nice rounded checkbox with an indigo focus ring and an indigo checked state --> <input type="checkbox" class="h-4 w-4 rounded border-gray-300 focus:border-indigo-300 focus:ring-2 focus:ring-indigo-200 focus:ring-opacity-50 text-indigo-500" />
It’s not included by default, so if you want to use it, you have to explicitly add it to your tailwind.config.js file in the plugins section:
// tailwind.config.js
module.exports = {
// ...
plugins: [require('@tailwindcss/forms')],
}
You can check the documentation for more details.
The Tailwind team has added new outline ring utilities that can be used to create a box shadow on elements. This can be especially useful for indicating hover/focused states on buttons:
<button class="... focus:ring-4 focus:ring-green-500 focus:ring-opacity-50"> Button </button>
The ring utilities make use of box-shadow and not border, which would cause layout reflow and distorts the user experience.
Spacing utilities have been extended to include fractional values — 0.5, 1.5, etc.:
<span class="ml-3.5">Just a little nudge.</span>
There’s also been an extension to the higher spacing utilities:
<div class="p-96">This is too much padding.</div>
Typography scales have been extended as well to include 7xl, 8xl, and 9xl:
<h1 class="text-9xl">What is this, an Apple website?</h1>
Opacity scales have been extended to include steps of 10, from 0 to 100:
<figure class="opacity-20"> <p>Can you see me?</p> </figure>
text-overflow utilitiesNew overflow utilities have been added to control the text-overflow property, including overflow-ellipsis and overflow-clip. This will enable adding ellipses to truncated text or clipping the text, respectively.
<p class="overflow-ellipsis overflow-hidden"> Look ma no whitespace-nowrap ipsum... </p>
For the full list of changes in Tailwind CSS 2.0, check out the release notes.
Since there are a number of new changes in the new version — including some breaking changes — there are a few steps that must be taken during migration. According to the team, most projects should take less than 30 minutes to migrate. Let’s look into how to upgrade Tailwind CSS, along with a few things to look out for.
The new version requires PostCSS and Autoprefixer as peer dependencies, so they have to be installed side-by-side with Tailwind:
npm install tailwindcss@latest postcss@latest autoprefixer@latest
You may need to run the PostCSS 7 compatibility build if you run into any issues.
Tailwind CSS v2.0 requires Node ≥12.13 to build your CSS. If you are running a lower version of Node, you will need to upgrade it.
Some other changes that need to be made are:
Learn more →@tailwindcss/typography and @tailwindcss/custom-forms (to @tailwindcss/forms)module.exports = {
// these are no longer needed
future: {
defaultLineHeights: true,
purgeLayersByDefault: true,
removeDeprecatedGapUtilities: true,
},
experimental: {
additionalBreakpoint: true,
extendedFontSizeScale: true,
extendedSpacingScale: true,
},
// ...
}
shadow-outline and shadow-xs with ring utilitiesFor a full reference of the upgrade guide, kindly visit the Tailwind CSS documentation.
In this post, we covered some of the new changes that were introduced in Tailwind CSS v2.0. We also looked at how to migrate existing applications to the new version, and some breaking changes that may affect certain projects. If your project depends on some of these features that are no longer supported, you can continue using v1.9.
As web frontends get increasingly complex, resource-greedy features demand more and more from the browser. If you’re interested in monitoring and tracking client-side CPU usage, memory usage, and more for all of your users in production, try LogRocket.
LogRocket is like a DVR for web and mobile apps, recording everything that happens in your web app, mobile app, or website. Instead of guessing why problems happen, you can aggregate and report on key frontend performance metrics, replay user sessions along with application state, log network requests, and automatically surface all errors.
Modernize how you debug web and mobile apps — start monitoring for free.
Knowing how to reduce unused JavaScript can help you save time, optimize performance, and improve efficiency.
MiniSim makes virtual emulator testing easy — learn how to use it to test both Android and iOS apps on macOS in this detailed post.
After internationalization, you can further localize your apps to make user experiences more friendly. Learn how to do this in TypeScript.
You can leverage containers to streamline the process of setting up a dev environment. Let’s see how using VS Code and Docker.
