warn - The `purge`/`content` options have changed in Tailwind CSS v3.0. #6019

alaadahmed · 2021-11-08T22:41:06Z

alaadahmed
Nov 8, 2021

What about purge options, how I should configure it in v3.0? I am working with alpha-2 and everything is stable so far, but these warning I don't know how to solve them.

Answered by NovusOpus

Nov 9, 2021

Hi, In Tailwind CSS V3 purge has changed to content.

Quote from the Tailwind CSS V3 Announcement:

purge has changed to content
The JIT engine doesn't actually use PurgeCSS under-the-hood, so purge doesn't feel like the right name for these configuration options anymore.

Now this configuration should look like this:
// tailwind.config.js
module.exports = {
  content: ['./src/**/*.html' /* ... */],
}
We've tried really hard to make Tailwind smart enough to understand the old configuration as well, so with any luck your existing configuration should still work, but you'll want to update to the new format to silence the annoying console warnings we blast you with.

So you need to update your…

View full answer

NovusOpus · 2021-11-09T01:13:53Z

NovusOpus
Nov 9, 2021

Hi, In Tailwind CSS V3 purge has changed to content.

Quote from the Tailwind CSS V3 Announcement:

purge has changed to content
The JIT engine doesn't actually use PurgeCSS under-the-hood, so purge doesn't feel like the right name for these configuration options anymore.

Now this configuration should look like this:
// tailwind.config.js
module.exports = {
  content: ['./src/**/*.html' /* ... */],
}
We've tried really hard to make Tailwind smart enough to understand the old configuration as well, so with any luck your existing configuration should still work, but you'll want to update to the new format to silence the annoying console warnings we blast you with.

So you need to update your tailwind.config.js and replace purge with content, like for example:

// tailwind.config.js
module.exports = {
- purge: ['./src/**/*.html' /* ... */],
+ content: ['./src/**/*.html' /* ... */],
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Another example(React):

// tailwind.config.js
module.exports = {
- purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
+ content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

4 replies

hi-reeve Nov 9, 2021

i still got the warning even when i already use content tho.

NovusOpus Nov 9, 2021

i still got the warning even when i already use content tho.

Working fine for me, You need to remove mode: 'jit', Since it's no longer necessary( Tailwind CSS V3.0 is using the Jit Engine by default). If you have it in your config file, also try reinstalling tailwind there's v3.0.0-alpha.2. Update.

If that doesn't work, share your tailwind.config.js?

Proof:

ter1203 Aug 2, 2022

Thank you.

Kamsi-yonna Jul 16, 2023

Nice, it worked for me

alaadahmed · 2021-11-09T03:42:00Z

alaadahmed
Nov 9, 2021
Author

It worked for me, and ya I actually removed mode: "jit", but even if I left it, I don't get warning concern with jit. Thanks @novuspace

1 reply

ter1203 Aug 2, 2022

Thank you

u2ru · 2021-12-11T23:44:20Z

u2ru
Dec 11, 2021

Despite the fact that I changed ~~purge~~ to content I am getting the same warn in the console

content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./nuxt.config.{js,ts}",
  ],

 WARN                                                                   03:39:51


 WARN  warn - The purge/content options have changed in Tailwind CSS v3.0.


 WARN  warn - Update your configuration file to eliminate this warning. 03:39:51

P.S.
Just changing purge to console will trigger console app, recompile it and a warning will not show but if you stop the code <CMD + C> and run again (e.g npm run dev) it will appear again

7 replies

silwals Jan 21, 2022

Hi, I am facing the same issue, was this ever resolved ?

warn - The purge/content options have changed in Tailwind CSS v3.0.
warn - Update your configuration file to eliminate this warning.

And my tailwind.config.js is already changed

module.exports = {
    prefix: '',
    content: {
        enabled: true,
        content: [
            './src/**/*.{html,ts}',
        ]
    }....

NovusOpus Jan 22, 2022

@supa-freak @reza869 Can you share your tailwind.config.js so we can troubleshot.

akashrajum Jan 27, 2022

@NovusOpus I have shared my config in this comment, can you please check? Thanks -- #6019 (comment)

reza869 Feb 7, 2022

@NovusOpus in tailwindcss 3.0.8 - This is my tailwind.config.js file

module.exports = {
  darkMode: 'class',
  theme: {
    extend: {
          textColor: theme => theme('colors'),
          textColor: {
                  'theme-black': '#555555',
                  'dark-black': '#333333',
                  'primary': '#1d3557',
                  'secondary': '#c25251',
                  'pink': '#457b9d'
          },
            borderColor: theme => ({
                  'theme-black': '#555555',
                  'dark-black': '#333333',
                  'primary': '#1d3557',
                  'secondary': '#c25251'
            }),
            borderWidth: {
                  1: '1px',
            },
            spacing: {
                  px: '1px',
            },
            zIndex: {
                  n1: '-1',
                  99: '99',
                  999: '999',
                  9999: '9999'
            },
            fontFamily: {
                  'poppins': ["'Poppins', sans-serif"],
            },
            colors: {
                    'theme-black': '#555555',
                    'dark-black': '#333333',
                    'primary': '#1d3557'
            },
          container: {
                center: true,
                padding: {
                        DEFAULT: "15px",
                        sm: "15px",
                        lg: "15px",
                        xl: "15px",
                        "2xl": "15px"
                },
          },
            screens: {
                  'sm': '640px',
                  'md': '768px',
                  'lg': '1024px',
                  'xl': '1200px',
                  '2xl': '1200px'
            },
          letterSpacing: {
                textone: '0.75px',
                texttwo: '1px'
          }
    },
  },
  variants: {
  },
  plugins: [
  ],
}

agileben Feb 8, 2022

Same here, getting the warning after changing to "content":

module.exports = {
content: [
// Example content paths...
'./public//*.html',
'./pages//.{js,jsx,ts,tsx,vue}',
'./components//**/.{js,jsx,ts,tsx,vue}',
'./layouts//**/*.{js,jsx,ts,tsx,vue}',
],
theme: {
extend: {
typography: ({ theme }) => ({
zoe: {
css: {
'--tw-prose-body': theme('colors.pink[800]'),
'--tw-prose-headings': theme('colors.pink[900]'),
'--tw-prose-lead': theme('colors.pink[700]'),
'--tw-prose-links': theme('colors.pink[900]'),
'--tw-prose-bold': theme('colors.pink[900]'),
'--tw-prose-counters': theme('colors.pink[600]'),
'--tw-prose-bullets': theme('colors.pink[400]'),
'--tw-prose-hr': theme('colors.pink[300]'),
'--tw-prose-quotes': theme('colors.pink[900]'),
'--tw-prose-quote-borders': theme('colors.pink[300]'),
'--tw-prose-captions': theme('colors.pink[700]'),
'--tw-prose-code': theme('colors.pink[900]'),
'--tw-prose-pre-code': theme('colors.pink[100]'),
'--tw-prose-pre-bg': theme('colors.pink[900]'),
'--tw-prose-th-borders': theme('colors.pink[300]'),
'--tw-prose-td-borders': theme('colors.pink[200]'),
'--tw-prose-invert-body': theme('colors.pink[200]'),
'--tw-prose-invert-headings': theme('colors.white'),
'--tw-prose-invert-lead': theme('colors.pink[300]'),
'--tw-prose-invert-links': theme('colors.white'),
'--tw-prose-invert-bold': theme('colors.white'),
'--tw-prose-invert-counters': theme('colors.pink[400]'),
'--tw-prose-invert-bullets': theme('colors.pink[600]'),
'--tw-prose-invert-hr': theme('colors.pink[700]'),
'--tw-prose-invert-quotes': theme('colors.pink[100]'),
'--tw-prose-invert-quote-borders': theme('colors.pink[700]'),
'--tw-prose-invert-captions': theme('colors.pink[400]'),
'--tw-prose-invert-code': theme('colors.white'),
'--tw-prose-invert-pre-code': theme('colors.pink[300]'),
'--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)',
'--tw-prose-invert-th-borders': theme('colors.pink[600]'),
'--tw-prose-invert-td-borders': theme('colors.pink[700]'),
},
},
}),
},
},

plugins: [
require('@tailwindcss/typography')

],
}

eugenevk · 2021-12-17T10:46:21Z

eugenevk
Dec 17, 2021

I have upgraded to TailwindCSS 3.0.6 and after deleting purge from my custom tailwind.config.js, my entire application layout is broken! Tailwind styles are then not recognized anymore, until I add back the purge option, even with the warning in the console.
This breaks my application styling:

module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {
    ...

while this keeps my application in-tact:

module.exports = {
  content: ["./src/**/*.{html,js}"],
  purge: ['./src/**/*.html', './src/**/*.vue'],
  theme: {
    extend: {
    ...

My application is built with VueJS 3.0.
Please advise what I should do!

2 replies

adamwathan Dec 17, 2021
Maintainer

Rename purge to content, keep the array the same. You still need it to scan Vue files like you were before.

eugenevk Dec 17, 2021

Yes, that works. Thanks @adamwathan for your swift response. Case closed.

silwals · 2022-01-21T17:06:15Z

silwals
Jan 21, 2022

Hi, I am facing the same issue, was this ever resolved?

"tailwindcss": "3.0.15",

warn - The purge/content options have changed in Tailwind CSS v3.0.
warn - Update your configuration file to eliminate this warning.

And my tailwind.config.js is already changed

module.exports = {
    prefix: '',
    content: {
        enabled: true,
        content: [
            './src/**/*.{html,ts}',
        ]
    }....

7 replies

ErickSharp Jan 23, 2022

How about if I want to enable the purge conditionally, like in this case (this used to work before):

purge: { enabled: process.env.NG_ENV === 'production' || process.env.NG_ENV == 'staging', content: ['./projects/**/*.{html,ts}'], },

You can’t. It’s necessary to configure your template paths otherwise you will get no CSS produced.

silwals Jan 24, 2022

@NovusOpus Thank You, I was able to solve this with your input.

Mod5ied Feb 6, 2022

Conditional purging is not recommended though, try sticking with the default setup.
This: module.exports = { prefix: '', content: { enabled: true, content: [ './src/**/*.{html,ts}', ] }.... should be trimmed to just contain a single content property:
module.exports = { prefix: '', content: [ './src/**/*.{html,ts}' ]....

kuroda Feb 8, 2022

@Mod5ied

Conditional purging is not recommended

I want to prevent any purging becaulse I am building a kind of Content Management System in which users can use any Tailwind classes.

Please provide a means to disable purging functionality.

asher-dev Sep 9, 2022

You can list any classes you don't want purged in the safelist property on the config object. In your case, it sounds like this might be a very long list.

akashrajum · 2022-01-27T06:33:47Z

akashrajum
Jan 27, 2022

I am too still getting the error in nuxt even after changing tailwind config, here's my tailwind config --

const colors = require("tailwindcss/colors");

module.exports = {
  content: [
    "./components/**/*.{vue,js}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./nuxt.config.{js,ts}"
  ],
  theme: {
    fontFamily: {
      sans: [
        "Inter",
        "ui-sans-serif",
        "system-ui",
        "-apple-system",
        "BlinkMacSystemFont",
        "Segoe UI",
        "Roboto",
        "Helvetica Neue",
        "Arial",
        "Noto Sans",
        "sans-serif",
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        "Noto Color Emoji"
      ]
    },
    colors: {
      current: "currentColor",
      indigo: colors.sky,
      red: colors.red,
      white: colors.white,
      green: colors.emerald,
      gray: colors.gray,
      pink: colors.pink,
      purple: colors.violet,
      yellow: colors.amber,
      black: colors.black
    },
    zIndex: {
      "0": 0,
      "10": 10,
      "20": 20,
      "30": 30,
      "40": 40,
      "50": 50,
      "75": 75,
      "100": 100,
      auto: "auto"
    },
    extend: {
      height: {
        "11.5": "2.875rem",
        "12.5": "3.125rem",
        "46": "11.5rem",
        "66": "16.5rem",
        max: "max-content"
      },
      maxHeight: {
        "22": "5.5rem",
        "23": "5.75rem",
        "34": "8.5rem",
        modal: "calc(100% - 4rem)",
        filters: "calc(100vh - 5rem)"
      },
      minHeight: {
        "14": "3.5rem"
      },
      minWidth: {
        "48": "12rem"
      },
      margin: {
        "-7.5": "-1.875rem"
      },
      fontSize: {
        xxs: "0.5rem"
      },
      transitionProperty: {
        width: "width"
      },
      backgroundColor: {
        zoom: "#2D8CFF",
        transparent: "transparent"
      }
    }
  },
  plugins: [require("@tailwindcss/forms"), require("@tailwindcss/line-clamp")]
};

And I get --

 WARN                                                                                                                                            11:58:52


 WARN  warn - The purge/content options have changed in Tailwind CSS v3.0.                                                                       11:58:52


 WARN  warn - Update your configuration file to eliminate this warning.                                                                          11:58:52


 WARN  warn - https://tailwindcss.com/docs/upgrade-guide#configure-content-sources                                                               11:58:52

Please help, thanks.

2 replies

jhonyjss Jan 29, 2022

Hey, I solved this warn message using these configs below and I removed node_modules .nuxt and yarn.lock in my case:

I`m not using @nuxt/tailwind package module.

 build: {
    postcss: {
      plugins: {
        'postcss-import': true,
        'tailwindcss/nesting': {},
        'postcss-nested': {},
        'postcss-pxtorem': {
          propList: ['*', '!border*'],
        },
      },
    },
  },

In my devDependencies package.json

"postcss-nested": "^5.0.6",
"postcss-nesting": "^10.1.2",
"postcss-pxtorem": "^6.0.0",
"postcss-import": "^14.0.2",
"postcss": "^8.4.5",
"tailwindcss": "^3.0.18"

Khezcute Feb 28, 2022

Mm, but when I try this config, the problem is in Build, I have a lot of unused css. U know some additional config?

dantemogrim · 2022-02-11T09:51:01Z

dantemogrim
Feb 11, 2022

I had this exact same bug (using the nuxt/tailwind package but that's neither here nor there). In my case I simply had forgotten to update my npm package to it's latest version. oops 🤥
Now everything works smoothly.

0 replies

ChrizzDF · 2022-02-18T13:40:07Z

ChrizzDF
Feb 18, 2022

I'm using Nuxt 2.15.8 and could get rid of the warning even though I was properly defining the content prop according to the docs in my tailwind.config.js:

module.exports = {
    content: [
        './src/app.html',
        './src/components/**/*.{js,ts,vue}',
        './src/layouts/**/*.{js,ts,vue}',
        './src/pages/**/*.{js,ts,vue}'
    ]
};

Locally, everything is working fine, but when the pipeline is running the build task, I also got the warning.
Turns out, I needed to put the config inside tailwind's postcss config in my nuxt.config.js:

postcss: {
  ...
  plugins: {
      'postcss-import': {},
      'tailwindcss/nesting': {},
      tailwindcss: {
          content: [
              './src/app.html',
              './src/components/**/*.{js,ts,vue}',
              './src/layouts/**/*.{js,ts,vue}',
              './src/pages/**/*.{js,ts,vue}',
              // External Packages
              './node_modules/@code/rd-footer/src/**/*.{js,ts,vue}'
          ]
      },
      autoprefixer: {}
  }
},

Hope this could be helpful for someone else!

1 reply

Bergrebell Jun 7, 2022

please have a look here, since putting the config into nuxt.config gives another error.

https://github.com/nuxt/framework/issues/2886

theminjunchoi · 2022-03-10T15:40:20Z

theminjunchoi
Mar 10, 2022

I still have error.
and the code is below

module.exports = {
  content: [],
  darkMode: 'media', // or 'media' or 'class'
  theme: {
    extend: {
      keyframes: {
        wiggle: {
          '0%, 100%': {
            transform: 'rotate(-3deg)'
          },
          '50%': {
            transform: 'rotate(3deg)'
          },
        }
      },
      animation: {
        wiggle: 'wiggle 0.5s ease-in-out infinite'
      },
    },
  },
  
  plugins: [
    require('@tailwindcss/typography'),
  ],
}

1 reply

vivekshotti Jun 7, 2022

I think you shouldn't keep the content option empty. You can either have:
content: ['./src/**/*.html' /* ... */],
or
content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
or you have the option to not mention content at all.

cy920820 · 2022-08-15T03:47:26Z

-content: ['./src/**/*.tsx', !'./src/**/*.test.tsx'],
+content: ['./src/**/*.tsx', '!./src/**/*.test.tsx'],

It seems that using the ! outside of the string was breaking the content declaration but not in an "explosive" enough manner.

justingolden21 · 2022-09-09T17:14:18Z

justingolden21
Sep 9, 2022

You can use a safelist.txt file as well:

module.exports = {
  content: [
    "./safelist.txt",
    // ...

Then inside your safelist.txt list the classes you want to avoid purging:

bg-red
bg-orange
bg-yellow

For example.

0 replies

warn - The purge/content options have changed in Tailwind CSS v3.0. #6019

Replies: 11 comments · 27 replies

alaadahmed Nov 9, 2021 Author

adamwathan Dec 17, 2021 Maintainer

warn - The `purge`/`content` options have changed in Tailwind CSS v3.0. #6019

Replies: 11 comments 27 replies

alaadahmed
Nov 9, 2021
Author

adamwathan Dec 17, 2021
Maintainer