@theme tailwind base variables being override

[Ahmedsam199]

Description

When using the Tailwind with custom @theme variables defined in a <style> block, the custom theme variables are override the tailwind main class

Reproduction

https://svelte.dev/playground/04a4eaa9df954733932468e28384f61c?version=5.41.3

Steps to reproduce:

1. Load the project via the url provided above
2. Add the text-base class to the p tag
3. You will notice the button took a color instead of the default tailwind size class

Expected behavior

The custom class should not override the value and changes the text-base to a color cause its a size value.

Actual behavior

Tailwind shouldn't override the default class

Environment

• Tailwind CSS CDN (latest)
• Browser: [Firefox developer edition]
• Framework: Svelte 5.32.1

[wongjn]

To be clear, https://cdn.tailwindcss.com is v3 and @theme is v4 only.

You'll see that text-base will apply both color and font-size:

.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-text-opacity: 1;
  color: rgb(52 144 220 / var(--tw-text-opacity, 1));
}

So it doesn't remove the default properties from text-base, but adds to it. If you don't want the color, consider removing the config that sets it:

 extend: {
   colors: {
-    'base': '#3490dc',
   }
 }

[Ahmedsam199]

If we add a color base to the system in this example, shouldn’t there be a lint rule that warns me when it affects another class?

[wongjn]

Are you referring to the VSCode plugin? I don't believe there is such a thing. Though you can fork it and add a rule that suits your needs.

[Ahmedsam199]

yes i was talking about this extension https://tailwindcss.com/blog/introducing-linting-for-tailwindcss-intellisense anyways thank you for your time