reactjs - @theme in React.ts project, in index.css file not recognized - Stack Overflow

admin管理员组

文章数量:1287220

I am starting out with react.ts + tailwind with vite so this may be a stupid question, but I have trouble finding answers since the version 4 of Tailwind. Well, I am trying to define @theme in index.css. I am looking at it in tailwind docs and looking on some vids, but no solution find. Copilot never heard about tailwind v4. I think it is some total rookie mistake:{

Other things defined in index.css works like :root etc.

index.css

@import "tailwindcss";

:root {
    font-family: dm-sans, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-gray-100);
    background-color: var(--color-gray-800);
}

@theme {
    --breakpoint-*: initial;
    --breakpoint-sm: 480px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 976px;

    --color-gray-100: #f5f5f5;
    --color-gray-200: #e0e0e0;
}

package.json

{
  "name": "app-youtube",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
    "@tailwindcss/vite": "^4.0.8",
    "class-variance-authority": "^0.7.1",
    "lucide-react": "^0.475.0",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "tailwind-merge": "^3.0.2",
    "tailwindcss": "^4.0.8"
  },
  "devDependencies": {
    "@eslint/js": "^9.19.0",
    "@types/react": "^19.0.8",
    "@types/react-dom": "^19.0.3",
    "@vitejs/plugin-react": "^4.3.4",
    "eslint": "^9.19.0",
    "eslint-plugin-react-hooks": "^5.0.0",
    "eslint-plugin-react-refresh": "^0.4.18",
    "globals": "^15.14.0",
    "typescript": "~5.7.2",
    "typescript-eslint": "^8.22.0",
    "vite": "^6.1.0"
  },
  "require": {
    "esbuild": "0.25.0"
  }
}

vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

// /config/
export default defineConfig({
  plugins: [
    react(),
    tailwindcss(),
  ],
})

I am starting out with react.ts + tailwind with vite so this may be a stupid question, but I have trouble finding answers since the version 4 of Tailwind. Well, I am trying to define @theme in index.css. I am looking at it in tailwind docs and looking on some vids, but no solution find. Copilot never heard about tailwind v4. I think it is some total rookie mistake:{

Other things defined in index.css works like :root etc.

index.css

@import "tailwindcss";

:root {
    font-family: dm-sans, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-gray-100);
    background-color: var(--color-gray-800);
}

@theme {
    --breakpoint-*: initial;
    --breakpoint-sm: 480px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 976px;

    --color-gray-100: #f5f5f5;
    --color-gray-200: #e0e0e0;
}

package.json

{
  "name": "app-youtube",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
    "@tailwindcss/vite": "^4.0.8",
    "class-variance-authority": "^0.7.1",
    "lucide-react": "^0.475.0",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "tailwind-merge": "^3.0.2",
    "tailwindcss": "^4.0.8"
  },
  "devDependencies": {
    "@eslint/js": "^9.19.0",
    "@types/react": "^19.0.8",
    "@types/react-dom": "^19.0.3",
    "@vitejs/plugin-react": "^4.3.4",
    "eslint": "^9.19.0",
    "eslint-plugin-react-hooks": "^5.0.0",
    "eslint-plugin-react-refresh": "^0.4.18",
    "globals": "^15.14.0",
    "typescript": "~5.7.2",
    "typescript-eslint": "^8.22.0",
    "vite": "^6.1.0"
  },
  "require": {
    "esbuild": "0.25.0"
  }
}

vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    react(),
    tailwindcss(),
  ],
})

• reactjs
• typescript
• tailwind-css
• vite

Share Improve this question Follow asked Feb 23 at 23:32 markCos0markCos0 133 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Solution

Placing the tailwindcss() plugin earlier in your vite.config.ts should resolve the issue:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    tailwindcss(), // Moved to earlier in the array, above React.
    react(),
  ],
})

Explanation

Vite processes each file by executing each plugin in the order that it's provided in your vite.config.ts — the output of the first plugin will be passed to the second, and so on.

Since React doesn't know how to use TailwindCSS's custom directives (i.e. @theme, in your case), we need to ensure that the CSS file is processed before it's passed to the React plugin. Ensuring the TailwindCSS plugin comes before React will do exactly that!

本文标签： reactjstheme in Reactts projectin indexcss file not recognizedStack Overflow