javascript - Tailwind Styles are apparently not getting applied in my Next.js Project

I was coding along a Next.js tutorial project and noticed that my project was quite off...I figured it was my tailwind styles that weren't getting applied for whatever reason, tried tweaking the 'tailwind.config.js' a bit but nothing seemed to work.

I then tried creating a new Next project entirely with create-next-app@latest and straight up ran it with npm run dev -- I left all the code unedited/as they came.

I was expecting to get something like this: The normal boilerplate "Get Started" page for Next.js

but I got this instead: How the default "Get Started" page for Next.js looks on my pc.

So I'm kinda stumped at this point...I don't what else to do on my part.

Here's my 'tailwind.config.js' file:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
        'gradient-conic':
          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
      },
    },
  },
  plugins: [],
}

My 'globals.css' file:

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

:root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 0, 0, 0;
    --background-end-rgb: 0, 0, 0;
  }
}

body {
  color: rgb(var(--foreground-rgb));
  background: linear-gradient(
      to bottom,
      transparent,
      rgb(var(--background-end-rgb))
    )
    rgb(var(--background-start-rgb));
}

and my 'package.json' file:

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@types/node": "20.4.5",
    "@types/react": "18.2.18",
    "@types/react-dom": "18.2.7",
    "autoprefixer": "10.4.14",
    "next": "13.4.12",
    "postcss": "8.4.27",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "tailwindcss": "3.3.3",
    "typescript": "5.1.6"
  }
}

My 'layout.tsx' file:

import './globals.css'
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  )
}

Thanks for helping out!

I then tried creating a new Next project entirely with create-next-app@latest and straight up ran it with npm run dev -- I left all the code unedited/as they came.

I was expecting to get something like this: The normal boilerplate "Get Started" page for Next.js

but I got this instead: How the default "Get Started" page for Next.js looks on my pc.

So I'm kinda stumped at this point...I don't what else to do on my part.

Here's my 'tailwind.config.js' file:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
        'gradient-conic':
          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
      },
    },
  },
  plugins: [],
}

My 'globals.css' file:

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

:root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 0, 0, 0;
    --background-end-rgb: 0, 0, 0;
  }
}

body {
  color: rgb(var(--foreground-rgb));
  background: linear-gradient(
      to bottom,
      transparent,
      rgb(var(--background-end-rgb))
    )
    rgb(var(--background-start-rgb));
}

and my 'package.json' file:

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@types/node": "20.4.5",
    "@types/react": "18.2.18",
    "@types/react-dom": "18.2.7",
    "autoprefixer": "10.4.14",
    "next": "13.4.12",
    "postcss": "8.4.27",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "tailwindcss": "3.3.3",
    "typescript": "5.1.6"
  }
}

My 'layout.tsx' file:

import './globals.css'
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  )
}

Thanks for helping out!

Share Improve this question edited Aug 4, 2023 at 14:32 asked Aug 2, 2023 at 0:15 pixl 811 gold badge1 silver badge4 bronze badges

Add a comment |

6 Answers 6

Sorted by: Reset to default 6

First check your package.json to see if tailwindcss, postcss and autoprefixer are installed. If not , let's install them :

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Then check the paths in content in your tailwin.config.js and make sure they are like this :

content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
     ],

Or like this if you are using src directory:

content: [
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ],

Then add tailwind directives to your css file, usually global.css :

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

And now run npm run dev, hopefully everything thing should work as expected.

I can think of 2 reasons why Tailwind styles might not be working. The first thing you should check is if the Tailwind style sheet is being included in the <head> of your page document.

If the style sheet does not appear or is empty on your website, then you should check:

Have you included the tailwind directives in your global.css file?

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

Are you running the tailwindcss watch process to include used utility classes in the stylesheet?

yarn tailwindcss:build --watch

I hope it helps

I added all the dev dependencies to dependencies and it worked. Also, make sure global css is imported in layout.js

Using a combination of Next@15 and React@19 in an SSR-oriented application, I've noticed certain classes are not bundled in build time. Digging deeper into the reasons, I've noticed it happened when these CSS classes were added dynamically, such as:

const status = props.active ? 'bg-green-200' : 'bg-slate-200';
<td onClick={handleClick.bind(this, myAction)} className={'border border-black hover:opacity-100 hover:shadow-md ' + status}>

Notice specifically this part: className={'border border-black hover:opacity-100 hover:shadow-md ' + status}. It conditionally adds Tailwind's classes bg-green-200 and bg-slate-200.

However, after rendering it does not apply the background color as expected, unless there's a statically rendered element that uses that class, such as <div className="bg-green-200">...</div>. As a matter of fact, my first solution was to track the dynamically added classes and add a hidden statically-rendered div with these classes to my code:

<div className="hidden opacity-70 opacity-90 opacity-100 bg-slate-200 bg-green-200 text-slate-600 text-green-600"></div>

By doing so, you may notice the classes were magically added to the bundle. I suppose this is a NextJS + Tailwind optimization process, where CSS classes that are not explicitly declared are not included in the build, perhaps to reduce the produced bundle size.

When looking for possible solutions, I've found this answer which uses tailwind.config.ts to provide the dynamically rendered Tailwind classes without having to declare a static HTML element.

https://nextjs.org/learn/dashboard-app/css-styling#global-styles

One step is missing: check out if you imported global styles in app/layout.tsx file

As @hunter-xu and @shrenik-deep posted, it was caused by not import globals.css because variables were not loaded, and tailwind couldn't identify them. After importing it, issue was resolved

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Tailwind Styles are apparently not getting applied in my Next.js Project - Stack Overflow

6 Answers 6

与本文相关的文章

评论列表(0)