In this section we will see how to use daisy ui as a tailwind css components in react js.
Tool Use
React JS
Tailwind CSS 3.v
DaisyUI (Plugin)
Example 1
Install Daisy UI Step by Step in ReactJS
Install & setup tailwind css v3 in reactjs. you can read tailwind css doc or read below article
Install & Setup Vite + React + Typescript + Tailwind CSS 3
Install daisyui
npm i daisyui
tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [require("daisyui")],
}
Run server
npm run dev
Example 2
Install Daisy UI Tailwind in React with Create TW
Create react js project with npx:
npx create[email protected]
# OR
npx create[email protected] <project-name> --template <id>
Create react js project with yarn:
yarn create tw
# OR
yearn create tw <project-name> --template <id>
Select ReactJS.
? Project name reactjs-daisyui
? App type (Use arrow keys)
Next.js (create-next-app)
Vanilla (create-vite)
❯ React (create-vite)
Vue (create-vite)
Astro (create-astro)
Svelte Kit (create-svelte)
Preact (create-vite)
Solid (degit solidjs/templates/js)
Select typescript.
? What language will your project be written in? (Use arrow keys)
❯ TypeScript
JavaScript
Select Daisy UI Plugin.
? Which plugins would you like to include? (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
◯ @tailwindcss/typography
◯ @tailwindcss/forms
◯ @tailwindcss/aspect-ratio
◯ @tailwindcss/line-clamp
❯◯ daisyui
◯ prettier-plugin-tailwindcss
Move to project and run the server.
cd reactjs-daisyui
npm run dev
src/App.tsx
import React from "react";
function App() {
return (
<div>
<div className="h-screen justify-center items-center flex flex-col">
<div className="card w-96 bg-base-100 shadow-xl">
<figure>
<img src="https://placeimg.com/400/225/arch" alt="Daisy UI with React" />
</figure>
<div className="card-body">
<h2 className="card-title">Install Daisy UI Plugin in React JS</h2>
<p>
install & setup tailwind daisyui in React JS
</p>
<div className="card-actions justify-end">
<button className="btn btn-primary">Buy Now</button>
</div>
</div>
</div>
</div>
</div>
);
}
export default App;