I set up a React+Vite TypeScript Project and want to add shadcn for styling. I followed the official installation guide (), but since Tailwind has recently been updated to 4.0 and this version is apparently not compatible with Tailwind, I followed some workarounds to manually create the tailwind.config.js given by this (at the time of writing 9 day old) tutorial:

However, when finishing the installation and running on localhost, I get the following error

11:30:40 [vite] (client) Pre-transform error: [postcss] C:...\react-vite-tsx-shadcn-0125\node_modules\tailwindcss\base.css:1:1: The border-border class does not exist. If border-border is a custom class, make sure it is defined within a @layer directive.

in the index.css there is, among other code:

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

when adding

        colors: {
        border: "hsl(var(--border))",
        // Additional colors...
        },

to tailwind.config.js, as suggested in another post, I get:

11:25:47 [vite] (client) Pre-transform error: [postcss] C:...\react-vite-tsx-shadcn-0125\node_modules\tailwindcss\base.css:1:1: The bg-background class does not exist. If bg-background is a custom class, make sure it is defined within a @layer directive.

so apparently some custom classes do not exist and should be wrapped in a @layer command. I have followed multiple troubleshootings in other posts (changing contents of tailwind.config.js, excluding border-border and bg-background, changing @tailwindcss stmts to @import "tailwindcss/..." see screenshots)

The best I can achieve is an unstyled but executing program.

These are my devDependencies in package.json:

  "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"

my postcss.confic.js:

/** @type {import('postcss-load-config').Config} */
const config = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
    };

    export default config;

I'd be glad for some insight! Thanks beforehand.

[[enter image description here](.png)](.png)