Posted by: Stewart Roberts

Date: Tue Mar 15 2022

Fixing Tailwind CSS v4 in Next.js

with postcss.config.mjs and @import "tailwindcss"

The Problem

After installing Tailwind CSS v4 and updating dependencies, my project compiled — but none of the Tailwind styles applied. I checked everything: class names were correct, files were imported… still no Tailwind.

The issue turned out to be how Tailwind v4 now expects PostCSS to be configured, and what you include in your CSS file.

The Fix

Here’s how to get it working:

1. Use the correct import in globals.css

Make sure your main CSS file (e.g. app/globals.css) contains:

@import"tailwindcss";

Just that one line. Not @tailwind base, components, or utilities — those are now handled by the plugin.

2. Update your postcss.config.mjs

Tailwind v4 expects to be run as a full plugin rather than using the tailwindcss package directly.

export default {
plugins: {
"@tailwindcss/postcss": {},},
};

Yes — the plugin is now named @tailwindcss/postcss, not just tailwindcss.

If you’re using .cjs instead of .mjs, make sure the syntax reflects that (i.e., use module.exports = {}).

Bonus

If you are using tailwind.config.ts, Ensure your Tailwind config is properly exporting, e.g.:

import type { Config } from "tailwindcss";

const config: Config = {
content: [
"./app/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],

};

export default config;

Final Thoughts

Tailwind CSS v4 simplifies a lot, but it does assume a newer plugin structure that might trip you up if you’re upgrading from v3 or using a starter template. Once your @import and PostCSS plugin are sorted, everything falls back into place — and your styles will compile beautifully.