next.js - NextJS not applying tailwind 4.0 - Stack Overflow|江阴雨辰互联

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>

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.

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744718610a4589772.html

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

2 Answers 2

Example

发表回复

评论列表（0条）

联系我们

400-800-8888

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

2 Answers 2

Example

相关推荐