Tailwindcss 不适用于 next.js； 配置有什么问题？

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

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 3

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 4

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 5

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

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

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 11

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 12

 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 13

另一个简单的潜在原因是组件/页面文件夹拼写错误 - 确保它们拼写正确。

Answer 14

I just experienced this. I think, my main problem was tailwind innitialization with npx tailwind init , not npx tailwind init -p (which also generate postcss fileconfig).

Answer 15

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 16

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

Answer 17

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 18

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

npm install next@latest

Answer 19

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

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

Answer 20

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;

Answer 21

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

import '../styles/globals.css'

Answer 22

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 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 tailwindcss@3.0.0

worked for me.

Answer 25

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 26

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 27

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 28

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;