Registry item css tailwind class

[tonghohin]

How can I use tailwind classes instead of plain css in the css config?

This is what I'm trying to add to the globals.css:

.some-class {
    @apply !bg-card
}

But the css config seems to only support this style?

{
  "css": {
    "@layer base": {
      ".some-class": {
        "background-color": "var(--color-card)"
      }
    }
  }
}

[cu-sanjay]

@tonghohin

You can’t directly use Tailwind utility classes inside the css section of your config. The css block expects plain CSS variables or raw CSS values, not @apply.

If you want a reusable class with Tailwind, you have two main options:

1) Use @layer inside your globals.css

@layer base {
  .some-class {
    @apply bg-card;
  }
}

This works just like your example and keeps it in Tailwind’s pipeline.

2) Define in your config using CSS variables

If you’re forced to use the css key in the config, you’ll need to write it like:

{
  "css": {
    "@layer base": {
      ".some-class": {
        "background-color": "var(--color-card)"
      }
    }
  }
}

Here you can’t use @apply, only CSS vars.

Recommended: keep custom classes inside globals.css with @layer and @apply. The config is better for injecting raw CSS values, not Tailwind utilities.

Hope this clears your doubt. If you still face any issue, ask here, the community is ready to help.

[tonghohin]

I'm having the @apply tailwind classes in my globals.css locally. My goal is to inject those classes into others' globals.css when they are installing my component from my registry. Not sure how to do that.

[tonghohin]

Just found out this is the right way to do that:

{
  "css": {
    "@layer base": {
      ".some-class": {
        "@apply bg-card": {}
    }
  }
}