Install React Efficiently (react + vite + tailwindcss + daisyui)

Install React Efficiently (react + vite + tailwindcss + daisyui)

Installing React Efficiently

1. Create a regular React app scaffolding

   terminal or console

   npm create vite@latest .
   

2. Install tailwindcss

   terminal or console

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

3. Open tailwind.config.js file & Modify the content array to include:

   tailwind.config.js

    content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
    ],
   

4. Open index.css & replace it its contents

   index.css

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

   Open main.css as this is already imported inside main.js. Comment everything inside main.css.

5. Begin styling with Tailwind’s utility classes in App.jsx

   App.jsx

   export default function App() {
     return <h1 className="text-3xl font-bold underline">Hello world!</h1>;
   }
   

6. Install daisyui

   terminal or console

   npm i daisyui
   

7. Open tailwind.config.js & add daisyui to the plugins

   tailwind.config.js

   /** @type {import('tailwindcss').Config} \*/
   export default {
     content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
   
     theme: {
       extend: {},
     },
     plugins: [require("daisyui")],
   };
   

   or using ES Module syntax:

   tailwind.config.js

   import daisyui from "daisyui";
   
   /** @type {import('tailwindcss').Config} \*/
   export default {
     content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
   
     theme: {
       extend: {},
     },
     plugins: [daisyui],
   };
   

8. Open App.jsx & update the code to check if daisyui is working correctly

   App.jsx

   import "./App.css";
   function App() {
     return (
       <>
         <h1 className="text-3xl">Hello</h1>
         <button className="btn btn-outline"> Hello</button>
       </>
     );
   }
   export default App;