warn - The purge
/content
options have changed in Tailwind CSS v3.0.
#6019
-
What about |
Beta Was this translation helpful? Give feedback.
Replies: 11 comments 27 replies
-
Hi, In Tailwind CSS V3 Quote from the Tailwind CSS V3 Announcement:
So you need to update your tailwind.config.js and replace // 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: [],
} |
Beta Was this translation helpful? Give feedback.
-
It worked for me, and ya I actually removed |
Beta Was this translation helpful? Give feedback.
-
Despite the fact that I changed content: [
"./components/**/*.{js,vue,ts}",
"./layouts/**/*.vue",
"./pages/**/*.vue",
"./plugins/**/*.{js,ts}",
"./nuxt.config.{js,ts}",
],
P.S. |
Beta Was this translation helpful? Give feedback.
-
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.
while this keeps my application in-tact:
My application is built with VueJS 3.0. |
Beta Was this translation helpful? Give feedback.
-
Hi, I am facing the same issue, was this ever resolved?
And my tailwind.config.js is already changed
|
Beta Was this translation helpful? Give feedback.
-
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. |
Beta Was this translation helpful? Give feedback.
-
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 🤥 |
Beta Was this translation helpful? Give feedback.
-
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 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. 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! |
Beta Was this translation helpful? Give feedback.
-
I still have error.
|
Beta Was this translation helpful? Give feedback.
-
Is there a solution to this problem? |
Beta Was this translation helpful? Give feedback.
-
You can use a
Then inside your
For example. |
Beta Was this translation helpful? Give feedback.
Hi, In Tailwind CSS V3
purge
has changed tocontent
.Quote from the Tailwind CSS V3 Announcement:
So you need to update your…