Is it safe not to have --tw prefixes in CSS variable names?

[kkomelin]

I'm building a library with totally custom theme. My users include the library CSS to their web sites.
When we name a variable like --color-* in Tailwind 4, there is a risk we're going to mess with the CSS variables of my user sites.
The --tw- prefixes protected from that but in v4 we don't have them anymore and there is no way I can remove only unused built-in CSS variables because I still use some of the built-in utilities like rounded-lg.

[Inventoris]

@kkomelin hey! You can still add the prefix manually.

@import "tailwindcss" prefix(tw);

This will return the --tw prefix to all classes and variables generated by Tailwind.

[Inventoris]

@kkomelin yeah, in tailwind v4 if you use a prefix, it must be used as the first utility separated by a colon, like this:

@import "tailwindcss" prefix(tw);

<h1 class="tw:text-2xl">Hi there</h1>

If you need to add a custom utility, use a prefix before using it:

@import "tailwindcss" prefix(tw);

@layer base {
  .heading {
    @apply tw:test;
  }
}

@utility test {
  color: green;
}

<h1 class="heading tw:text-2xl">Hi there</h1>

Here is an interactive example for you.

[kkomelin]

At least there is a way. Thanks for your help @Inventoris

[Inventoris]

@kkomelin glad! If you found my answers helpful, could you mark my answer as the answer so other people can see the solution to your problem?

[wongjn]

I don't believe you can mark an answer for an 💡Ideas post.

[kkomelin]

Changed the type of the discussion to Help and marked as completed. Thanks everyone for your help