How to Call custom Functions

[ppvolto]

I was searching for a way to call a function that is defined in a plugin with a set of arguments.

A example call i was thinking of this style @css-variant("card", #cecece) where the the plugin now generates variables in the @theme layer like --card-* and later adds css rules that match .bg-(--card-bg).font-bold.text-(--card-text-light) and then uses a different font weight.

But i can not find any information if its posible or not.

[rozsazoltan]

Without an example, it's hard for me to understand what you're trying to achieve.

Example 1 with more utilities

• https://play.tailwindcss.com/AvzYxwwPmr

@utility card-* {
  width: calc(--value(integer) * var(--spacing) * 2);
  max-width: 100%;
  background-color: --value(--color-*);
  color: --modifier(--color-*);
  padding: --spacing(6) --spacing(4);
  border-radius: var(--radius-2xl);
}

<div class="card-32 card-sky-100/sky-700 dark:card-sky-700/sky-200">
  Hello World
</div>
<div class="card-32 card-emerald-100/stone-900 dark:card-stone-800/emerald-200">
  Hello World
</div>

Example 2 with an utility and more custom namespaces

• https://play.tailwindcss.com/QkNdVRHFar

@theme {
  --card-bg-modern: var(--color-emerald-100);
  --card-bg-dark-modern: var(--color-stone-800);
  --card-text-modern: var(--color-stone-900);
  --card-text-dark-modern: var(--color-emerald-200);
  --card-width-modern: --spacing(64);

  --card-bg-ocean: var(--color-sky-100);
  --card-bg-dark-ocean: var(--color-sky-700);
  --card-text-ocean: var(--color-sky-700);
  --card-text-dark-ocean: var(--color-sky-200);
  --card-width-ocean: --spacing(32);
}

@utility card-* {
  width: --value(--card-width-*);
  max-width: 100%;
  background-color: --value(--card-bg-*);
  color: --value(--card-text-*);
  padding: --spacing(6) --spacing(4);
  border-radius: var(--radius-2xl);

  @variant dark {
    background-color: --value(--card-bg-dark-*);
    color: --value(--card-text-dark-*);
  }
}

<div class="card-ocean">
  Hello World
</div>
<div class="card-modern">
  Hello World
</div>

[ppvolto]

Basicly i want to generate class rules that say i habe a variable --font-weight: 300; and a variable --card-font-size: 2.5rem now i want to create a rule that says when both of then are used together with a color #bdbdbd then you need to use the dark text color variable i have a defined set of sized and weights but for every project/component the color can change and i want the color values be defined at the component position.

[ppvolto]

thanks then i need to find a way to fix my problem a different way.
Since i my opinion don't need to define the --card-text since when i define colors based on a rule set,
as a example a rule that matches a calculation based on w3c AAA text colors,
card-[#bdbdbd] and card-[#0ea5e9] can force a specific text color.

Example for why my question:
Most of the time work with 5 color themes for one app "base", "dark", "light", "dark-inverted" and "light-inverted" there all should calculate there own text-color variables, and "Brand Color" i can't change.
I wanted to force a specific css rule when none AAA or AA can be matched to highlight the elements so that i can switch to a more matching color set example "base" does not work so i switch to one of the "dark/light" color schemes for that element, so i can have two different color sets next to each other inside the same parent element.