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;