TailwindCSS not working on Next.js 13 (with app folder)

1.4k Views Asked by Alex S. At 14 April 2023 at 00:20

I've installed the latest version of of tailwindcss, but when I run the command "npm run dev", tailwind does not change anything but the fonts.

My tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

The postcss.config.js:

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

package.json file:

{
  "name": "next-authex1dot1",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "animal-avatar-generator": "^1.1.0",
    "axios": "^1.3.4",
    "bcryptjs": "^2.4.3",
    "eslint": "8.37.0",
    "eslint-config-next": "13.2.4",
    "http-errors": "^2.0.0",
    "lodash": "^4.17.21",
    "mongoose": "^7.0.3",
    "next": "13.2.4",
    "next-auth": "^4.20.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "swr": "^2.1.2",
    "validator": "^13.9.0"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.14",
    "concurrently": "^8.0.1",
    "postcss": "^8.4.21",
    "tailwindcss": "^3.3.1"
  }
}

./app/globals.css file:

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

layout.js file:

"use client"

import "./globals.css";
import  NavBar  from "./components/navbar/NavBar";
import { SessionProvider } from "next-auth/react";


export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <SessionProvider>
          <NavBar />
          {children}
        </SessionProvider>
      </body>
    </html>
  );
}

then, in ./app/page.jsx (which is my homepage):

export default function HomePage() {
  return (
    <div className="container">
      <h1>Welcome</h1>
      <h1 className="text-2xl underline">
      Hello world!
    </h1>
    </div>
  );
}

It only changes the font, but does not do what it's supposed to do in h1 className, as seen in ss below:

Thanks in advance.

Original Q&A

There are 2 best solutions below

Yilmaz On 14 April 2023 at 01:44

From docs

Use the @tailwind directive to insert Tailwind’s base, components, utilities and variants styles into your CSS.

in globals.css, you should have

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

Gabriel Cervantes On 02 August 2023 at 00:12

Inside tailwind.config.js, add paths to the files that will use Tailwind CSS class names:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}', // Note the addition of the `app` directory.
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
 
    // Or if using `src` directory:
    './src/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

from Nextjs 13 - Tailwind

TailwindCSS not working on Next.js 13 (with app folder)

There are 2 best solutions below

Related Questions in REACTJS

Related Questions in NEXT.JS

Related Questions in TAILWIND-CSS

Related Questions in PACKAGE.JSON

Related Questions in APP-FOLDER

Trending Questions

Popular # Hahtags

Popular Questions