Stumbled upon this thread quite late, but you can certainly use PurgeCSS with Quasar. Just tested the following, which reduces the CSS size in bundle for an empty app from ~200kb to 5kb.

In short, install PurgeCSS:

yarn add @fullhuman/postcss-purgecss -D

And configure PurgeCSS to target your source code (in postcss.config.js):

const purgecss = require('@fullhuman/postcss-purgecss')({

  // Specify the paths to all of the template files in your project
  content: [
    './src/**/*.html',
    './src/**/*.vue',
    './src/**/*.jsx',
    // etc.
  ],

  // This is the function used to extract class names from your templates
  defaultExtractor: content => {
    // Capture as liberally as possible, including things like `h-(screen-1.5)`
    const broadMatches = content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || []

    // Capture classes within other delimiters like .block(class="w-1/2") in Pug
    const innerMatches = content.match(/[^<>"'`\s.()]*[^<>"'`\s.():]/g) || []

    return broadMatches.concat(innerMatches)
  }
})

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    ...process.env.NODE_ENV === 'production'
      ? [purgecss]
      : []
  ]
}

I am using the following workaround until an official solution comes up: Use the postcss-remove-declaration plugin to remove the conflicting class declarations for Quasar before importing to allow tailwind to replace those classes.

Install the PostCSS plugin:

yarn add postcss-remove-declaration --dev

Then add the plugin before the Tailwind import in postcssrc.js:

// postcssrc.js

// ...

// These are the conflicting classes between Quasar and Tailwind. They may change in the future.
const conflictingClasses = [
  "flex", "order-first", "order-last", "cursor-not-alowed",
  "cursor-pointer", "block", "inline-block", "text-justify",
  "hidden", "invisible", "overflow-auto", "overflow-hidden"
];
// 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 "*".
const removeObj = {
  ...Object.fromEntries(conflictingClasses.map(cc => [`.${cc}`, "*"])), // Removes all properties from conflicting classes
  body: ["font-family", "font-size"] // You can also remove things like fonts and colors.
};

module.exports = {
  plugins: [
    ...
    require("postcss-remove-declaration")({ remove: removeObj }), // The plugin must be placed before Tailwind import!
    require("tailwindcss"),
    require("autoprefixer"),
    ...
  ]
};

// ...

That’s it! This should remove conflicts in favor of Tailwind and you should still be able to use Quasar as usual. (Be aware that the modifications may modify the looks and behaviour of Quasar, although I haven’t noticed any major change until now.)

@Tom-De-Smet unfortunately, installing TailwindCSS as usual isn’t enough, as Quasar utility classes conflict with those of Tailwind. There’s an open issue about this.

Quasar prioritizes its own CSS at build time, so eventually, your tailwind-styled markup won’t behave properly.

There are ways to disable Quasar CSS, in which case Tailwind will work perfectly. But making both work at the same time is tricky. I personally would be interested in a method to do that.

Stumbled upon this thread quite late, but you can certainly use PurgeCSS with Quasar. Just tested the following, which reduces the CSS size in bundle for an empty app from ~200kb to 5kb.

In short, install PurgeCSS:

yarn add @fullhuman/postcss-purgecss -D

And configure PurgeCSS to target your source code (in postcss.config.js):

const purgecss = require('@fullhuman/postcss-purgecss')({

  // Specify the paths to all of the template files in your project
  content: [
    './src/**/*.html',
    './src/**/*.vue',
    './src/**/*.jsx',
    // etc.
  ],

  // This is the function used to extract class names from your templates
  defaultExtractor: content => {
    // Capture as liberally as possible, including things like `h-(screen-1.5)`
    const broadMatches = content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || []

    // Capture classes within other delimiters like .block(class="w-1/2") in Pug
    const innerMatches = content.match(/[^<>"'`\s.()]*[^<>"'`\s.():]/g) || []

    return broadMatches.concat(innerMatches)
  }
})

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    ...process.env.NODE_ENV === 'production'
      ? [purgecss]
      : []
  ]
}