DEV Community

skidee
skidee

Posted on

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

#webdev #react #shadcn #javascript

  • 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”

    Image description

    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

    Image description

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.

Top comments (0)