How do I add a 'tw-' prefix to Tailwind CSS classes in a React Vite project using Tailwind CSS v4?

To add a prefix to all Tailwind CSS classes, you need to configure it via Tailwind’s configuration instead of trying to do it in a CSS import. Even though Tailwind CSS v4 can work with a minimal setup, you can (and should) create a Tailwind configuration file to add customizations like a prefix.

Steps to Add the "tw-" Prefix

1. Create a Tailwind Config File

   Even if you didn’t need one before, generate a configuration file by running:

   BASHCopied
   npx tailwindcss init

   This will create a tailwind.config.js file in your project.

2. Add the Prefix in the Config

   Open the newly created tailwind.config.js and add the prefix option like so:

   JSCopied
   module.exports = {
     prefix: 'tw-',
     content: [
       "./index.html",
       "./src/**/*.{js,jsx,ts,tsx}",
     ],
     theme: {
       extend: {},
     },
     plugins: [],
   };

   Adjust the content array to match the files in your project where Tailwind classes are used.

3. Update Your CSS File

   In your index.css (or whichever file is your Tailwind entry point), keep the standard Tailwind directives:

   CSSCopied
   @tailwind base;
   @tailwind components;
   @tailwind utilities;

   Do not use any prefix directives inside your CSS (@import "tailwindcss" prefix(tw); is not valid CSS).

Why the Error?

The error you received:

semi-colon expectedcss(css-semicolonexpected)

is because the syntax prefix(tw); is not valid CSS. Tailwind CSS processing happens through its PostCSS plugin and the configuration file, not via CSS import statements.

Final Notes

• The configuration file (tailwind.config.js) is still the correct and recommended way to customize Tailwind, including setting a prefix.
• After making these changes, restart your development server so the changes can take effect.

This setup will ensure that all Tailwind CSS classes are prefixed with tw- (e.g., tw-bg-blue-500, tw-text-xl, etc.) in your project.