5

I’m working on a React project using Vite and Tailwind CSS v4. I want to add the tw- prefix to all Tailwind CSS classes

I tried adding the following line to my index.css file:

@import "tailwindcss" prefix(tw);

However, it doesn't work, and I am getting the following error:

semi-colon expectedcss(css-semicolonexpected)

How can I correctly add the tw- prefix to all Tailwind classes in my setup? Is there a different way to achieve this in Tailwind CSS v4 since the tailwind.config.js file is no longer required?

Improve this question
1
  • 2
    The error will be from VSCode not understanding Tailwind CSS syntax, but that is correct. However, you can't explicitly have tw- prefix; prefixes are now separated by : so it would be tw:<classname>. Commented Jan 28 at 18:01

1 Answer 1

Reset to default
3

Warning: semi-colon expectedcss

However, it doesn't work, and I am getting the following error:

semi-colon expectedcss(css-semicolonexpected)

I don't know the exact origin of the error message, but I assume it's a VSCode warning. It's likely caused by the prefix(tw) you added after the import, which is an unexpected CSS (but not TailwindCSS) syntax.

You should use the official TailwindCSS extension. Installation and some extra configuration (files.associations) are required, so please follow the next answer:

Prefix

I want to add the tw- prefix to all Tailwind CSS classes.

Starting from TailwindCSS v4, class names are no longer extended; instead, the prefix appears as a main utility. It must be applied before everything else. The goal is to make it easier to distinguish TailwindCSS class names from custom class names when reading the code.

From TailwindCSS v4 onwards

If you use a prefix, the following is valid. The prefix should be connected with a colon (:) rather than a hyphen (-). Additionally, the prefix should always be used as the first utility. By default, this would be tw:content, but due to other utilities, you need to gradually place the appropriate utilities in between.

@import "tailwindcss" prefix(myprefix);

myprefix:text-red-500
myprefix:hover:text-red-500

Until TailwindCSS v3

Until v3, prefixes had to be specified in the legacy JavaScript-based configuration. They did not function as utilities but were prepended to the original class name, independent of other utilities.

/** @type {import('tailwindcss').Config} */
export default {
  prefix: 'myprefix-',
}

myprefix-text-red-500
hover:myprefix-text-red-500
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

I guess the problem mentioned in this question is the CSS configuration line. This answers not exactly solve the problem. I am with the same problem reported in the question.
@PedroSoares - It might be simpler if you open a new question with your configuration, error message, and debug steps. The question here is that tw-classname is not working, and the correct answer is: since v4, it should not be written this way; from v4 onwards, the prefix should be tw:classname alias in my answer: v4 myprefix:text-red-500 and v3 myprefix-text-red-500.
from v4 if use @import "tailwindcss" prefix(tw); what mentioned in question, than can't use tw-classname classes, only can use tw:classname.
You are right, my problem is different. After adding the same line in CSS, I start getting the following error: @layer base is used but no matching @tailwind base directive is present. But in the VS Code I am being reported about the error mentioned in this question. I should open a new question for that.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.