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/"] } } } run npm add -D @types/node 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@latest add button src/App.jsx : import './App.css' import { Button } from './components/ui/button' function App() { return ( 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.

Feb 16, 2025 - 11:03

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/*"]
    }
  }
}

run npm add -D @types/node
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@latest add button

src/App.jsx :

   import './App.css'
   import { Button } from './components/ui/button'

   function App() {
     return (
       <>
         <Button variant="default">ButtonButton>
       
     )
   }

   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.