How do I use @apply in styled-components

[DanielBailey-web]

I am trying to use the following code to apply classes already defined elsewhere to this div. However, it appears that the @apply rule is not working.

I am wondering if there is support for @apply I guess or if I am just doing something wrong. (postcss config or something like that)

const Content = styled.div`
  @layer components {
    [aria-disabled="true"] {
      @apply bg-black opacity-50;
    }
  }
`;

[danbiilee]

I think this is directives(@layer components, @apply) from Tailwind CSS. If you want to use Tailwind CSS, make sure tailwindcss is properly installed and initial settings.

[quantizor]

@apply is a Tailwind CSS directive, not standard CSS. styled-components processes CSS (via stylis), not Tailwind directives. They are separate tools with different compilation pipelines.

If you want to use Tailwind utilities alongside styled-components, you would need to apply them via className on the rendered element, not inside the tagged template literal.