Custom base style specificity problem when importing

[andrewcroce]

According to the docs here: https://tailwindcss.com/docs/adding-base-styles/, you can define base element styles by adding them directly after @tailwind base.

This only seems to work when these base styles are added directly in the same file. If I @import a separate css file with base styles, they seem to be added before Tailwind's base styles, thus overriding many of my styles.

Example:

//index.css

@tailwind base;
@import "./styles/global/base.css"; 

@tailwind components;
@import "./styles/global/code.css";
@import "./styles/components/button.css";
@import "./styles/components/nav-link.css";

@tailwind utilities;

//base.css

h3 {
  @apply mb-3 mt-12 font-bold text-xl; // this is all overridden by Tailwind's base
}

This, however, works as expected:

//index.css

@tailwind base;

h3 {
  @apply mb-3 mt-12 font-bold text-xl; // this is all applied correctly
}

@tailwind components;
@import "./styles/global/code.css";
@import "./styles/components/button.css";
@import "./styles/components/nav-link.css";

@tailwind utilities;

Am I missing something?

[adamwathan]

If you're using postcss-import, make sure to use the @import "tailwindcss/base" syntax instead of the @tailwind base syntax:

https://tailwindcss.com/docs/using-with-preprocessors#build-time-imports

[andrewcroce]

I'm not using postcss-import, as this does not work with Parcel. The way I'm importing my higher level components seems to work fine with the @tailwind imports. Just the base styles are a problem.

[adamwathan]

Yeah this is likely a Parcel issue then. In my experience Parcel is basically entirely broken when it comes to working with CSS :/

If you can create a GitHub repo that reproduces the issue in a simple way I'm happy to take a look but I'm basically 100% certain this is an issue with how Parcel works with it's own magic import system instead of using postcss-import.

[andrewcroce]

Yeah I'm inclined to agree with you. The rest of my team loves Parcel for its simplicity, but I keep running into these kinds of issues :(

I think Parcel is prepending all the imports at the top of the bundled file, hence screwing with the order. This naturally isn't a problem with my component files, since in general they have higher specificity.

[adamwathan]

Hopefully they tackle this feature request in Parcel soon, as it would make it very easy for them to solve the import problem:

parcel-bundler/parcel#2983

It's really a shame because Parcel is such a nice way to work compared to webpack, but this issue is a huge show stopper :(