ContextQMD
Back to Daisyui

Add component classes to your HTML

packages/docs/src/routes/(routes)/docs/use/+page.md

5.5.191.2 KB
Original Source
<script> import Translate from "$components/Translate.svelte" </script> <Translate text="Once you <a href='/docs/install/'>installed daisyUI</a>, you can use component classes like <code>btn</code>, <code>card</code>, etc." />

So instead of making a button using only utility classes

html
<button
  class="inline-block cursor-pointer rounded-md bg-gray-800 px-4 py-3 text-center text-sm font-semibold uppercase text-white transition duration-200 ease-in-out hover:bg-gray-900">
  Button
</button>

<button class="inline-block px-4 py-3 text-sm font-semibold text-center text-white uppercase transition duration-200 ease-in-out bg-gray-800 rounded-md cursor-pointer hover:bg-gray-900">Button</button>

You can just use a component class like this

html
<button class="btn">Button</button>

<button class="btn">Button</button>

Then you can modify the component with daisyUI additional utility classes

html
<button class="btn btn-primary">Button</button>

<button class="btn btn-primary">Button</button>

Or you can modify the component with Tailwind CSS utility classes

html
<button class="btn w-64 rounded-full">Button</button>

<button class="w-64 rounded-full btn">Button</button>