What's is Coming In Tailwind CSS v2

Tailwind Css frameworks keeps moving fast and many of the features for v2 are already known. The upgrade looks like it will be easy with a few breaking changes. As the release will probably come in November, we'll try to update the post as new features are announced.

You can start using most of the new features, as they are already deployed in 1.8 behind feature flags.

Remove deprecated gap utilities

Since v1.7.0, you had available gap-x-{n} and gap-y-{n} making col-gap-{n} and row-gap-{n} redundant.

To enable the flag and use the 2.0 behavior, you can use removeDeprecatedGapUtilities flag on your project's tailwind.config.js:

module.exports = {
  future: {
    removeDeprecatedGapUtilities: true,
  },
}

Purge layers by default

The current behavior of the included purgecss only works on the @utilities block (it represents the major part of the total build size). In 2.0, it purges utilities from base, components and utilities, so you can expect a smaller build size.

To use the new behavior, add to your tailwind.config.js the following snippet:

module.exports = {
  future: {
    purgeLayersByDefault: true,
  },
}

You can also configure the layers to be purged.

Default line heights for font size utilities

In the v1.0, font-size utilities didn't comes with default line heights but in v2.0 all font-size utilities like text-md and text-xl will include their own default line-height value.

// Default config for 2.0

module.exports = {
  // ...
  theme: {
    fontSize: {
      xs: ['0.75rem', { lineHeight: '1rem' }],
      sm: ['0.875rem', { lineHeight: '1.25rem' }],
      base: ['1rem', { lineHeight: '1.5rem' }],
      lg: ['1.125rem', { lineHeight: '1.75rem' }],
      xl: ['1.25rem', { lineHeight: '1.75rem' }],
      '2xl': ['1.5rem', { lineHeight: '2rem' }],
      '3xl': ['1.875rem', { lineHeight: '2.25rem' }],
      '4xl': ['2.25rem', { lineHeight: '2.5rem' }],
      '5xl': ['3rem', { lineHeight: '1' }],
      '6xl': ['4rem', { lineHeight: '1' }],
    },
  },
}

This change will break your design if you didn't using spcific line-height like leading-8 with your font-size classes, the easiest to fix this problem you have to look through your project for any places where you are using a font-size utility and add leading-normal to work like old behavior.

To use new font-size utilities you can add defaultLineHeights flag to your config.

module.exports = {
  future: {
    defaultLineHeights: true,
  },
  // ...
}

Rename font-thin and font-hairline

In v2.0, the font-thin utility will be renamed to font-extralight and font-hairline will be renamed to font-thin.

To start using the new font-weight utilities names you can add standardFontWeights flag to your config.

module.exports = {
  future: {
    standardFontWeights: true,
  },
  // ...
}

Drop IE 11 support

In v2.0 the Internet Explorer 11 support will be removed, as Adam Wathan said Going to drop it for 2.0, you can continue to use 1.x (which is the best CSS framework currently available on earth) if you need IE 11 support.

New Color Scheme

Steve Schoger is working on a new color palette that expands the current one, but it isn't available yet, so you have to wait until 2.0 release to try it.