next.js - NextJS not applying tailwind 4.0 - Stack Overflow

IT技术

更新时间：2025-04-155

admin管理员组
文章数量:1391951

I'm curious when I create next-app with tailwind 4.0 but I choose to not put app folder inside of src, when I use tailwind property in any element it will not applying style text-red-400, text-white, bg-red-400 nothing works but when I use something like text-2xl it worked! that made me so confused

So I tried to choose to put app folder inside of src, ok now I can change text color, text size, font. But still can't use other properties like bg-red-400, border-4.

please help

page.tsx

export default function Home() {
  return (
    <>
      <div className="flex justify-center items-center">
        <h1 className="text-3xl bg-red-400 font-bold">Home</h1>
      </div>
    </>
  );
}

package.json


{
  "name": "test-4",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "next": "15.2.2"
  },
  "devDependencies": {
    "typescript": "^5",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "@tailwindcss/postcss": "^4",
    "tailwindcss": "^4",
    "eslint": "^9",
    "eslint-config-next": "15.2.2",
    "@eslint/eslintrc": "^3"
  }
}

postcss.config.mjs

const config = {
  plugins: ["@tailwindcss/postcss"],
};

export default config;

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2017",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

global.css

@import "tailwindcss";

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
}

layout.tsx

import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});

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

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        {/* วาง Navbar ตรงนี้  */}
        {children}
      </body>
    </html>
  );
}

<script src="/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
@import "tailwindcss";

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
}
</style>

<div class="flex justify-center items-center">
  <h1 class="text-3xl bg-red-400 font-bold border-4">Home</h1>
</div>

I'm curious when I create next-app with tailwind 4.0 but I choose to not put app folder inside of src, when I use tailwind property in any element it will not applying style text-red-400, text-white, bg-red-400 nothing works but when I use something like text-2xl it worked! that made me so confused

So I tried to choose to put app folder inside of src, ok now I can change text color, text size, font. But still can't use other properties like bg-red-400, border-4.

please help

page.tsx

export default function Home() {
  return (
    <>
      <div className="flex justify-center items-center">
        <h1 className="text-3xl bg-red-400 font-bold">Home</h1>
      </div>
    </>
  );
}

package.json


{
  "name": "test-4",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "next": "15.2.2"
  },
  "devDependencies": {
    "typescript": "^5",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "@tailwindcss/postcss": "^4",
    "tailwindcss": "^4",
    "eslint": "^9",
    "eslint-config-next": "15.2.2",
    "@eslint/eslintrc": "^3"
  }
}

postcss.config.mjs

const config = {
  plugins: ["@tailwindcss/postcss"],
};

export default config;

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2017",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

global.css

@import "tailwindcss";

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
}

layout.tsx

import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});

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

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        {/* วาง Navbar ตรงนี้  */}
        {children}
      </body>
    </html>
  );
}

<script src="https://unpkg/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
@import "tailwindcss";

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
}
</style>

<div class="flex justify-center items-center">
  <h1 class="text-3xl bg-red-400 font-bold border-4">Home</h1>
</div>

Share Improve this question edited Mar 13 at 8:07 asked Mar 13 at 6:02 sahatwatz 33 bronze badges

Can you share your global.css? How to implement TailwindCSS v4 to CSS? – rozsazoltan Commented Mar 13 at 7:24
1 @rozsazoltan shared it – sahatwatz Commented Mar 13 at 7:31
I added an example to your code, but the issue is not reproducible with the provided code snippets. However, I still believe you are setting an overly strong rule for the given CSS property. For example, you might be forcing a background color too strongly, preventing bg-red-400 from overriding it. – rozsazoltan Commented Mar 13 at 7:39

Add a comment |

2 Answers 2

Sorted by: Reset to default 0

You made the default style in global.css too strong. From TailwindCSS v4, it places its own styles under layers and assigns different levels of specificity to them. Put the default style under @layer base like this:

@layer base {
  body {
    background: var(--background);
    color: var(--foreground);
    font-family: Arial, Helvetica, sans-serif;
  }
}

Example

I simplified your CSS code a bit to illustrate the difference between using @layer and not using it.

<script src="https://unpkg/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
@layer base {
  h1 {
    color: #171717;
  }
}
</style>

<h1 class="text-blue-500">
  text-blue-500 is stronger
</h1>

Without @layer base:

h1 {
  color: #171717;
}

<script src="https://unpkg/@tailwindcss/browser@4"></script>

<h1 class="text-blue-500">
  text-blue-500 is not stronger<br>
  Tailwind CSS rules will not be stronger than rules outside their own @layer
</h1>

Now my tailwind working, but I still not understand that much

here's what I've done:

changed path in tsconfig.json from this:

"paths": {
      "@/*": ["./src/*"]
    }

to this:

"paths": {
      "@/*": ["./*"]
    }

that solved my problem all tailwind styled works perfectly fine.

In the end I still confused why I got issues. I follow every steps and the code exactly the same from NextJs Tutorial.

本文标签： nextjsNextJS not applying tailwind 40Stack Overflow

版权声明：本文标题：next.js - NextJS not applying tailwind 4.0 - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.betaflare.com/web/1744718609a2621557.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

编程频道|软件玩家 - 软件改变生活！

next.js - NextJS not applying tailwind 4.0 - Stack Overflow

2 Answers 2

Example

更多相关文章