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.

[chriswoodie]

I don't like this change. The prefix now looks like a modifier like hover, focus etc instead of just being what it's supposed to be, which is a prefix to the main part of the class name (hover:tw-bg-red-100 for example). It's confusing, harder to read and lessens the usability of it.

What was the reasoning behind changing this behaviour?