TSUREZURE
issues

Tailwind CSS Configuration Issue

Mar 24, 2025

About

This article describes the issue "Tailwind CSS was not compiled correctly" that I encountered while creating my tech blog site.

Situation

I created a Next.js app with the following tech stack, consulting with GPT-4:

1. Install Packages

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

2. Create tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/app/**/*.{js,ts,jsx,tsx}",
    "./src/components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

3. Create global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

4. Import global.css in app/layout.tsx

import "./globals.css";

export const metadata = {
  title: "Your App Title",
  description: "Your App Description",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

Issue

When using the Tailwind style "mb-20" in the child page (app/page.tsx), the following statement was not included in the compiled file (.next/static/css/app/page.css):

.mb-20 {
  margin-bottom: calc(var(--spacing) * 20);
}

Solution

The issue was caused by incorrect configuration. For Tailwind CSS v4.0.0 and above, it should be installed as a plugin using Vite or postcss. reference : https://tailwindcss.com/docs/installation/using-postcss In my case, I resolved the issue by following these steps:

  1. Ensure PostCSS is properly configured with postcss.config.js.
  2. Verify that Tailwind CSS are listed as PostCSS plugins in postcss.config.js. （tailwind.config.js seems not neccesaary.）
export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

Conclusion

  • Prioritize official documentation
  • Always specify plugin versions when consulting with GPT or other AI assistants

References