DaisyUI plugin installation

[pszafer]

Hi,

First of all, thanks for this tool.
Do you happen to know how to install DaisyUI plugin with _tw?
I tried simple npm i daisyui and then in tailwind-theme.css simple

@plugin "daisyui";

but it doesn't work properly, most of daisyui classes are throw errors.
Although, it is installed. This is what console shows me:

/*! 🌼 daisyUI 5.0.0 */
Error: Cannot apply unknown utility class: badge-outline

[gregsullivan]

Hi Pawel—Thanks for posting this!

Can you please provide your tailwind-theme.css file in its entirety so I can take a look?

[pszafer]

I tried many ways, but I think it should look like this:

/**
 * Add your design tokens as Tailwind theme variables.
 *
 * https://tailwindcss.com/docs/theme
 */

/**
 * Import Tailwind's default theme.
 */
@import "tailwindcss/theme";

/**
 * Your theme variables are merged with Tailwind's defaults, either extending
 * the default theme with new variables or overriding the values of existing
 * variables.
 */
@theme {
	/**
	 * These theme variables use CSS variables set by WordPress using values
	 * from your `theme.json` file.
	 *
	 * If you are using the classic editor, you may need to use hardcoded
	 * color values instead of the `var()` functions below.
	 */
	--color-background: var(--wp--preset--color--background);
	--color-foreground: var(--wp--preset--color--foreground);
	--color-primary: var(--wp--preset--color--primary);
	--color-secondary: var(--wp--preset--color--secondary);
	--color-tertiary: var(--wp--preset--color--tertiary);
	--container-content: var(--wp--style--global--content-size);
	--container-wide: var(--wp--style--global--wide-size);

	/**
	 * Add your theme below:
	 */
	 --font-manrope: Manrope, sans-serif;
	 --breakpoint-8xl: 90rem;

}

@plugin "daisyui";


@plugin "daisyui/theme" {
    name: "light";
    default: true;
    prefersdark: false;
    color-scheme: "light";
    --color-base-100: #fff;
    --color-base-200: #f9fafb;
    --color-base-300: #767676;
    --color-base-content: #1f2937;
    --color-primary: #307DEC;
    --color-primary-content: #fff;
    --color-secondary: rgb(31, 41, 55);
    --color-secondary-content: #fff;
    --color-accent: #7171f0;
    --color-accent-content: #fff;
    --color-neutral: #3d4451;
    --color-neutral-content: #fff;
    --color-info: #57B8DB;
    --color-info-content: #fff;
    --color-success: #07981E;
    --color-success-content: #fff;
    --color-warning: #ffb900;
    --color-warning-content: #fff;
    --color-error: #f06c65;
    --color-error-content: #fff;
    --radius-selector: 0.5rem;
    --radius-field: 0.5rem;
    --radius-box: 1rem;
    --size-selector: 0.28125rem;
    --size-field: 0.28125rem;
    --border: 1px;
    --depth: 0;
    --noise: 0;
    --light-gray: #e0e3e9;
    --second-gray: #f5f6f8;
    --color-table-gray: #F7F8F9;
    --full-black: #151617;
    --logo-blue: #08A4F2;
    --black-input: #4C5159;
    --logo: #1c1b17;
    --navbar-padding: 1rem;
    --bg-color: rgba(247, 250, 252, 0.6);
    --padding-card: 1.5rem;
  }
  
  @plugin "daisyui/theme" {
    name: "dark";
    default: false;
    prefersdark: false;
    color-scheme: "dark";
    --color-base-100: #2b303b;
    --color-base-200: #22212c;
    --color-base-300: #e2e1da;
    --color-base-content: #fff;
    --color-primary: #307DEC;
    --color-primary-content: #fff;
    --color-secondary: rgb(229 231 235);
    --color-secondary-content: #2b303b;
    --color-accent: #7171f0;
    --color-accent-content: #fff;
    --color-neutral: #3d4451;
    --color-neutral-content: #fff;
    --color-info: #57B8DB;
    --color-info-content: #fff;
    --color-success: #07981E;
    --color-success-content: #fff;
    --color-warning: #ffb900;
    --color-warning-content: #fff;
    --color-error: #f06c65;
    --color-error-content: #fff;
    --radius-selector: 0.5rem;
    --radius-field: 0.5rem;
    --radius-box: 1rem;
    --size-selector: 0.28125rem;
    --size-field: 0.28125rem;
    --border: 1px;
    --depth: 0;
    --noise: 0;
    --light-gray: #1f1c16;
    --second-gray: #22212c;
    --color-table-gray: #e0e3e9;
    --full-black: #e0e3e9;
    --logo-blue: #08A4F2;
    --black-input: #b3aea6;
    --logo: #ffffff;
    --navbar-padding: 1rem;
    --bg-color: rgb(255 255 255 / var(--tw-bg-opacity));
    --padding-card: 1.5rem;
  }

  .border-table-gray {
	border-color: white;
  }

[pszafer]

I modified the file a little:

/**
 * Add your design tokens as Tailwind theme variables.
 *
 * https://tailwindcss.com/docs/theme
 */

/**
 * Import Tailwind's default theme.
 */
@import "tailwindcss/theme";

/**
 * Your theme variables are merged with Tailwind's defaults, either extending
 * the default theme with new variables or overriding the values of existing
 * variables.
 */
@theme {
	--color-table-gray: var(--color-table-gray);
	--font-manrope: Manrope, sans-serif;
	--breakpoint-8xl: 90rem;
}

@plugin "daisyui" { themes: light --default, dark; }


@plugin "daisyui/theme" {
    name: "light";
    default: true;
    prefersdark: false;
    color-scheme: "light";
    --color-base-100: #fff;
    --color-base-200: #f9fafb;
    --color-base-300: #767676;
    --color-base-content: #1f2937;
    --color-primary: #307DEC;
    --color-primary-content: #fff;
    --color-secondary: rgb(31, 41, 55);
    --color-secondary-content: #fff;
    --color-accent: #7171f0;
    --color-accent-content: #fff;
    --color-neutral: #3d4451;
    --color-neutral-content: #fff;
    --color-info: #57B8DB;
    --color-info-content: #fff;
    --color-success: #07981E;
    --color-success-content: #fff;
    --color-warning: #ffb900;
    --color-warning-content: #fff;
    --color-error: #f06c65;
    --color-error-content: #fff;
    --radius-selector: 0.5rem;
    --radius-field: 0.5rem;
    --radius-box: 1rem;
    --size-selector: 0.28125rem;
    --size-field: 0.28125rem;
    --border: 1px;
    --depth: 0;
    --noise: 0;
    --light-gray: #e0e3e9;
    --second-gray: #f5f6f8;
    --color-table-gray: #F7F8F9;
    --full-black: #151617;
    --logo-blue: #08A4F2;
    --black-input: #4C5159;
    --logo: #1c1b17;
    --navbar-padding: 1rem;
    --bg-color: rgba(247, 250, 252, 0.6);
    --padding-card: 1.5rem;
  }
  
  @plugin "daisyui/theme" {
    name: "dark";
    default: false;
    prefersdark: false;
    color-scheme: "dark";
    --color-base-100: #2b303b;
    --color-base-200: #22212c;
    --color-base-300: #e2e1da;
    --color-base-content: #fff;
    --color-primary: #307DEC;
    --color-primary-content: #fff;
    --color-secondary: rgb(229 231 235);
    --color-secondary-content: #2b303b;
    --color-accent: #7171f0;
    --color-accent-content: #fff;
    --color-neutral: #3d4451;
    --color-neutral-content: #fff;
    --color-info: #57B8DB;
    --color-info-content: #fff;
    --color-success: #07981E;
    --color-success-content: #fff;
    --color-warning: #ffb900;
    --color-warning-content: #fff;
    --color-error: #f06c65;
    --color-error-content: #fff;
    --radius-selector: 0.5rem;
    --radius-field: 0.5rem;
    --radius-box: 1rem;
    --size-selector: 0.28125rem;
    --size-field: 0.28125rem;
    --border: 1px;
    --depth: 0;
    --noise: 0;
    --light-gray: #1f1c16;
    --second-gray: #22212c;
    --color-table-gray: #e0e3e9;
    --full-black: #e0e3e9;
    --logo-blue: #08A4F2;
    --black-input: #b3aea6;
    --logo: #ffffff;
    --navbar-padding: 1rem;
    --bg-color: rgb(255 255 255 / var(--tw-bg-opacity));
    --padding-card: 1.5rem;
  }

and now it fails later...

Error: Cannot apply unknown utility class: badge-outline

[gregsullivan]

When I install DaisyUI and add this element:

<div class="badge badge-accent badge-outline">Accent</div>

I get this in my style.css file:

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(0.25rem * 2);
  border-radius: var(--radius-selector);
  vertical-align: middle;
  color: var(--color-base-content);
  border: var(--border) solid var(--badge-color, var(--color-base-200));
  font-size: 0.875rem;
  width: fit-content;
  padding-inline: calc(0.25rem * 3 - var(--border));
  background-size: auto, calc(var(--noise) * 100%);
  background-image: none, var(--fx-noise);
  background-color: var(--badge-color, var(--color-base-100));
  --size: calc(var(--size-selector, 0.25rem) * 6);
  height: var(--size);
  &.badge-outline {
    color: var(--badge-color, var(--color-base-content));
    border-color: currentColor;
    background-color: transparent;
    background-image: none;
    box-shadow: none;
  }
  &.badge-dash {
    color: var(--badge-color, var(--color-base-content));
    background-color: transparent;
    border-style: dashed;
    background-image: none;
    box-shadow: none;
  }
  &.badge-soft {
    color: var(--badge-color, var(--color-base-content));
    background-color: color-mix( in oklab, var(--badge-color, var(--color-base-content)) 8%, var(--color-base-100) );
    border-color: color-mix( in oklab, var(--badge-color, var(--color-base-content)) 10%, var(--color-base-100) );
    background-image: none;
    box-shadow: none;
  }
}

I think the structure of output from DaisyUI might prevent you from using something like .badge-outline with @apply.

[gregsullivan]

The above seems to be confirmed here:

saadeghi/daisyui#3361

Please let me know if you have any other questions, and I'm going to convert this to a discussion in the meantime!