Tailwindcss not working with next.js; what is wrong with the configuration?

For devs that created their project with nextJS.

be aware that the content of the tailwind.config.js needs the correct paths to the files.

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

For example, if you create a project with nextjs for example, you have a pages folder, where your index.js file is located. Therefore the code snippet (see below) on https://tailwindcss.com/docs/installation/using-postcss is not perfectly matching. Change it to the above or your own liking.

module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

In my case, I had set up the Tailwind config file correctly, but tailwind styles were not applying. Deleting the .next folder and running next dev helped.

The same issue with my project, but I try to change the globals.css like this:

before

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900');

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

after

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import './base.css';
@import 'tailwindcss/utilities';

I followed the official tutorial to install TailwindCSS into my NextJS app from here — https://tailwindcss.com/docs/guides/nextjs - but still couldn't get things working.

It turns out that I had forgotten to import global.css into my main app file.

Adding -

import "../styles/globals.css";

into _app.tsx solved it for me.

For me the solution was adding ./src/... to content sources in tailwind.config.js. Official Next.JS + Tailwindcss example doesn't support src folder.

Importing like this in the global.css resolved the issue for me:

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

For anyone coming to this in 2023, and none of the above solutions work, it might sound obvious, but you need to make sure you have a postcss.config.js file, even if it's just empty, in your Next.js app.

If you don't, the styles won't run. I spent a little while trying to figure this out, including deleting build folders etc.

If you follow the docs, you should have one already, but if you don't (or accidentally deleted it), you can either run this in your terminal:

npx tailwindcss init -p 

Important note about running init command above - it will overwrite your tailwind config. Make sure you take a copy of it before running the above.

Or just create a postcss.config.js file in the root of your directory with following content:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

One of my projects had those package versions installed

"next": "11.1.0",
"autoprefixer": "^10.3.3",
"postcss": "^8.3.6",
"tailwindcss": "^2.2.8"

this setting in tailwind.config.js was working:

module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
};

Recently I started a new project with these packages:

"next": "12.0.8",
"autoprefixer": "^10.4.2",
"postcss": "^8.4.5",
"tailwindcss": "^3.0.15"

The previous config setting was not working. So I changed it to :

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

I got mine to work in the weirdest way after hours of fiddling with it; I just added a class to an element in one of my components and then wrote custom CSS for that class in the global.css file, then all tailwinds classes reflected. This might be a bug in tailwind's code that they need to trace and fix.

For people who are still having an issue with following versions:

"autoprefixer": "^10.4.7",
"postcss": "^8.4.13",
"tailwindcss": "^3.0.24",

in a Nx + Next.js environment, you can simply use following config files:

// postcss.config.js
const { join } = require('path');

module.exports = {
  plugins: {
    tailwindcss: {
      config: join(__dirname, 'tailwind.config.js'),
    },
    autoprefixer: {},
  },
};

// tailwind.config.js
const { join } = require('path');

module.exports = {
  content: [
    join(__dirname, './pages/**/*.{js,ts,jsx,tsx}'),
    join(__dirname, './src/**/*.{js,ts,jsx,tsx}'),
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

The issue for me was with a 'create-next-app' I did not have /pages/_app.js and therefore the global.css was not parsed.

Creating /pages/_app.js with the following content resolved the issue

import '../styles/globals.css'

// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

See https://nextjs.org/docs/basic-features/built-in-css-support

I had just migrated my app from CRA to create-next-app. so my CRA App had a folder named features and under it was a folder for each feature was its Redux slicer and componentes, etc.

What solved it for me is to include the features folder in tailwind.config.js:

before:

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

after

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

Add a _app.js file inside pages folder then add this code. The globals.css path should be correct.

import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

The problem for me was creating the application via npx create-next-app@latest and opting in for the new src folder structure:

? Would you like to use `src/` directory with this project? › No / Yes

If you select Yes, the following addition is required to the tailwind.config.js file:

module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

After trying everything in this question, what worked was updating nextjs:

npm install next@latest

This doesn't sound like a sane person's solution, but my solution came down to simply editing globals.css. There is nothing more specific about the solution to share.

I started with a completely fresh Next.js project and followed instructions to add Tailwind CSS. I tried all the solutions listed in this project.

• Used the example Next.js project creation script (worked)
• Copied and pasted each file from the example project
• Used the exact same versions
• Deleted .next and reinstalled all packages
• Used a variety of different ways to include Tailwind.

But the precise solution was this: I cut the contents of globals.css such that it only included the @tailwind directives (and some font @import directives above it), which suddenly activated Tailwind CSS. Pasting what I had just cut out maintained this newfound 'working' state.

I don't know how this could be, as there shouldn't be anything cached (I deleted the .next build folder) and I had been editing globals.css for other purposes (but I had not touched anything other than the tailwind-related directives). It's very mysterious and very annoying.

I hope this might save someone else from tearing their hair out.

Follow the official guide to install Tailwind.

https://tailwindcss.com/docs/guides/nextjs

If it still doesn't work, delete node_modules and package-lock.json, then run

npm i

again.

I just passed from Pages Router router to App Router.

In Pages Router Tailwindcss was asking to add this directive in tailwind.config.js when working on a NextJs project: important: "#__next" because the root node from the Nextjs app had an id of __next.

Please consider removing the important directive, from tailwind.config.js when working on NextJs App Router.

In _app.js add this line:

import "../styles/globals.css";

Replace code of tailwind.config.js with this:

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

For me tailwindcss broke as soon as I opened the (Chrome) Dev Tools while using next dev --turbopack.

Using it without --turbopack fixed this problem.

I had an issue – tailwind styles were applied only after:

1. Deleting .next folder
2. Running npm run dev after
3. For new styles repeat (1) and (2)

After some hours of debugging I found out that the problem is next.config.

For who is using TS, must use next.config.ts not next.config.js or next.config.mjs.

I had the same issue in some files.

After removing all inline tailwind classes and putting them in CSS files with @apply it works well.

Another simple potential cause is a misspelt components / pages folder - make sure they're spelt correctly.

I just experienced this. I think, my main problem was 'missing postcss file config' because I do tailwind initialization with npx tailwind init, not npx tailwind init -p (which also generate postcss fileconfig).

Another solution so that you can fix the problem in next js is this

in the tailwind.config.js add this configuration:

/** @type {import('tailwindcss').Config} */
module.exports = {
  purge: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  subject: {
    extend: {},
  },
  plugins: [require("@tailwindcss/typography"),require('@tailwindcss/forms'),],
  
};

and in postcss.config.js

module.exports = {
  plugins: ['tailwindcss','postcss-preset-env'],
};

lastly in the next js config you will add this to make it work for you.

/** @type {import('next').NextConfig} */
const nextConfig = {
  swcMinify: true,
  reactStrictMode: true,
  experimental: {
    concurrentFeatures: false, // <- Set this option to false.
    serverComponents: true,
  },
}

module.exports = nextConfig

and you need creating in styles and adding the style in global.css

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

I have just re-installed my Next.js project and went with Tailwind's guide and it worked!

Documentation: https://v2.tailwindcss.com/docs/guides/nextjs

After trying everything for 2 hours, just running:

npm i [email protected]

worked for me.

for me what was wrong that I unknowingly put spaces in regex. so my code became-

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

and this was what causing error. so I again copy pasted from official website. to make it look like

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

I know it was a silly mistake but sometimes you do it unintentionally. :)

My issue was that I did not follow the set up steps properly. I forgot to run npx tailwind init which was the cause of my troubles. I created the tailwind.config.js but forgot to create proper postcss.config.js.

P/S: Make sure the content is pointing to the files you want covered, if its pointing to pages and components while you are using src file structure, tailwind will not work,

Happy coding :)

I struggled with this for 3 days. Turns out the main css file was called globals.css instead of globals.scss. You must use SASS instead of regular CSS because the @tailwind annotation only works in SASS.