[Announcement] Tailwind CSS v1.4 is out, with built-in PurgeCSS support!

[adamwathan]

Tailwind CSS v1.4.0 is here! 🥳 Another new minor version so soon? Merry Coronavirus 🎄😷🎄

New Features

• New color opacity utilities
• Built-in PurgeCSS
• IE 11 target mode (experimental)

New color opacity utilities (#1627)

Tailwind v1.4 adds a new set of utilities for controlling just the alpha channel of colors:

• bg-opacity-{value}
• text-opacity-{value}
• border-opacity-{value}
• divide-opacity-{value}
• placeholder-opacity-{value}

These utilities compose with the existing color utilities like this:

<div class="bg-red-500 bg-opacity-25">
  <!-- ... -->
</div>

All of these new utilities inherit their values from the opacity config by default but can be configured independently under the following theme keys:

• backgroundOpacity
• textOpacity
• borderOpacity
• placeholderOpacity
• divideOpacity

Learn more in the pull request.

Built-in PurgeCSS (#1639)

Tailwind v1.4 adds a new purge option to the config for removing unused CSS without the need for configuring another tool:

// tailwind.config.js
module.exports = {
  purge: [
    './src/**/*.html',
    './src/**/*.vue',
    './src/**/*.jsx',
  ],
  theme: {},
  variants: {},
  plugins: [],
}

Learn more in the pull request and the updated "Controlling File Size" documentation.

IE 11 target mode (#1635)

This feature is experimental and may change outside of normal semantic versioning policies.

Recently we've been adding a lot of new features to Tailwind that aren't IE 11 compatible, and if you need to support IE 11 in your projects you have to be careful not to rely on these features by mistake.

To make this easier, we've added a new target option to the config that lets you opt-in to a new ie11 mode that disables any features that are not compatible with IE 11:

// tailwind.config.js
module.exports = {
  target: 'ie11',
  theme: {},
  variants: {},
  plugins: [],
}

Learn more in the pull request.

[udemezue01]

Good job sir
we need a modal component.

[nunomaduro]

Here is one: https://tailwindui.com/components/application-ui/overlays/modals.

[vivgui]

I think the Built-in PurgeCSS feature is a complete game-changer, no need to fiddle with webpack/gulp config, or deal with a third party implementation's purging decisions (I'm looking at you @nuxtjs/tailwindcss) anymore.

[wpsix]

It's fine but wasn't so hard to setup.

[stuyam]

I can't tell if it is just me or if the bg-opacity-0 class is not working on the docs pages.

Far right one should be completely transparent if I am not mistaken? Not sure if this is an issue in the docs or the main package.

[ajitbohra]

@adamwathan seems like .bg-opacity-100 & .bg-opacity-0 both are purged from final styles on docs site.

Available on CDN copy and works fine.

[MZanggl]

Interesting issue as it shows the dangers of purging only on production (which is the default setting). The same thing happened to me the other day with nuxt, because their plugin purged classes in nuxt.config.js.

I wonder if there are some possible improvements to make purging during development more performant to avoid these surprises.

[adamwathan]

Fixed, problem is I break my own rules on the Tailwind site and do some stupid things with dynamic classes and loops, because otherwise trying to maintain the docs would be a total nightmare. Thanks for the heads up!

[benoliver999]

Thank you for the built in purge, it is a crucial step and very handy.

Is there a way to exclude a directory from purge: [ ?

I am using jekyll with postcss, and it would be good to exclude _site, in order to avoid running purge on an old build.

[kevinruscoe]

As per https://tailwindcss.com/docs/controlling-file-size/#purgecss-options, you can pass an options object straight to PurgeCSS. So, in that case, check out the purgeCSS docs on how to change paths, specifically the content option.

[janko]

Are you open to extending the default purge regex to support other templating languages? For my HAML templates I found that I needed to add = to support this common syntax:

.text-gray-500= content

This change worked for me (I overrode both just in case):

- const broadMatches = content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || []
- const innerMatches = content.match(/[^<>"'`\s.()]*[^<>"'`\s.():]/g) || []
+ const broadMatches = content.match(/[^<>"'`\s]*[^<>"'`\s:=]/g) || []
+ const innerMatches = content.match(/[^<>"'`\s.()]*[^<>"'`\s.():=]/g) || []

[utkarshkukreti]

👍 maybe add [] and {} as well. Haml lets you use {} and Slim [] for attributes, e.g.
.a[b=1] compiles to <div class='a' b=1> in Slim.

[adamwathan]

Ah good to know, adding that as well!

[janko]

Thank you for such a prompt response ❤️ Yes, both of your suggestions sound good to me 👍

[adamwathan]

v1.4.1 is out with better support for Haml and Slim! 👍

[janko]

Wow, thank you for such a quick patch and release. I've just upgraded and it works marvelously 👌

[kevinruscoe]

FYI, the target: 'ie11', is added for quickly targetting IE11. The PR for this specifically mentions using browserslist (thank god) in the future, albeit a slimed, sensible version.

[glauberfc]

The integration with PurgeCSS was a great decision!

[stefanstifter]

also very excited about the integrated purgeCSS. can't wait to try that out. thanks!

[dixonge]

If using PostCSS, upgrading TailwindCSS means I need to move all of the PurgeCSS plugin functions over to the new 'purge' option inside of Tailwind plugin? I am unclear on what to move where. :/

[devcircus]

You can choose to keep using purgecss as you currently do. No reason to move anything if you don't want to.

[adamwathan]

@dixonge Can you share your current PostCSS config? Happy to tell you what to put where.

[dixonge]

const purgecss = require("@fullhuman/postcss-purgecss")({
  // Specify the paths to all of the template files in your project
  content: ["./dist/**/*.html"],
  whitelist: ["dark-mode"],

  // Include any special characters you're using in this regular expression
  defaultExtractor: (content) => content.match(/[\w-/:%.]+(?<!:)/g) || [],
});

module.exports = {
  plugins: [
    require("tailwindcss"),
    require("autoprefixer"),
    ...(process.env.NODE_ENV === "production"
      ? [purgecss, require("cssnano")]
      : []),
  ],
};

It is using cssnano with purgecss...

[adamwathan]

This should do it for you:

// postcss.config.js
module.exports = {
  plugins: [
    require("tailwindcss"),
    require("autoprefixer"),
    ...(process.env.NODE_ENV === "production"
      ? [require("cssnano")]
      : []),
  ],
};

// tailwind.config.js
module.exports = {
  purge: {
    content: ["./dist/**/*.html"],
    whitelist: ["dark-mode"],
  }
}

[dixonge]

Yes sir! Thank you so much...

[samanthaming]

This is awesome! The Built-in PurgeCSS is probably what I'm most excited about -- as I was looking into installing it separately, but now I don't have to 👏

Question: My site is built with VuePress, is there any additional setup/configuration I need to do to get it to work? Or would everything just magically work 😄