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

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';

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: ["./pages/*.{html,js,jsx}"],
  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: [],
}

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

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.

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: [],
};

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: [],
};

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.

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.

I had just migrated my app from CRA. 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

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

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

I think your setup is too big. You can achieve this with much simpler stuff nowdays.

First, I don't think CSS needs to be loaded into nextjs anymore and modules are supported natively. (So you can delete this withCSS stuff)

Second, tailwind doesn't need such elaborate setup anymore, if you are using the newer versions.

So you will need to install postcss-preset-env, but it does remove the need for big config now.

Check out this example https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss

I have experienced this too, but my solution was to edit the tailwind.connfig.js

Depending with the version

For version 2

module.exports = {
 purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
 theme: {
   extend: {},
 },
 variants: {
   extend: {},
 },
 plugins: [],
}

For version 3

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

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;

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

npm install next@latest

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

postcss.config.js

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

tailwind.config.js

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

global.css

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

Change import to tailwind styles in globals.css by

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

instead of

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

check if you import the globals.css file on _app.js file if it is not add this

import '../styles/globals.css'