Implement mixins based on lightningcss

[akkie]

There is an example of how to implement a mixin in the lightningcss documentation.
https://lightningcss.dev/transforms.html#custom-at-rules

Is there any plan to implement such a feature? It would be really useful.

[wongjn]

I think in Tailwind, you'd abstract the CSS to a template component. This is because the Tailwind paradigm is that you write Tailwind classes in your templates only, and avoid writing any CSS at all. So an equivalent in Tailwind CSS could be:

<div class="{{ bar ? 'text-yellow-500' : 'text-red-500' }}">
  {{ content }}
</div>

Otherwise, you can already do this with @utility and @apply really.

[akkie]

Sure, but you still can have something like:

/* dark */
[data-theme-preview='dark'],
[data-theme-mode='user'][data-user-theme='dark'] {
  @import './themes/dark.css';
}

@media (prefers-color-scheme: dark) {
  [data-theme-mode='system'][data-system-dark-theme='dark'] {
    @import './themes/dark.css';
  }
}

Currently I use in the theme files invalid CSS. It works, but the editor shows it as valid.

color-scheme: dark;

/* Primary (gray) */
--color-primary: oklch(66.71% 0.023 271.05);
--color-primary-content: oklch(15.5% 0.004 271.14);

...

.pintura-editor {
  --color-background: 17, 26, 44;
  --color-foreground: 236, 240, 248;
  --color-preview-outline: 17, 26, 44;
}

Mixins would allow you to write valid CSS. I could use postcss, but since Tailwind uses lightningcss and it seems easy to implement mixins there, users can get rid of postcss altogether if they only use it for minification and mixins.