vinpac / windstitch

Windstitch is a 1.4kB, Simple Styling Library that helps you set when a className should be applied to a component.

Home Page:https://windstitch.vercel.app

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Is Windstitches aware of conflicting tailwind classnames?

wmonecke opened this issue · comments

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?

You would need tailwind-merge for that.