Set Up Shadcn Canary with Tailwind CSS 4 in a React Vite Project (JavaScript Only)

• create a react project using vite:
  

  npm create vite@latest 

  (choose React and then JavaScript in options)
  
  

• install tailwind css
  

  npm install tailwindcss @tailwindcss/vite 

  (installs tailwind css v4 by default)
  
  

• add the "tailwind plugin", "resolve" and "path" in the vite.config.json
  

  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"), }, }, }) 

• import tailwind at the top of src/index.css :
  

  @import "tailwindcss"; 

• create a file called jsconfig.json in the root directory
  

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

• install shadcn canary
  

  npx shadcn@canary init 

  i chose “zinc”, then “yes” for css variables, and then “use —force”

  

  checkout the difference between Default and New York theme in shadcn and colors it provides.
  

• now select “use —force” whenever u install a component
  example: npx shadcn@canary add button

  make sure to replace @latest with @canary

  src/App.jsx :
  

   import './App.css' import { Button } from './components/ui/button' function App() { return ( <> <Button variant="default">Button</Button> </> ) } export default App 

  do npm run dev

  

That’s how you install and configure Shadcn Canary with Tailwind CSS 4 in a React Vite JavaScript project without TypeScript. Whether you were searching for "How to install Shadcn with Tailwind CSS 4 in a React Vite project (No TypeScript)" or "Shadcn Canary setup with Tailwind CSS 4 and Vite in a React project (JavaScript only)," this guide covers everything you need to get started.