How can i apply tailwind css in app folder in Next 13

Question

Tailwind CSS is not applying to the app folder in the next.js v13, but it is working on the Pages and Components folder. In the tailwind.config file, I have added

However, no CSS is being applied to components in app folder!

content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
    "./app/**/*.{js,ts,jsx,tsx}",
],

Answer 1

try to check the following: (works for me)

• in next.config.js

set experimental.appDir: true to enable app directory feature

const nextConfig = {
  experimental: {
    appDir: true,
  },
}

• in tailwind.config.js

module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  ...
}

• in ./app/globals.css

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

• in ./app/layout.tsx

import css in layout => works fine

import css in page => not working

import './globals.css';
...

Answer 2

Had the same problem.

I moved globals.css from /app to /styles, and then import in app/layout.tsx.

Now works fine.