Tokens

Every component has class tokens which you can use for component customization. These tokens can be used with TailwindCSS variants.

For example x-heading max-md:sm changes the size on the md breakpoint. This was possible automatically with TailwindCSS v3, since v4 this is not working anymore (see #16000).

To replicate the same functionality, you have to use the new @utility at-rule manually. None of the components use this by default.

Example of a custom component with default import: (variants will not work)

css

@import "winduum/src/components/heading/index.css" layer(utilities);
/* this file includes following imports
@import "winduum/src/components/heading/props/default.css";
@import "winduum/src/components/heading/default.css";
@import "winduum/src/components/heading/sm.css";
@import "winduum/src/components/heading/lg.css";
 */

Example of a custom component with custom import:
(you will have to include all tokens manually and variants will work)

css

@import "winduum/src/components/heading/props/default.css" layer(theme);
@import "winduum/src/components/heading/default.css" layer(utilities);

@layer theme {
    :root, :host {
        --x-heading-font-weight: var(--font-bold);
        /* any custom properties */   
    }
}

@layer utilities {
    .x-heading {
        /* any custom styles */
    }
}

@utility sm {
  .x-heading:is(&) {
    --x-heading-font-size: var(--text-lg);
  }
}

@utility lg {
  .x-heading:is(&) {
    --x-heading-font-size: var(--text-3xl);
  }
}

Tokens ​

Tokens