Skip to content

Instantly share code, notes, and snippets.

@wesort
Last active August 29, 2025 12:24
Show Gist options
  • Save wesort/de4feab88bc68232ab6fe031e8c3b002 to your computer and use it in GitHub Desktop.
Save wesort/de4feab88bc68232ab6fe031e8c3b002 to your computer and use it in GitHub Desktop.
Tailwind v3 > v4 on a Statamic (v5) project

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment