React+Vite (TSX) SHADCN+Проблемы с настройкой Tailwind (классы темы по умолчанию не распознаются) ⇐ CSS

[Гость]

Я настроил проект React+Vite Typescript и хочу добавить Shadcn для стиля.
Я следовал официальному руководству по установке (https://ui.shadcn.com/docs/installation/vite), но с тех пор Tailwind недавно был обновлен до 4.0, и эта версия, по -видимому, не совместима с Tailwind, я следил за некоторыми обходными путями, чтобы вручную создать Tailwind.config.js, данное этим (на момент написания 9 -дневного) учебник:
https : //www.youtube.com/watch? V = -3m8koljr_m
Однако при завершении установки и работаю на Localhost я получаю следующую ошибку
11:30:40 [VITE] (клиент) ошибка перед трансформацией: [postcss] c: ... \ react-vite-tsx-shadcn-0125 \ node_modules \ tailwindcss \ base.css: 1: 1: Класс границы не существует. p>
В index.css есть, среди прочего: < /p>

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

@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
}
}
< /code>
При добавлении < /p>
        colors: {
border: "hsl(var(--border))",
// Additional colors...
},
< /code>
to tailwind.config.js, как предложено в другом посте, я получаю: < /p>
11:25:47 [Vite] (клиент) Pre -transform Ошибка: [postcss] C: ... \ React-vite-tsx-shadcn-0125 \ node_modules \ tailwindcss \ base.css: 1: 1: bg-background 

не существует. Если bg-background является пользовательским классом, убедитесь, что он определен в директив @layer . Завернутый в команду @layer.
Я следил за несколькими устранением неисправностей в других постах (изменение содержимого Tailwind.config.js, за исключением пограничных и BG-Background, изменяя @tailwindcss stmts на @import "tailwindcss /.. . "См. Скриншоты)
Лучшее, что я могу достичь, - это непрерывная, но выполняющая программа. p>

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

  "devDependencies": {
"@eslint/js": "^9.17.0",
"@types/node": "^22.13.1",
"@types/react": "^18.3.18",
"@types/react-dom": "^18.3.5",
"@vitejs/plugin-react": "^4.3.4",
"autoprefixer": "^10.4.20",
"eslint": "^9.17.0",
"eslint-plugin-react-hooks": "^5.0.0",
"eslint-plugin-react-refresh": "^0.4.16",
"globals": "^15.14.0",
"postcss": "^8.5.1",
"tailwindcss": "^3.4.17",
"typescript": "~5.6.2",
"typescript-eslint": "^8.18.2",
"vite": "^6.0.5"
< /code>
my postcss.config.js: < /p>
/** @type {import('postcss-load-config').Config} */
const config = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};

export default config;

Я был бы рад некоторой информации!
Спасибо заранее.
[[Введите описание изображения здесь] (https: // i.sstatic.net/0kytqsdc.png)^(https://i.sstatic.net/eaoeqodv.png)

Подробнее здесь: https://stackoverflow.com/questions/794 ... ot-being-r