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

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

Answer 2

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 3

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 4

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 5

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

Answer 6

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 7

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 8

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 9

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 10

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 11

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 12

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 13

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 14

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 15

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 16

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 17

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 18

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 19

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

Answer 20

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 21

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 22

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.

Answer 23

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 24

After trying everything for 2 hours, just running:

npm i [email protected]

worked for me.

Answer 25

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 26

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

Answer 27

Mine was created using create-next-app and i was missing a <main> tag in my page function.

Answer 28

In my next project styles were not applied only in src/pages directory. So I just hardcoded and added to every page.

import "tailwindcss/tailwind.css"

None of the above solutions not worked except this:

// src/pages/about.tsx
import "tailwindcss/tailwind.css";

Answer 29

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 30

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 31

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 32

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

npm install next@latest

Answer 33

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

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

Answer 34

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 35

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 36

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 37

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.