@tailwindcss/upgrade error #16690
Replies: 3 comments 1 reply
-
|
I think it might be a problem with the {
maxWidth: ({ theme, breakpoints }) => ({
none: 'none',
0: '0rem',
xs: '20rem',
sm: '24rem',
md: '28rem',
lg: '32rem',
xl: '36rem',
'2xl': '42rem',
'3xl': '48rem',
'4xl': '56rem',
'5xl': '64rem',
'6xl': '72rem',
'7xl': '80rem',
full: '100%',
min: 'min-content',
max: 'max-content',
fit: 'fit-content',
prose: '65ch',
...breakpoints(theme('screens')),
})
}Which is the only place |
Beta Was this translation helpful? Give feedback.
-
|
I think it's a deprecated function in v3 and seems to be wholey removed in v4's JS compatibility layer. You could define the +function breakpoints(screens) {
+ // Real code goes here.
+}
+
/** @type {import('tailwindcss').Config} */
module.exports = {
…
- maxWidth: ({ theme, breakpoints }) => ({
+ maxWidth: ({ theme }) => ({
none: 'none', |
Beta Was this translation helpful? Give feedback.
-
|
I was having a similar problem, but "Could not load the configuration file: e is not a function" and there's no "e" function in my config file, but after some testing, it was coming from the plugins I loaded (only used those three: @tailwindcss/typography, @tailwindcss/aspect-ratio, tailwindcss-multi-column) and removing them from the config let the upgrade tool do its thing without breaking, but it ended up saying in the end that it can't upgrade to css-only and added a @config line in my CSS to load the JS one and some compatibility CSS. That's fine with me, but then I tried running down the rabbit hole to see if I remove the stranger configurations I had and dig down what it takes for it to migrate fully without loading the JS and having this config prevents it to migrate: screens: {
'can-hover': { raw: '(hover: hover)' }
}And also, any kind of safelist config prevents it from moving on. safelist: [
{ pattern: /^bg-(transparent|current|white|black|yellow|red|silver|blue|gray|custom)/ },
]And also, any addVariant through the plugin function like it was done in earlier versions also prevents the complete migration. plugin(({
addVariant,
}) => {
addVariant('editor-styles-wrapper-only', '.editor-styles-wrapper &');
addVariant('group-focus-within', '.group:focus-within &');
addVariant('single-only', '.single &');
addVariant('group-not-hover', '.group-not:hover &:not(:hover)');
addVariant('blue', '.page.has-blue-background-color &');
})This one is not an issue since adding these with @custom-variant is pretty easy, but it's still strange to me that the migration tool doesn't handle these. I was using them in pretty simple form though, so maybe it's impossible to imply the correct value if using them with more options or complex combinations. But custom JavaScript generated values are fine and them function values such as |
Beta Was this translation helpful? Give feedback.
-
|
I have the same issue when my Tailwind config includes plugins, like so: import type { Config } from "tailwindcss";
export default {
darkMode: ["class"],
content: [
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
"./app/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {
...
},
},
plugins: [require("tailwindcss-animate"), require("tailwindcss-motion")],
} satisfies Config;Running the upgrade command gives me this error: Removing the plugins resolves the issue. |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
Hi 👋
I'm trying to upgrade tailwindcss from v3 to v4. When running the tool I get this error:
Does anyone have any idea what's happening?
3.4.114.2.2320.14.0This is my configuration file, it's basically the default config scaffolded using
npx tailwindcss init --full, with a couple of additions:tailwind.config.js
Beta Was this translation helpful? Give feedback.
All reactions