how to install daisyui in tailwind css

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


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)
❯ 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


<!DOCTYPE html>
<html lang="en">

    <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" />

  <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=""
          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=""
          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>

    <main class="flex-1">
      <section class="text-center">
        <div class="grid w-full p-12 place-items-center">
          <a href="">
            <img src="/vite.svg" alt="Vite" class="h-24" />
        <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">
            <a href="">Learn More</a>
            <a href="">Why Vite?</a>
        <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>

    <footer class="px-8 py-12 border-t border-gray-800">
      <div class="px-8 font-medium text-center">
        <a href="">
          Create Tailwind
    <script type="module" src="/main.js"></script>
    <!-- Place this tag in your head or just before your close body tag. -->
    <script async defer src=""></script>

install daisy ui in tailwind css

install daisy ui in tailwind css