vinpac / windstitch

Windstitch is a 1.4kB, Simple Styling Library that helps you set when a className should be applied to a component.
https://windstitch.vercel.app
MIT License
255 stars 6 forks source link

Is Windstitches aware of conflicting tailwind classnames? #19

Closed wmonecke closed 1 year ago

wmonecke commented 1 year ago

Would the following be possible?

const craftInput = cva(
  [...],
  {
    variants: {
      size: {
        medium: ['text-base', 'h-11', 'px-3'],
      },
      iconLeading: {
        true: 'pl-10',
      },
    },
  },
);

This is a cva example but would migrate to WindStitches if it would work.

I am trying to create a medium input but when iconLeading is true I would like the padding to end up like this pr-3 pl-10 which is the result of px-3 + pl-10.

Would WindStitches be aware a px-3 is applied and to override only the left part of the padding?

vinpac commented 1 year ago

You would need tailwind-merge for that.