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

[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;
}
}

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

Здесь использовалась версия:
[email protected] /home/ycr/shad-anim/prout
├── @eslint/[email protected]
├── @radix-ui/[email protected]
├── @tailwindcss/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── @vitejs/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

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


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