Tailwind CSS v4 utilities overridden by Quasar component styles

[Mo7ammedFawzy]

What happened?

When integrating Tailwind CSS v4 into a Quasar v2+ SPA, Quasar’s core component styles always win over my Tailwind utilities. For example:

<q-card class="bg-red-900">
  <!-- … -->
</q-card>

renders with a white background because Quasar ships:

.q-card {
  background: white;
}

I don’t want to sprinkle !important or add custom selectors throughout a large project.

What did you expect to happen?

The bg-red-900 utility should apply a red background to without using !important.

Reproduction URL

https://stackblitz.com/~/github.com/devfawzey/quasar_tailwindcssv4

Platforms/Browsers

Chrome

[timbze]

I've been extremely bugged with this same issue, but finally found a work-around.

Here's the main thing I do now.
In main.ts:

import './assets/first-imports.css'
// postcss-remove-declaration runs after first-imports are loaded, but before loading Tailwind css
import './assets/main.css'

first-imports.css

/**
* Using this for postcss to be able to remove the conflicting classes from Quasar
* before importing Tailwind.
* We need to use layer for regular classes to work with Tailwind v4 which uses layers,
* so putting in css file instead of importing in main.ts so that we can use layer(base).
*/
@import 'quasar/dist/quasar.css' layer(base);

main.css

@import 'tailwindcss';
@config '../../tailwind.config.cjs';

postcss.config.cfs

// These are the conflicting classes between Quasar and Tailwind. They may change in the future.
const conflictingClasses = [
  "order-first", "order-last", "cursor-not-allowed",
  "cursor-pointer", "block", "inline-block", "text-justify",
  "hidden", "invisible", "overflow-auto", "overflow-hidden"
]

const removeObj = {
  ...Object.fromEntries(conflictingClasses.map(cc => [`.${cc}`, "*"])), // Removes all properties from conflicting classes
}

module.exports = {
  plugins: {
    // The plugin takes an object where the keys are the selectors and the values are the properties (or list of properties) to remove or all properties with "*".
    "postcss-remove-declaration": {
      remove: removeObj
    },
    // it would be faster to use Tailwind v4 vite plugin, but then we can't use the postcss-remove-declaration
    // plugin like we do now to remove conflicting classes from Quasar.
    '@tailwindcss/postcss': {},
  },
}

package.json

{
  "devDependencies": {
    "@tailwindcss/postcss": "^4.1.11",
    "tailwindcss": "^4.1.11",
    "postcss": "^8.4.49",
    "postcss-remove-declaration": "^1.1.0"
  }
}