TailWind CSS Not Rendering in New Vite+React Project

[najmdevstudio]

What version of Tailwind CSS are you using?

v4.1.11

What build tool (or framework if it abstracts the build tool) are you using?

Vite 7.0.0

What version of Node.js are you using?

v23.11.0

What browser are you using?

Safari

What operating system are you using?

MacOS (AArch)

Reproduction URL

https://github.com/najmdevstudio/kaynatoonz

Describe your issue

When I run my Project, ppm run dev, tailwind css is not being deployed /visible

the "global.css" file Contents (Truncated) (File Available if needed for Reference):

import { createHotContext as __vite__createHotContext } from "/@vite/client";
import.meta.hot = __vite__createHotContext("/src/global.css");
import { updateStyle as __vite__updateStyle, removeStyle as __vite__removeStyle } from "/@vite/client"
const __vite__id = "/Users/najm/WebstormProjects/kaynatoonz/src/global.css"
const __vite__css = "/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n :root, :host {\n --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",\n "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";\n --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",\n "Courier New", monospace;\n --default-font-family: var(--font-sans);\n --default-mono-font-family: var(--font-mono);\n }\n}\n@layer base {\n *, ::after, ::before, ::backdrop, ::file-selector-button {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n border: 0 solid;\n }\n html, :host {\n line-height: 1.5;\n -webkit-text-size-adjust: 100%;\n tab-size: 4;\n font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");\n

[rozsazoltan]

Based on the GitHub repo, the issue can't be reproduced.

• https://stackblitz.com/github/najmdevstudio/kaynatoonz

I believe the problem might be with your system or browser. Which browser are you using? Keep in mind that TailwindCSS v4 has relatively high requirements.

• https://tailwindcss.com/docs/compatibility#browser-support

[najmdevstudio]

I have been using Safari Version 18.5 (20621.2.5.11.8) & Firefox 140.0.2 (aarch64) for testing

Below Screenshot from Safari

[rozsazoltan]

If your project directory wasn't originally a Git project, running the git init command might help resolve the issue.

[najmdevstudio]

sadly it didn't work, I'll try switching to my linux machine maybe...