Replies: 7 comments 1 reply
-
|
Hi Pawel—Thanks for posting this! Can you please provide your |
Beta Was this translation helpful? Give feedback.
-
|
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;
} |
Beta Was this translation helpful? Give feedback.
-
|
I modified the file a little: and now it fails later... |
Beta Was this translation helpful? Give feedback.
-
|
When I install DaisyUI and add this element: <div class="badge badge-accent badge-outline">Accent</div>I get this in my .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 |
Beta Was this translation helpful? Give feedback.
-
|
The above seems to be confirmed here: Please let me know if you have any other questions, and I'm going to convert this to a discussion in the meantime! |
Beta Was this translation helpful? Give feedback.
-
|
thanks for response, so it's impossible in your opinion to use |
Beta Was this translation helpful? Give feedback.
-
|
hello @gregsullivan . I'd like to ask another question about DaisyUI and your theme. As you can see below, daisyui colors are loaded in the end, so those are not applied. @import "tailwindcss/theme";
@custom-variant dark (&:where(.dark, .dark *));
@theme {
--color-table-gray: ;
--font-manrope: Manrope, sans-serif;
--breakpoint-8xl: 90rem;
--spacing-8xl: 90rem;
--color-light-gray: ;
--color-second-gray: ;
--color-product-image: ;
--color-full-black: ;
/* --container-8xl: 90rem; */
}
/**
* DaisyUI Plugin
*/
@plugin "daisyui";
@plugin "daisyui/theme" {
name: "light";
default: true;
prefersdark: false;
color-scheme: "light";
--color-base-100: oklch(1 0 0);
--color-base-200: oklch(0.985 0.003 247.858);
--color-base-300: oklch(0.533 0 0);
--color-base-content: oklch(0.278 0.029 255.85);
--color-primary: oklch(0.608 0.15 252.417);
--color-primary-content: oklch(1 0 0);
--color-secondary: oklch(0.278 0.029 255.85);
--color-secondary-content: oklch(1 0 0);
--color-accent: oklch(0.608 0.15 285.75);
--color-accent-content: oklch(1 0 0);
--color-neutral: oklch(0.329 0.038 255.85);
--color-neutral-content: oklch(1 0 0);
--color-info: oklch(0.922 0.013 247.858);
--color-info-content: oklch(1 0 0);
--color-success: oklch(0.472 0.166 142.495);
--color-success-content: oklch(1 0 0);
--color-warning: oklch(0.801 0.199 85.872);
--color-warning-content: oklch(1 0 0);
--color-error: oklch(0.705 0.17 22.18);
--color-error-content: oklch(1 0 0);
--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;
--color-light-gray: oklch(0.922 0.013 247.858);
--color-product-image: oklch(0.97 0 0);
--color-second-gray: oklch(0.975 0.005 247.858);
--color-table-gray: oklch(0.98 0.004 247.858);
--color-full-black: oklch(0.13 0.006 255.85);
--logo-blue: oklch(0.7 0.17 220.38);
--black-input: oklch(0.378 0.015 255.85);
--logo: oklch(0.15 0.014 85.87);
--navbar-padding: 1rem;
--color-background-color: oklch(0.985 0.003 247.858 / 0.6);
--card-p: 0rem;
}
@plugin "daisyui/theme" {
name: "dark";
default: false;
prefersdark: false;
color-scheme: "dark";
--color-base-100: oklch(0.25 0.015 255.85);
--color-base-200: oklch(0.2 0.017 285.75);
--color-base-300: oklch(0.915 0.013 85.87);
--color-base-content: oklch(1 0 0);
--color-primary: oklch(0.608 0.15 252.417);
--color-primary-content: oklch(1 0 0);
--color-secondary: oklch(0.935 0.006 247.858);
--color-secondary-content: oklch(0.25 0.015 255.85);
--color-accent: oklch(0.608 0.15 285.75);
--color-accent-content: oklch(1 0 0);
--color-neutral: oklch(0.329 0.038 255.85);
--color-neutral-content: oklch(1 0 0);
--color-info: oklch(0.15 0.014 85.87);
--color-info-content: oklch(1 0 0);
--color-success: oklch(0.472 0.166 142.495);
--color-success-content: oklch(1 0 0);
--color-warning: oklch(0.801 0.199 85.872);
--color-warning-content: oklch(1 0 0);
--color-error: oklch(0.705 0.17 22.18);
--color-error-content: oklch(1 0 0);
--radius-selector: 0.75rem;
--radius-field: 0.5rem;
--radius-box: 1rem;
--size-selector: 0.28125rem;
--size-field: 0.28125rem;
--border: 1px;
--depth: 0;
--noise: 0;
--color-light-gray: oklch(0.15 0.014 85.87);
--color-product-image: oklch(0.3843 0 0);
--color-second-gray: oklch(0.2 0.017 285.75);
--color-table-gray: oklch(0.922 0.013 247.858);
--color-full-black: oklch(0.922 0.013 247.858);
--logo-blue: oklch(0.7 0.17 220.38);
--black-input: oklch(0.75 0.02 85.87);
--logo: oklch(1 0 0);
--navbar-padding: 1rem;
--color-background-color: oklch(1 0 0 / var(--tw-bg-opacity));
--card-p: 0rem;
}final css looks like this: @layer properties;
:root, :host {
--font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
'Noto Color Emoji';
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
monospace;
--color-red-500: oklch(63.7% 0.237 25.331);
--color-orange-400: oklch(75% 0.183 55.934);
--color-yellow-100: oklch(97.3% 0.071 103.193);
--color-blue-600: oklch(54.6% 0.245 262.881);
--color-blue-800: oklch(42.4% 0.199 265.638);
--color-indigo-500: oklch(58.5% 0.233 277.117);
--color-slate-400: oklch(70.4% 0.04 256.788);
--color-gray-100: oklch(96.7% 0.003 264.542);
--color-gray-200: oklch(92.8% 0.006 264.531);
--color-gray-300: oklch(87.2% 0.01 258.338);
--color-gray-400: oklch(70.7% 0.022 261.325);
--color-gray-700: oklch(37.3% 0.034 259.733);
--color-gray-800: oklch(27.8% 0.033 256.848);
--color-black: #000;
--spacing: 0.25rem;
--container-xs: 20rem;
--container-sm: 24rem;
--container-md: 28rem;
--container-lg: 32rem;
--container-7xl: 80rem;
--text-xs: 0.75rem;
--text-xs--line-height: calc(1 / 0.75);
--text-sm: 0.875rem;
--text-sm--line-height: calc(1.25 / 0.875);
--text-base: 1rem;
--text-base--line-height: calc(1.5 / 1);
--text-lg: 1.125rem;
--text-lg--line-height: calc(1.75 / 1.125);
--text-xl: 1.25rem;
--text-xl--line-height: calc(1.75 / 1.25);
--text-2xl: 1.5rem;
--text-2xl--line-height: calc(2 / 1.5);
--text-3xl: 1.875rem;
--text-3xl--line-height: calc(2.25 / 1.875);
--text-4xl: 2.25rem;
--text-4xl--line-height: calc(2.5 / 2.25);
--text-6xl: 3.75rem;
--text-6xl--line-height: 1;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--tracking-wider: 0.05em;
--radius-xl: 0.75rem;
--radius-3xl: 1.5rem;
--default-transition-duration: 150ms;
--default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
--default-font-family: var(--font-sans);
--default-mono-font-family: var(--font-mono);
--color-table-gray: ;
--font-manrope: Manrope, sans-serif;
--spacing-8xl: 90rem;
--color-light-gray: ;
--color-second-gray: ;
--color-product-image: ;
--color-full-black: ;
}
.some-class {
background-color: var(--color-full-black);
}
@layer base {
:where(:root),:root:has(input.theme-controller[value=light]:checked),[data-theme="light"] {
color-scheme: light;
--color-base-100: oklch(1 0 0);
--color-base-200: oklch(0.985 0.003 247.858);
--color-base-300: oklch(0.533 0 0);
--color-base-content: oklch(0.278 0.029 255.85);
--color-primary: oklch(0.608 0.15 252.417);
--color-primary-content: oklch(1 0 0);
--color-secondary: oklch(0.278 0.029 255.85);
--color-secondary-content: oklch(1 0 0);
--color-accent: oklch(0.608 0.15 285.75);
--color-accent-content: oklch(1 0 0);
--color-neutral: oklch(0.329 0.038 255.85);
--color-neutral-content: oklch(1 0 0);
--color-info: oklch(0.922 0.013 247.858);
--color-info-content: oklch(1 0 0);
--color-success: oklch(0.472 0.166 142.495);
--color-success-content: oklch(1 0 0);
--color-warning: oklch(0.801 0.199 85.872);
--color-warning-content: oklch(1 0 0);
--color-error: oklch(0.705 0.17 22.18);
--color-error-content: oklch(1 0 0);
--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;
--color-light-gray: oklch(0.922 0.013 247.858);
--color-product-image: oklch(0.97 0 0);
--color-second-gray: oklch(0.975 0.005 247.858);
--color-table-gray: oklch(0.98 0.004 247.858);
--color-full-black: oklch(0.13 0.006 255.85);
--logo-blue: oklch(0.7 0.17 220.38);
--black-input: oklch(0.378 0.015 255.85);
--logo: oklch(0.15 0.014 85.87);
--navbar-padding: 1rem;
--color-background-color: oklch(0.985 0.003 247.858 / 0.6);
--card-p: 0rem;
}
}
@layer base {
:root:has(input.theme-controller[value=dark]:checked),[data-theme="dark"] {
color-scheme: dark;
--color-base-100: oklch(0.25 0.015 255.85);
--color-base-200: oklch(0.2 0.017 285.75);
--color-base-300: oklch(0.915 0.013 85.87);
--color-base-content: oklch(1 0 0);
--color-primary: oklch(0.608 0.15 252.417);
--color-primary-content: oklch(1 0 0);
--color-secondary: oklch(0.935 0.006 247.858);
--color-secondary-content: oklch(0.25 0.015 255.85);
--color-accent: oklch(0.608 0.15 285.75);
--color-accent-content: oklch(1 0 0);
--color-neutral: oklch(0.329 0.038 255.85);
--color-neutral-content: oklch(1 0 0);
--color-info: oklch(0.15 0.014 85.87);
--color-info-content: oklch(1 0 0);
--color-success: oklch(0.472 0.166 142.495);
--color-success-content: oklch(1 0 0);
--color-warning: oklch(0.801 0.199 85.872);
--color-warning-content: oklch(1 0 0);
--color-error: oklch(0.705 0.17 22.18);
--color-error-content: oklch(1 0 0);
--radius-selector: 0.75rem;
--radius-field: 0.5rem;
--radius-box: 1rem;
--size-selector: 0.28125rem;
--size-field: 0.28125rem;
--border: 1px;
--depth: 0;
--noise: 0;
--color-light-gray: oklch(0.15 0.014 85.87);
--color-product-image: oklch(0.3843 0 0);
--color-second-gray: oklch(0.2 0.017 285.75);
--color-table-gray: oklch(0.922 0.013 247.858);
--color-full-black: oklch(0.922 0.013 247.858);
--logo-blue: oklch(0.7 0.17 220.38);
--black-input: oklch(0.75 0.02 85.87);
--logo: oklch(1 0 0);
--navbar-padding: 1rem;
--color-background-color: oklch(1 0 0 / var(--tw-bg-opacity));
--card-p: 0rem;
}
} |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
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
but it doesn't work properly, most of daisyui classes are throw errors.
Although, it is installed. This is what console shows me:
Beta Was this translation helpful? Give feedback.
All reactions