Kelvin Gobo Software Engineer | Technical Writer | Football #MUFC

What’s new in Tailwind CSS v2.0: New form styles and more

4 min read 1162

What's New in Tailwind CSS v2.0

Introduction

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!

New features and changes in Tailwind CSS v2.0

Dark mode

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>

A new color palette

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>

Dropped support for IE11

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.

New form styles and custom-forms plugin

Form 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.

New outline ring utilities

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:

Box Shadow on Focus
Box shadow on focus, courtesy of the Tailwind CSS docs.
<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.

Extended spacing, typography, and opacity scales

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>

New text-overflow utilities

New 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.

Migration to Tailwind CSS v2.0

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.



Install Tailwind CSS v2.0 and PostCSS 8

The new version requires PostCSS and Autoprefixer as peer dependencies, so they have to be installed side-by-side with Tailwind:

npm install [email protected] [email protected] [email protected]

You may need to run the PostCSS 7 compatibility build if you run into any issues.

Upgrade to Node.js 12.13 or higher

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:

  • Update typography and form plugins like @tailwindcss/typography and @tailwindcss/custom-forms (to @tailwindcss/forms)
  • Remove future and experimental configuration options
    module.exports = {
       // these are no longer needed
       future: {
         defaultLineHeights: true,
         purgeLayersByDefault: true,
         removeDeprecatedGapUtilities: true,
       },
       experimental: {
           additionalBreakpoint: true,
           extendedFontSizeScale: true,
           extendedSpacingScale: true,
       },
       // ...
    }
  • Update renamed utility classes
  • Replace shadow-outline and shadow-xs with ring utilities
  • Configure your color palette explicitly

For a full reference of the upgrade guide, kindly visit the Tailwind CSS documentation.

Conclusion

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.

Is your frontend hogging your users' CPU?

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.https://logrocket.com/signup/

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 — .

Kelvin Gobo Software Engineer | Technical Writer | Football #MUFC

Leave a Reply