Installation

1. creating a new React project using vite

   npm create vite@latest
   

2. Add Tailwind and its configuration

   npm install -D tailwindcss postcss autoprefixer
   npx tailwindcss init -p
   

3. Add the Tailwind directives to your CSS to index.css file

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

4. jsconfig.json

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

5. vite.config.js

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

6. Run the shadcn-ui init command to setup your project

   npx shadcn@latest init
   

7. answer Question

   √ Which style would you like to use? » Default
   √ Which color would you like to use as the base color? » Neutral
   √ Would you like to use CSS variables for theming? ... no / yes
   

8. Install Components

   npx shadcn@latest add button
   

9. tailwind.config.js

   /** @type {import('tailwindcss').Config} */
   export default {
       darkMode: ["class"],
       content: [
   	  "./index.html",
   	  "./src/**/*.{js,ts,jsx,tsx}",
   	],
   	theme: {
       	extend: {
       		borderRadius: {
       			lg: 'var(--radius)',
       			md: 'calc(var(--radius) - 2px)',
       			sm: 'calc(var(--radius) - 4px)'
       		},
       		colors: {}
       	}
       },
   	plugins: [require("tailwindcss-animate")],
     }
   

10. Example

    import React from 'react'
    import { Button } from "@/components/ui/button"
    function App() {
      return (
        <div className='text-center'>
          <h1 className='text-4xl mt-10 text-blue-400'>Hello</h1>
          <Button>Click me</Button>
        </div>
      )
    }
    
    export default App