[v4] Using mixins with poscss-mixins plugin and tailwind postcss

[dvzrd]

Is it possible to include mixins with tailwind's postcss plugin? I tried adding postcss-mixins but the mixins I defined didn't get processed. Has anyone tried adding additional postcss plugins to extend css language with the new tailwind plugin? I haven't had much success unfortunately and wondering if I'm missing something in my config:

Here's my postcss config with the mixins plugin:

const config = {
  plugins: {
     "postcss-mixins": {},
    "@tailwindcss/postcss": {},
  },
};

export default config;

Tried adding a mixin for setting a border width that changes based on the box size, just to test things out:

@define-mixin box-bordered {
  border-style: solid;
  border-width: 2px;

  &:where(.box-xs) {
    border-width: 1.5px;
  }

  &:where(.box-sm),
  &:where(.box-md) {
    border-width: 2px;
  }

  &:where(.box-lg),
  &:where(.box-xl) {
    border-width: 3px;
  }
}

Then inside a component css file

.card {
   @mixin box-bordered;
   border-color: var(--color-red-500);
}

I tried importing mixins definitions into the card component file and also into the main tailwind css file, outside of any tailwind layer but wasn't able to get it to work inside the tailwind stylesheet. Is there a build step I should be doing to get the mixins to process into css before it gets to the tailwind plugin?

[wongjn]

You can achieve this without postcss-mixin, using Tailwind CSS syntax:

@utility box-bordered {
  border-style: solid;
  border-width: 2px;

  &:where(.box-xs) {
    border-width: 1.5px;
  }

  &:where(.box-sm),
  &:where(.box-md) {
    border-width: 2px;
  }

  &:where(.box-lg),
  &:where(.box-xl) {
    border-width: 3px;
  }
}

@reference "path/to/mixin.css";

.card {
   @apply box-bordered;
   border-color: var(--color-red-500);
}

Though really, you should try to forgo the component CSS altogether and use Tailwind classes directly where you can:

-<div class="card">
+<div class="box-bordered border-red-500">

Or even without the @utility, converting the box-* class modifiers to be data-box attribute:

<div class="border-2 border-red-500 data-[box=xs]:border-1.5 data-[box=lg]:border-3 data-[box=xl]:border-3">

If you are then going to be using this pattern in other components, consider abstracting the logic to keep things DRY.

Otherwise, you may have to @import the file with the mixin into the component CSS. However, I'm not sure if postcss-mixin would resolve that for you, so you may need to have postcss-import to do that. However, this then may mess up with Tailwind, since postcss-import would then be resolving the @imports instead of Tailwind, thus some Tailwind-specific metadata for compilation may be lost.

[dvzrd]

This is awesome, thanks @wongjn

[dvzrd]

I ended up going with border-width: clamp(2px, calc(0.857px + var(--clamp-scale-base)), 3px); for the border.

with the scale var defined somewhere inside a base layer:

:root {
   --clamp-scale-base: 0.15vw;
}

@utility bordered-box {
  border-width: clamp(2px, calc(0.857px + var(--clamp-scale-base)), 3px);
}

I'll just add another util (i.e. bordered-box-sm) when I need a different sized border width.