How to add ANY prefix in React + Vite + Tailwind CSS

Here is a clean Markdown file you can save as
ADD_PREFIX_TAILWIND_V4.md
or anything you want.

---

📘 How to Add Any Prefix in React + Vite + Tailwind CSS v4

In Tailwind CSS v4, prefixes are no longer added using tailwind.config.js.
Instead, you add the prefix directly in your CSS @import rule.

---

✅ 1. Open Your Main CSS File

Examples:

src/index.css

or:

src/App.css

---

✅ 2. Import Tailwind With a Custom Prefix

You can use any prefix such as:

• tw
• my
• ui
• x
• custom
• anything you want

Example:

@import "tailwindcss" prefix(tw);

Or:

@import "tailwindcss" prefix(my);

Or:

@import "tailwindcss" prefix(custom);

---

✅ 3. Use Prefixed Classes in React

Example (prefix: tw):

<h1 className="tw-text-3xl tw-font-bold tw-text-red-500">
  Hello Tailwind
</h1>

Example (prefix: my):

<h1 className="my-text-xl my-font-semibold">
  Custom Prefix Working
</h1>

---

🎯 Variants (hover, responsive, dark mode)

Tailwind v4 uses this format:

prefix + variant + ":" + utility

✔ Correct:

tw-hover:text-red-500
tw-md:text-xl
tw-dark:bg-black

❌ Incorrect:

tw:hover:text-red-500
tw:text-red-500

---

✅ Example Button (prefix: my)

<button className="
  my-bg-blue-500
  my-text-white
  my-rounded
  my-hover:bg-blue-600
">
  Click Me
</button>

---

📌 Summary

Feature	Tailwind v4 Behavior
Add prefix	@import "tailwindcss" prefix(tw);
Any prefix allowed	Yes
Utility format	tw-text-red-500
Variants	tw-hover:bg-black
Wrong format	tw:bg-black

---