Fix shadcn "No Tailwind CSS configuration found" in Vite

TL;DR#

npx shadcn@latest init does not ask Tailwind whether it is configured. It looks for two things: a tailwindcss entry in your package.json, and a CSS file that contains @import "tailwindcss" (Tailwind v4) or @tailwind base (Tailwind v3). A fresh Vite index.css has neither line, so the check fails even after a correct npm install. On Tailwind v4, put @import "tailwindcss"; at the top of src/index.css. On Tailwind v3, add the three @tailwind directives and make sure a tailwind.config.* file exists, which the v3 check also requires. Then run init again.

The error, as reported on Stack Overflow: "Tailwind error when installing shadcn in Vite React App" (24 votes, accepted answer):

No Tailwind CSS configuration found at /work/v3app.
It is likely you do not have Tailwind CSS installed or have an invalid configuration.
Install Tailwind CSS then try again.
Visit https://tailwindcss.com/docs/guides/vite to get started.

The output above is from a reproduction of the reporter's setup (Tailwind 3.4.19 installed with npm install -D tailwindcss@3 postcss autoprefixer, then npx tailwindcss init -p) with shadcn 4.21.3, the current latest on npm. The path is the container's project folder; yours will show your own project root.

What the shadcn CLI checks before it prints this#

The message comes from the preflight step of init, in packages/shadcn/src/preflights/preflight-init.ts (same file on the shadcn@4.21.3 tag and on main as of 7 October 2026). It depends on two values detected by getProjectInfo:

1. The Tailwind version comes from package.json. getTailwindVersion reads dependencies.tailwindcss or devDependencies.tailwindcss. If neither exists it returns no version at all. A value such as ^3.4.19, ~3 or 3.4.1 counts as v3; any value its pattern does not match as a 3.x range counts as v4. The installed copy in node_modules is never consulted.
2. The CSS file is found by content, not by name. getTailwindCssFile lists .css and .scss files up to five levels deep (skipping node_modules, public, dist, build and .next) and returns the first one whose text includes @import "tailwindcss", @import 'tailwindcss' or @tailwind base. If no file contains one of those strings, there is no Tailwind CSS file as far as the CLI is concerned.

The preflight then fails the Tailwind step when the version is missing, or when the version is v4 and no CSS file was found, or when the version is v3 and either the CSS file or a tailwind.config.* file is missing. All three cases print the same four lines.

That explains the Stack Overflow report. npx tailwindcss init -p creates tailwind.config.js and postcss.config.js, but it does not touch src/index.css. The CSS file the Vite template ships with starts with :root { and has no Tailwind line in it, so the v3 branch finds a config file and no CSS file. The accepted answer, which points to shadcn-ui/ui issue #4677, adds the three @tailwind lines, and that is enough.

The final line of the error links to the Tailwind Vite guide. That guide is now the Tailwind v4 setup, with no tailwind.config.js and no PostCSS step. Followed literally on a project built from the v3 instructions, it leads to a different set of errors, covered below.

Fix it for the Tailwind version you have#

Check which version is installed, and whether it is a direct dependency, before changing anything:

npm ls tailwindcss

Tailwind v4 (the current npm install tailwindcss)#

1. Install both packages, so that tailwindcss is listed in package.json and not only pulled in by the plugin:

npm install tailwindcss @tailwindcss/vite

2. Add the plugin to vite.config.ts. This step is for Vite: the CLI uses the presence of a vite.config.* file to detect the framework, but the Tailwind check never looks inside it:

import path from "path"
import tailwindcss from "@tailwindcss/vite"
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"
 
export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
})

The resolve.alias block and the @types/node dev dependency it needs come from the shadcn Vite installation guide; install it with npm install -D @types/node.

3. Put the Tailwind import at the top of src/index.css:

@import "tailwindcss";

The shadcn guide says to replace the whole file with that line. The CLI only needs the line to be present, and in the reproduction the existing template styles below it were kept and init still passed. Those kept rules sit outside every cascade layer, so they beat Tailwind's utilities on any property both set: if padding or margin classes then do nothing, see spacing utilities overridden by an unlayered reset.

Tailwind v3 (an existing project pinned to tailwindcss@3)#

1. Make sure tailwind.config.js exists. If it does not, create it with the v3 CLI:

npx tailwindcss init -p

2. Add the three directives at the top of src/index.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

Do not mix the two styles. The CLI would accept @tailwind base in a v4 project, because it searches for all three strings whichever version it detected, but the Tailwind upgrade guide says: "In v4 you import Tailwind using a regular CSS @import statement, not using the @tailwind directives you used in v3". If you are on v4 with v3-era files left over, read Fix: Tailwind PostCSS Plugin Has Moved (Vite + React), which walks through dropping postcss.config.js in favour of @tailwindcss/vite.

Then add the import alias#

On the default Vite react-ts template, the Tailwind error is rarely alone. The same run fails the alias check too, because the template ships without a paths entry:

✖ Validating Tailwind CSS.
- Validating import alias.
✖ Validating import alias.

Could not find valid path aliases or package imports for init.
Configure path aliases in tsconfig.json or imports in package.json, then run init again.
Learn more at https://ui.shadcn.com/docs/installation/manual#configure-import-aliases.

Add baseUrl and paths to compilerOptions in tsconfig.json:

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

In the reproduction, the root tsconfig.json was the only file the preflight needed. The shadcn guide also adds the same baseUrl and paths to tsconfig.app.json "so your editor can resolve imports", and the resolve.alias block in vite.config.ts above is what makes Vite resolve @/ at build time. Do all three.

Verify the fix#

Run the command again, as it is, without the force flag that the init command source defines for overwriting an existing configuration:

npx shadcn@latest init

A passing preflight shows a tick on both validation steps, and on Tailwind v4 it names the version it detected:

✔ Validating Tailwind CSS. Found v4.
✔ Validating import alias.

The run then writes components.json, installs dependencies and finishes with:

Project initialization completed.
You may now add components.

You do not need the force flag here. A failed preflight exits before components.json is written, so the second run does not hit the "already exists" guard. In the reproduction, the v3 project went from the four-line error to Project initialization completed. with only the three @tailwind lines added, and the v4 project went from the error to success with only @import "tailwindcss"; added. On v4, init also adds its own imports to src/index.css (which ones depend on the preset you pick) and keeps your @import "tailwindcss"; line first; npx vite build then completed on Vite 8.3.3.

Read the spinner line before you change anything#

The four-line message is the same for every cause, but the spinner line above it is not. It tells you which half of the check failed:

• ✖ Validating Tailwind CSS. Found v4. means the CLI found tailwindcss in package.json and resolved it to v4, but no CSS file contains @import "tailwindcss". Fix the CSS file.
• ✖ Validating Tailwind CSS. with no version means package.json has no tailwindcss entry at all, or the project is v3 and is missing the CSS line or the config file. Look at package.json first.

The second case catches a setup that looks correct. In the reproduction, running only npm install @tailwindcss/vite left tailwindcss 4.3.3 in node_modules (it is a dependency of the plugin), while the dependencies in package.json listed @tailwindcss/vite, react and react-dom and nothing else. src/index.css started with @import "tailwindcss";. init still failed, with no version on the spinner line:

- Validating Tailwind CSS.
✖ Validating Tailwind CSS.

Running npm install tailwindcss adds the missing entry, and both guides install the two packages together.

A second case that fails for a less obvious reason: the Tailwind Preflight docs show v4 imported layer by layer (@import "tailwindcss/theme.css" layer(theme); and so on), for example to leave Preflight out, instead of the single @import "tailwindcss";. None of those lines contains the exact string the CLI searches for, so the reproduction with only layer imports failed with Found v4. on the spinner. Keep a plain @import "tailwindcss"; line in one CSS file if you want init to recognise the project.

The step-by-step in the Stack Overflow question also no longer works as written. npm install -D tailwindcss without a version now installs Tailwind 4.3.3, whose package no longer ships the tailwindcss executable (3.4.19 still declares it as a bin entry on npm; 4.3.3 declares none), so npx tailwindcss init -p fails before shadcn is ever involved. Fix "Missing specifier" & npx tailwindcss init Errors reproduces that failure and the choice between moving to @tailwindcss/vite and pinning tailwindcss@3.

Reproduction notes#

Reproduced on 7 October 2026 in the official node:22 Docker image (Node 22.23.3, npm 10.9.9), on a project from npm create vite@latest with the react-ts template (Vite 8.3.3), with shadcn 4.21.3. The container had no terminal, so init was run as npx shadcn@latest init -b radix -p nova to skip the interactive questions about the component library and preset. Those flags only answer the prompts and have nothing to do with the Tailwind check. Between runs, one thing changed at a time: the alias first, then the CSS line.

After init: errors from a v3 project moved to v4#

If the project was first set up with shadcn on Tailwind v3 and Tailwind was later upgraded to v4, the build can fail with Cannot apply unknown utility class border-border: the shadcn colours live in a v3 tailwind.config.js, which v4 no longer reads on its own. Fix "Cannot apply unknown utility class border-border" shows the @config line that loads it and how to move the colours into @theme inline. Otherwise, the next command from the shadcn Vite guide is npx shadcn@latest add button, and the alias you just added is what lets the generated @/components/ui/button import resolve.

Further reading: Fix: import.meta.env Undefined on Production Build (Vite), Fix Tailwind v4 IntelliSense not working in VS Code. Also see Fix slow Tailwind v3 in Vite: remove catch-all safelists. Also see Google Fonts not working in Tailwind + Vite: @import order. Also see Fix shadcn combobox: item was not found at the registry.