V3 -> V4 Prefix Option

[eric-gurney-omac]

I can't seem to find any documentation about using the prefix option from V3 in V4.
module.exports = { prefix: 'tw', ...

What am I missing?

[wongjn]

https://v3.tailwindcss.com/docs/v4-beta#using-a-prefix

To prefix your utilities and theme variables to avoid conflicts with existing CSS, use the prefix(…) function when importing Tailwind:

@import "tailwindcss" prefix(tw);

Prefixes work a little differently than in v3 — now they look like variants and are always at the beginning of the class name:

<div class="tw:flex tw:bg-red-500 tw:hover:bg-red-600">
  <!-- ... -->
</div>

[eric-gurney-omac]

Thanks. That is a significant change to roll through the code base...

BTW, that seems to be missing in the 4.0 docs. The link you sent me was for beta and had v3 displayed on the page.

[benpsnyder]

yes this is critical for the docs. burned 2 hours until I found this discussion.