Some styles unable to overwrite the preflights on Buttons and Inputs

[Succatash]

I am unable to style my buttons or inputs in Tailwind 4 using Vite and deno, to get the styles to show up i have to either get rid of the preflights or I have to add the important tag at the end this includes for bg-anyColor, text-anyColor, border-width, border color and a few other. Width, margin, padding and other styles work.

Any help would be great using the important key all the time seems wrong.

here is what my button looks like that wont work unless I use the important specifier.

It seems to be that it cant overwrite the background-color:transparent and font-color:inherit

<button className="max-w-30 m-auto w-full  border-2 border-green-400 bg-amber-300">
       hello
     </button>

[wongjn]

Consider providing a project that reproduces the unexpected behavior.

[wongjn]

https://github.com/Succatash/learnTail4/tree/main/packages/app/project972

I'm getting a 404 on that one - perhaps you've set it to private?

[Succatash]

should work now just changed it to public and pushed my commit.

[wongjn]

I assume the project is actually at app/project972.

The cause seems to be because you have @imported Tailwind multiple times in the same CSS file, consider cleaning it up like so:

 @import "tailwindcss";
-@layer theme, base, components, utilities;
-
-@import "tailwindcss/theme.css";
-@import "tailwindcss/preflight.css";
-@import "tailwindcss/utilities.css";
-@tailwind utilities;

 @plugin "tailwindcss-animate";

And then move the @theme to the root:

-@layer base {
-  button {
-    color: white;
-  }

   @theme {
     …
   }
 
   @layer theme {
     .dark {
       …
     }
   }

+@layer base {
+  button {
+    color: white;
+  }
 }

[Succatash]

yes, sorry forgot to commit the root. Thanks.