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.