Using custom CSS utilities with tw`` doesn't work

I would like to define my own CSS classes using Tailwind utilities in my tailwind.css file e.g. like this:

@tailwind base;
@tailwind components;
@tailwind utilities;

.py-responsive {
  @apply py-4
}

@screen tablet {
  .py-responsive {
    @apply py-6
  }
}

But this results to py-responsive was not found error if used like this:

import tw from 'twin.macro';
import { css } from 'emotion/css';

const styles = css`
    ${tw`py-responsive`}
`

Have anyone managed to do something like this?

My stack:

• Next.js 9.4.4
• Tailwindcss: 1.4.6
• Twin.macro: 1.4.1
• Emotion: 10.0.27

[vharvala]

I will close this issue since it is not actually an issue.

[vharvala]

@wildfrontend yeah that is how I use it currently and you described the problem perfectly. It does spread the css design logic.

@ben-rogerson thanks for the clarification and options! Didn’t think about the latter one so that might be the way to go. Thanks for the help 👍