Purpose of 'content' in tailwind config

user_14833668 0
Viewed 5052

I am using tailwind in a Nuxt app and had a warning about purge/content options changing in Tailwind CSS v3.0 and after changing purge to content or leaving it as it just did not change anything not even removed that warning.

As far as I understand this option (content/purge) tells tailwind where to search its class names. But even without any option in that list, everything works just fine.

Can someone explain why nothing changes even if I am having 'content' empty?

tailwind.condig.js

module.exports = {
  mode: 'jit',
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./nuxt.config.{js,ts}",
  ],
  // ...
}
nuxt.js tailwind-css vue.js
1 Answers

Purge option tells the engine where to look for used class names so it could remove unused ones for better performance, so even without this option, everything works fine in Tailwind CSS v2.x and it only helps to improve the performance.

In Tailwind CSS v2.x, there was a preview feature named Just-in-Time engine witch you could used by enabling it in tailwind.config.js (mode: 'jit'); In Tailwind CSS v3, the new Just-in-Time engine has replaced the classic engine in Tailwind. According to Tailwind official website, since Tailwind no longer uses PurgeCSS under the hood, they’ve renamed the 'purge' option to 'content' to better reflect what it’s for.

So basically they've just renamed 'purge' option to 'content' in version 3. if you are using Tailwind CSS v3 right now, you should rename it in config file, and you should also remove mode: 'jit' because it's no longer needed, Otherwise there is no need to rename purge option and you could safely ignore the warning.

Important Note: In Tailwind CSS v3, it’s crucial that you configure your template paths using 'content' option or your compiled CSS will be empty.

related links: #migrating-to-the-jit-engine

user_158780960
Related