Как связать CSS с Tailwind/Shadcn? ⇐ Javascript

[Anonymous]

Я запутался в том, как настроить React/Tailwind/Shadcn для работы с CSS. Я пытаюсь сделать очень минимальный пример, в котором я могу добавить кнопку.

Код: Выделить всё

npm create vite@latest  # (React/TypeScript)
cd project
npm install
npm install tailwindcss @tailwindcss/vite
npm install -D @types/node
npx shadcn@latest init
npx shadcn@latest add Button

Я изменил ts.config.json :

Код: Выделить всё

{
"files": [],
"references": [
{ "path": "./tsconfig.app.json" },
{ "path": "./tsconfig.node.json" }
],
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}
}

ts.app.json :

Код: Выделить всё

{
"compilerOptions": {
...
"include": ["src"],
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}
}

vite.config.ts :

Код: Выделить всё

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

export default defineConfig({
plugins: [react(), tailwindcss()],
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
},
},
})

Затем упростили app.tsx до следующего:

Код: Выделить всё

import { Button } from './components/ui/button'

function App() {
return Destructive
}

export default App

Нет изменений в main.tsx :

Код: Выделить всё

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'

createRoot(document.getElementById('root')!).render(


,
)

и последний файл index.css был отредактирован Shadcn, но я сохранил минимальный:

Код: Выделить всё

@import "tailwindcss";
@import "tw-animate-css";

:root {
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;

color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;

font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
--radius: 0.625rem;
--background: oklch(1 0 0);
--foreground: oklch(0.129 0.042 264.695);
...
--destructive: oklch(0.577 0.245 27.325);
...
}

@theme inline {
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
--color-background: var(--background);
--color-foreground: var(--foreground);
...
--color-destructive: var(--destructive);
...
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
* {
@apply border-border outline-ring/50;
}
body {
@apply bg-background text-foreground;
}
}

И вот мой результат:

Здесь использовалась версия:
prout@0.0.0 /home/ycr/shad-anim/prout
├── @eslint/js@9.28.0
├── @radix-ui/react-slot@1.2.3
├── @tailwindcss/vite@4.1.8
├── @types/node@24.0.0
├── @types/react-dom@19.1.6
├── @types/react@19.1.7
├── @vitejs/plugin-react@4.5.2
├── class-variance-authority@0.7.1
├── clsx@2.1.1
├── eslint-plugin-react-hooks@5.2.0
├── eslint-plugin-react-refresh@0.4.20
├── eslint@9.28.0
├── globals@16.2.0
├── lucide-react@0.513.0
├── react-dom@19.1.0
├── react@19.1.0
├── tailwind-merge@3.3.0
├── tailwindcss@4.1.8
├── tw-animate-css@1.3.4
├── typescript-eslint@8.34.0
├── typescript@5.8.3
└── vite@6.3.5

Почему цвета недоступны?


Подробнее здесь: https://stackoverflow.com/questions/796 ... ind-shadcn