I have a fairly large svelte kit tailwind project.
I updated all deps to latest, including tailwind. My current deps are as follows:
"devDependencies": {
"@playwright/test": "^1.56.1",
"@sveltejs/adapter-netlify": "^5.2.4",
"@sveltejs/adapter-static": "^3.0.10",
"@sveltejs/kit": "^2.49.0",
"@sveltejs/vite-plugin-svelte": "^6.2.1",
"@tailwindcss/postcss": "^4.1.17",
"@tauri-apps/api": "^2.9.0",
"@tauri-apps/cli": "^2.9.4",
"@types/gtag.js": "^0.0.20",
"@types/suncalc": "^1.9.2",
"@typescript-eslint/eslint-plugin": "^8.47.0",
"@typescript-eslint/parser": "^8.47.0",
"@vitest/coverage-v8": "^4.0.13",
"autoprefixer": "^10.4.22",
"eslint": "^9.39.1",
"eslint-config-prettier": "^10.1.8",
"eslint-plugin-import": "^2.32.0",
"eslint-plugin-prettier": "^5.5.4",
"eslint-plugin-svelte": "^3.13.0",
"globals": "^16.5.0",
"lighthouse": "^13.0.1",
"postcss": "^8.5.6",
"postcss-load-config": "^6.0.1",
"prettier": "^3.6.2",
"prettier-plugin-organize-imports": "^4.3.0",
"prettier-plugin-svelte": "^3.4.0",
"prettier-plugin-tailwindcss": "^0.7.1",
"puppeteer": "^24.31.0",
"pwa-asset-generator": "^8.1.2",
"svelte": "^5.43.14",
"svelte-check": "^4.3.4",
"svelte-preprocess": "^6.0.3",
"typescript": "^5.9.3",
"vite": "^7.2.4",
"vitest": "^4.0.13"
},
"dependencies": {
"dayjs": "^1.11.19",
"lz-string": "^1.5.0",
"screenfull": "^6.0.2",
"suncalc": "^1.9.0",
"tailwind-merge": "^3.4.0",
"tailwind-variants": "^3.2.2",
"tailwindcss": "^4.1.17"
},
I ran pnpm update and then added ^ before all depsn and ran pnpm i manually again.
My previous lib/css/app.postcss was:
@import 'focus.css';
@import 'fonts.css';
@import 'input.css';
@import 'pitchBlack.css';
@import 'scrollbar.css';
@import 'surface.css';
@import 'table.css';
@import 'typography.css';
@tailwind base;
@tailwind components;
@tailwind utilities;
I have since updated it to:
@config "../../../tailwind.config.cjs";
@import './focus.css';
@import './fonts.css';
@import './input.css';
@import './pitchBlack.css';
@import './scrollbar.css';
@import './surface.css';
@import './table.css';
@import './typography.css';
@tailwind base;
@tailwind components;
@tailwind utilities;
I also tried @import "tailwindcss"; which seems redundant of the @tailwind lines for now. I want to fix this with the minimal possible code diff.
My postcss.config.cjs was:
plugins: {
'tailwindcss/nesting': {},
'tailwindcss': {},
'autoprefixer': {}
}
And I chagned it to:
plugins: {
'@tailwindcss/postcss': {},
},
The latest errors I am stuck on are the following:
[plugin:vite-plugin-svelte:preprocess] Error while preprocessing C:/Users/User/Documents/GitHub/desktopclock/src/lib/components/layout/Nav.svelte - tailwindcss: C:/Users/User/Documents/GitHub/desktopclock/src/lib/components/layout/Nav.svelte:1:1: Cannot apply unknown utility class `font-normal`. Are you using CSS modules or similar and missing `@reference`? https://tailwindcss.com/docs/functions-and-directives#reference-directive
When I add
@reference "../../css/app.postcss";
to my Nav.svelte, then I get the following error:
[plugin:vite-plugin-svelte:preprocess] Error while preprocessing C:/Users/User/Documents/GitHub/desktopclock/src/lib/components/layout/Nav.svelte - tailwindcss: C:/Users/User/Documents/GitHub/desktopclock/src/lib/components/layout/Nav.svelte:1:1: Cannot apply unknown utility class `bg-base-300`
I have custom base and accent palettes used across my app. My tailwind config is as follows:
const plugin = require('tailwindcss/plugin');
const colors = require('tailwindcss/colors');
// https://stackoverflow.com/a/70480061/4907950
// https://github.com/adamwathan/tailwind-css-variable-text-opacity-demo
function withOpacity(cssVariable) {
return ({ opacityVariable, opacityValue }) => {
if (opacityValue !== undefined) {
return `rgba(var(${cssVariable}), ${opacityValue})`;
}
if (opacityVariable !== undefined) {
return `rgba(var(${cssVariable}), var(${opacityVariable}, 1))`;
}
return `rgb(var(${cssVariable}))`;
};
}
const dynamicColors = ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900'].reduce(
(obj, item) => ({
...obj,
[`base-${item}`]: withOpacity(`--base-${item}`),
[`accent-${item}`]: withOpacity(`--accent-${item}`)
}),
{}
);
module.exports = {
content: ['./src/**/*.{html,js,svelte,ts}'],
safelist: ['dark'],
darkMode: null,
theme: {
borderRadius: {
none: '0',
DEFAULT: '0.5rem',
full: '9999px'
},
boxShadow: {
// xs: '0 1px 2px 0 rgba(0,0,0,.05)',
// sm: '0 1px 4px 0 rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.1)',
md: '0 4px 6px 0 rgba(0,0,0,.1), 0 2px 4px rgba(0,0,0,.1)'
// lg: '0 16px 24px 0 rgba(0,0,0,.1), 0 4px 6px rgba(0,0,0,.1)'
},
colors: {
white: '#FFF',
black: '#000',
transparent: 'transparent',
red: {
// Used for skin tones in vector art
200: colors.red[200]
},
...dynamicColors
},
spacing: {
0: '0',
1: '0.25rem',
2: '0.5rem',
4: '1rem',
6: '1.5rem',
10: '2.5rem',
12: '3rem', // toggles, large btn
16: '4rem',
24: '6rem',
32: '8rem',
48: '12rem',
64: '16rem',
80: '20rem',
96: '24rem'
},
transitionDuration: {
125: '125ms',
250: '250ms',
DEFAULT: '250ms'
},
transitionTimingFunction: {
DEFAULT: 'linear'
},
extend: {
fontSize: {
'10xl': '10rem',
'11xl': '12rem'
// '12xl': '16rem',
// '13xl': '20rem'
},
screens: {
short: { raw: '(max-height: 360px)' }
}
}
},
plugins: [
plugin(function ({ addUtilities, addVariant }) {
addUtilities({
'.drag-none': {
'-webkit-user-drag': 'none',
'-khtml-user-drag': 'none',
'-moz-user-drag': 'none',
'-o-user-drag': 'none',
'user-drag': 'none'
}
});
// Ignore dark mode during print
addVariant('dark', '@media not print { .dark & }');
})
]
};
I've spent several hours on this (and I've used tailwind 3 on dozens of projects and tailwind 4 on dozens of projects with zero issues) and I cannot seem to solve it.
I do not want to move everything over, and I do not want to add an @reference line to hundreds of files. However, if that is the only option, I will be forced to do it. Based on this answer it seems like I will be forced to do both. I thought there was an easy one line command to just use the old config for now. Out of all my dependency updates, this has been by far the hardest and most painful.
What is the simplest, easiest, most minimal diff way to simply update from tailwind 3 to 4?