In this section we will see how to use daisyui in tailwind css. For this tutorial we will install daisyui in tailwind css with vite and Create TW
Example 1
Install Daisy UI Step by Step in Tailwind CSS
First you need to Install & setup tailwind css v3. you can read tailwind css doc or read below article
How to install & setup Tailwind CSS v3
Install Tailwind Plugins + Vite + Typescript + Tailwind CSS 3
Install daisyui
npm i daisyui
tailwind.config.js
module.exports = {
content: ["./*.{html,js,ts}"],
theme: {
extend: {},
},
plugins: [require("daisyui")],
};
Run the server
npm run dev
Example 2
Install DaisyUI in Tailwind CSS with Create TW
Create react js project with npx:
npx create-tw@latest
# OR
npx create-tw@latest <project-name> --template <id>
Create react js project with yarn:
yarn create tw
# OR
yearn create tw <project-name> --template <id>
Select Vanilla (create-vite).
? Project name tailwind-daisyui ? App type Next.js (create-next-app) React (create-vite) Vue (create-vite) Astro (create-astro) Svelte Kit (create-svelte) Preact (create-vite) Solid (degit solidjs/templates/js) Nuxt (nuxi init) ❯ Vanilla (create-vite)
Select JavaScript.
? 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 tailwind-daisyui
npm run dev
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Install DaisyUI in Tailwind CSS</title>
<link rel="stylesheet" href="/style.css" />
</head>
<body class="flex flex-col h-screen text-white bg-gradient-to-b from-gray-900 to-slate-800">
<header class="py-16">
<h1 class="mb-6 text-4xl font-bold text-center">Install DaisyUI in Tailwind CSS 3</h1>
<div class="flex flex-row items-center justify-center gap-4">
<a class="github-button" href="https://github.com/andrejjurkin/create-tailwind-app"
data-color-scheme="no-preference: dark; light: dark; dark: dark;" data-icon="octicon-star" data-size="large"
data-show-count="true" aria-label="Star andrejjurkin/create-tailwind-app on GitHub">Star</a>
<a class="github-button" href="https://github.com/andrejjurkin/create-tailwind-app/discussions"
data-color-scheme="no-preference: dark; light: dark; dark: dark;" data-icon="octicon-comment-discussion"
data-size="large" aria-label="Discuss andrejjurkin/create-tailwind-app on GitHub">Discuss</a>
</div>
</header>
<main class="flex-1">
<section class="text-center">
<div class="grid w-full p-12 place-items-center">
<a href="https://vitejs.dev/">
<img src="/vite.svg" alt="Vite" class="h-24" />
</a>
</div>
<h2 class="text-3xl font-bold text-center">Created With Vite</h2>
<p class="mb-6">The Next Generation Frontend Tooling</p>
<ul class="flex flex-row items-center justify-center w-full gap-8 font-medium text-blue-300">
<li>
<a href="https://vitejs.dev/">Learn More</a>
</li>
<li>
<a href="https://vitejs.dev/guide/why.html">Why Vite?</a>
</li>
</ul>
<button class="btn">Button</button>
<button class="btn btn-primary">Button</button>
<button class="btn btn-secondary">Button</button>
<button class="btn btn-accent">Button</button>
<button class="btn btn-ghost">Button</button>
<button class="btn btn-link">Button</button>
</section>
</main>
<footer class="px-8 py-12 border-t border-gray-800">
<div class="px-8 font-medium text-center">
<a href="https://github.com/andrejjurkin/create-tailwind-app">
Create Tailwind
</a>
</div>
</footer>
<script type="module" src="/main.js"></script>
<!-- Place this tag in your head or just before your close body tag. -->
<script async defer src="https://buttons.github.io/buttons.js"></script>
</body>
</html>
install daisy ui in tailwind css
