Can twin.macro using with the custom class

[hoangddt]

I have a custom css file named "button.scss" like this:

.btn {
  @apply px-3 py-2 rounded font-semibold inline-flex text-sm items-center;
  
  &.btn-large {
    @apply px-6 py-3 text-lg;
  }
  &.btn-sm {
    @apply px-2 py-1;
  }
  &:hover {
    text-decoration: none;
  }
}

.btn-primary{
  @apply bg-primary text-white;
  &:hover {
    background: darken($primary, 10);
  }
}

And the declaration of twin.macro like this:

import tw, { styled, theme } from 'twin.macro';
export const Button = styled.button({
  ...tw`btn`,
  variants: {
    variant: {
      primary: tw`btn-primary`,
      secondary: tw`btn-secondary`
    }
  }
});

The console report error:

error - ./src/designsystem/Button.js
MacroError:

✕ btn was not found
    at Array.reduce (<anonymous>)
    at Array.forEach (<anonymous>)

Besides the css of tailwind, can the css class that we write ourself can be use?

[ben-rogerson]

We can't write css like that for twin (or use @apply) but you can create a reusable component like this instead:

import tw, { styled, theme } from 'twin.macro';

export const Button = styled.button({
  ...tw`px-3 py-2 rounded font-semibold inline-flex text-sm items-center hover:decoration-none`,
  variants: {
    variant: {
      primary: tw`bg-primary text-white`,
      secondary: tw`btn-secondary`,
    }
  }
});

Usage:

<Button variant="primary">Submit</Button>

[hoangddt]

I understand your suggested approach, but it means that I need to migrate everything to use twin, which is not feasible right now. But thank you anyway.