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

Question

For some reason, tailwind is not rendering properly in next.js.

I'm wondering if something is wrong with my settings?

Styles folder - tailwind.css

@tailwind base;

/* Write your own custom base styles here */

/* Start purging... */
@tailwind components;
/* Stop purging. */

/* Write you own custom component styles here */
.btn-blue {
  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
}

/* Start purging... */
@tailwind utilities;
/* Stop purging. */

/* Your own custom utilities */

....

_app.js

import React from "react";
// import "styles/global.scss";


import 'styles/tailwind.css'


import NavbarCustom from "components/Layout/NavbarCustom";
import Footer from "components/Layout/Footer";
import "util/analytics.js";
import { ProvideAuth } from "util/auth.js";

function MyApp({ Component, pageProps }) {
  return (
    <ProvideAuth>
      <>
        <NavbarCustom
          bg="white"
          variant="light"
          expand="md"
          logo="icons/Logo_512px.png"
        />

        <Component {...pageProps} />

What am I doing wrong? so confused, usually this sort of setup is fine.

This is the site btw - https://moodmap.app/ .

using the information below, made changes and still same issue weirdly.

https://moodmap.app/ is the site example.

tailwind.config.js

module.exports = {
  future: {
    removeDeprecatedGapUtilities: true,
  },
  purge: ['./components/**/*.{js,ts,jsx,tsx}', './pages/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        'accent-1': '#333',
      },
    },
  },
  variants: {},
  plugins: [],
}

postcss.config.js

module.exports = {
    plugins: [
      'tailwindcss',
      'postcss-flexbugs-fixes',
      [
        'postcss-preset-env',
        {
          autoprefixer: {
            flexbox: 'no-2009',
          },
          stage: 3,
          features: {
            'custom-properties': false,
          },
        },
      ],
    ],
  }

{
  "name": "MoodMap",
  "version": "0.1.0",
  "private": true,
  "keywords": [
    "MoodMap"
  ],
  "dependencies": {
    "@analytics/google-analytics": "0.2.2",
    "@stripe/stripe-js": "^1.5.0",
    "analytics": "0.3.1",
    "fake-auth": "0.1.7",
    "mailchimp-api-v3": "1.13.1",
    "next": "9.5.3",
    "query-string": "6.9.0",
    "raw-body": "^2.4.1",
    "rc-year-calendar": "^1.0.2",
    "react": "16.12.0",
    "react-dom": "16.12.0",
    "react-hook-form": "4.10.1",
    "react-query": "2.12.1",
    "react-transition-group": "^4.4.1",
    "stripe": "^8.52.0"
  },
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "stripe-webhook": "stripe listen --forward-to localhost:3000/api/stripe-webhook"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "postcss-flexbugs-fixes": "^4.2.1",
    "postcss-preset-env": "^6.7.0",
    "stylelint": "^13.7.1",
    "stylelint-config-standard": "^20.0.0",
    "tailwindcss": "^1.8.9"
  }
}

Thanks!

Answer 1

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

Answer 2

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.

Answer 3

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

Answer 4

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.

Answer 5

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

Answer 6

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

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

Answer 7

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

Answer 8

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

Answer 9

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.

Answer 10

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: {},
  },
}

Answer 11

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}",
]

Answer 12

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

Answer 13

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

Answer 14

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.

Answer 15

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

Answer 16

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.

Answer 17

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).

Answer 18

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

npm install next@latest

Answer 19

After trying everything for 2 hours, just running:

npm i tailwindcss@3.0.0

worked for me.

Answer 20

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.

Answer 21

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;

Answer 22

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

Answer 23

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

<!-- You have to add paths to folders in which you are using 
   tailwindcss in the tailwind.config.js file -->

<!-- Example: I add './containers/**/*.{js,ts,jsx,tsx}' to the "content"-->

Answer 24

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

Answer 25

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;

Answer 26

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

Answer 27

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. :)

Answer 28

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 :)

Answer 29

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.

Answer 30

In case anyone is migrating to Tailwind from another UI library like UIkit, make sure all the previous css file imports are removed from _app.tsx.

Answer 31

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

Answer 32

I couldn't use tailwind because the folder name contains "[ ]". I fixed the problem by simplifying the folder name.

Answer 33

Now it is by default supported by create-next-app

npx create-next-app@latest

On installation, you'll see the following prompts

What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias? No / Yes

Use Yes for tailwind CSS

Answer 34

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