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

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

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

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!

11 Answers

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

before

@import url('); @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 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.

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.

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

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

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

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

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

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;