How can I use @layer components directive?

[benknight]

Hi there, to briefly sum up my use case: I have a Next.js/Tailwind website where the page content comes from a WordPress backend. I'm using custom elements to be able to render React components inside the CMS content, but since they use shadow DOM, the global Tailwind classes are outside of scope, so I'm using Twind following the with-web-components example.

However, one thing I'm unsure how to replicate from my global Tailwind setup is the custom components I've defined, for example:

@layer components {
  .btn {
    @apply h-8 px-4 inline-flex items-center justify-center;
  }
}

For now I'm just setting a rule in my Twind config:

const baseConfig = resolveConfig(tailwindConfig) as any;

const config = defineConfig({
  presets: [presetAutoprefix(), presetTailwind()],
  theme: baseConfig.theme,
  rules: [
    [
      'btn',
      'h-8 px-4 inline-flex items-center justify-center',
    ],
  ],
});

However the problem with this approach is the btn class ends up having higher specificity in the cascade because it comes after my utility classes, where as in my site's Tailwind stylesheet, the @layer components causes it to come before the utility classes.

I tried using injectGlobal however I got the following error:

Error: No active twind instance found. Make sure to call setup or install before accessing tw.

How can I accomplish this?

[sastan]

Hi,

the rule approach should have worked. I need to look into it but it may be a bug. This kind of static rule should have been moved before the utilities. For now you can use aliases to achieve what you want

Example: https://twind.run/cyclone-monarch-anagram?result=css&file=config

import { defineConfig } from "@twind/core"
import presetAutoprefix from "@twind/preset-autoprefix"
import presetTailwind from "@twind/preset-tailwind"

export default defineConfig({
  presets: [
    presetAutoprefix(),
    presetTailwind(/* options */),
  ],
  rules: [
    [
      'btn',
      
      // Using shortcut alias
      // the styles are generated as defined by twind
      // -> same as if they where used alone.
      '~(h-8 px-4 inline-flex items-center justify-center)',
      
      // Using apply alias
      // the styles are generated in order they are declared
      // -> the behavior of the @apply directive of Tailwind CSS
      // '@(h-8 px-4 inline-flex items-center justify-center)',
    ],
  ],
})