Tailwind classes cannot override the component library on the deployed app, but it does on localhost

Question

I'm using tailwind css with prime react, this is my global.css:

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


@layer base {
  @import "primeicons/primeicons.css";
  @import "./preflight.css";
  @import "primereact/resources/primereact.min.css";
  @import "./custom-theme.css";
  /* Some other imports.  */
}


@layer components {
 /* Some imports to override the libs imported on @base here.  */
}


@layer utilities {
  /* ome other imports here */
}

In my local machine, everything works just fine, but then, running on a webserver, the tailwind ultilities classes cannot override properties from the component library i'm using. For instance:

If i have a class absolute p-button, on localhost, my button will have position absolute, but on the deployed version, it will use the position relative from the p-button class. The p-button classe comes from the primereact/resources/primereact.min.css import.

What is happening, what can I do to fix that?

Answer 1

This is likely an issue with CSS specificity and stylesheet loading order in local and deployed environments. Tailwind utility classes like .absolute have a specificity of (0, 1, 0); similarly, the .p-button class also has a specificity of (0, 1, 0) (assuming that's the only class from primereact applied to your element). Given that the declarations have equal specificity, the declaration appearing last in your CSS will be assigned. From the linked MDN article:

When multiple declarations have equal specificity, the last declaration found in the CSS is applied to the element.

It's not uncommon for the loading order of stylesheets to differ by environment due to bundling quirks b/t local and deployed dev. Your results suggest that Tailwind is being loaded later locally (i.e., the .absolute class is found beneath the .p-button class when your CSS is bundled), but loaded earlier when deployed.

To fix this, you can increase the specificity of the selector. One way to do this would be to define an additional selector in your CSS:

.p-button.absolute {
  position: absolute;
}

which has specificity (0, 2, 0). Not super satisfying. In this case, a one off style attribute may be more appropriate, e.g.:

<button className="p-button" style={{ position: "absolute" }}></button>

The above snippet assumes you're using React. Hope this helps!

Answer 2

Well, one thing I did to fix that is to use the postcss-import plugin. This fix the problem described by Parker by forcing the same order in both production and local environments.