Is there a way to use twin.macro to use tailwind.css classnames instead of generating new ones?

[melloc01]

Let's say that bundle size is not a problem and I'd be serving the whole tailwind.css for the app

[ben-rogerson]

There's no className output yet but it looks like it could be a good feature.

Let me see if I've got your use-case correct:

• You'd like to use twin for the DX features but not for the css object output.
• Instead, you'd like twin to add classNames and you'll add your own stylesheet (and find your own way to purge css).

If I add this feature, it wouldn't be possible to make this work for styles used within styled.xxx or tw.xxx.
It could only work on jsx elements with tw="xxx" and css={tw`xxx`} props.

[ben-rogerson]

Looking into this a bit further, I don't think it's possible.

Here's where the idea gets too tricky. In babel, I can't tell if a class is conditionally added.
In this example, I wouldn't be able to tell if isActive is true or not, so we couldn't do conditional styling with classNames:

const App = ({ isActive = false }) => (
  <div css={[isActive && tw`text-green-500`]}>
    Active
  </div>
)