https://tailwindcss.com/docs/upgrade-guide#using-the-upgrade-tool
Step 1. Change inmports any *.css file:
From:
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
To: @import 'tailwindcss';
Step 2. run upgrade tool: npx @tailwindcss/upgrade
(add --force
if not a clean repo)
Step 3. Update how PostCSS is used in postcss.config.js
From:
tailwindcss: {},
autoprefixer: {},
To: "@tailwindcss/postcss": {},
Step 4. Update to Tailwind's own vite plug
npm install @tailwindcss/vite
In vite.config.js
add:
import tailwindcss from "@tailwindcss/vite";
plugins: [
tailwindcss(),
// ... etc
]
Step 5. Migrate contents of tailwind.config.js
and then delete that file.
- Examples
--breakpoint-xs: 26rem;
--breakpoint-3xl: 122rem;
--color-custom-green: #6bb33e;
Step 6. Migrate bg-opacity-*
classes but changing to slash syntax: eg: bg-black/10
Final step (hopefully...) Test build: npm run build