Quasar and Tailwind CSS

Quasar and Tailwind CSS

timsayshey commented on 21 Jul • 
We came up with a workaround on our team to get Quasar and Tailwind to work together. Our goal was to build everything in Tailwind on Quasar but we didn't want Quasar styles loading in and taking over or conflicting with our Tailwind styles. The first thing we had to do was prevent the Quasar stylesheet from loading in however there is no option to disable it so we do a find/replace to remove it when webpack builds.

Run npm i string-replace-loader then add the following code to the extendWebpack() method in your quasar.conf.js file:

cfg.module.rules.push({
  test: /client-entry\.js$/,
  loader: 'string-replace-loader',
  options: {
    search: "import 'quasar/dist/quasar.sass'",
    replace: '',
  },
})
Then to limit Quasar styles to a specific Quasar component, we're going to scope all Quasar classes to a specific wrapper class. To do this, create an app.scss file with the following code in it and add app.scss to the css:[] property in your quasar.conf.js file. ie css: ['app.scss'],:

.quasar-style-wrap {
  @import '~quasar/dist/quasar';
}
Here's an example of how to apply Quasar styles to your Quasar Component:

<div class="quasar-style-wrap">
  <div class="q-pa-md flex flex-center">
    <q-knob
      v-model="value"
      size="50px"
      color="orange"
      class="q-ma-md"
    />
  </div>
</div>
With this solution, the actual Quasar components still use Material design and not Tailwind but it no longer conflicts and you can still use Quasar components when needed.

This workaround will get us by for now. However it would be nice for the Quasar team to add a way to disable Quasar styles from the config file without the Webpack replace workaround. And of course, Tailwind versions of the Q components would be great too.

Hope this helps!

-Tim