How to use Tailwind CSS with Quasar framework?

Question

I have been trying to use Tailwind to custom the Quasar components, but the Quasar CSS has been overwriting most of the Tailwind CSS.

I added a prefix to my tailwind.config.js and my Tailwind classes are prefixed with tw- like in the example below.

module.exports = {
  prefix: 'tw-',
}

user_2714285 · Answer

There is a dedicated issue on Quasar's github

As a Quasar dev said, prefixing tailwind classes is the recommended way of doing so. So you're right!

To go deeper, the most interesting part seems about using Unocss to play with its presets for other frameworks like Tailwind

user_259018 · Answer

We were able to get TailwindCSS working with Quasar using unocss (which supports TailwindCSS syntax).

We followed this tutorial but in a gist this is what you need to do:

Install unocss webpack package and a preset:

yarn install -D @unocss/webpack
yarn install -D @unocss/preset-uno

Create a boot file cass UnoCSS.js in src/boot/ with the following:

import 'uno.css'

Update your quasar.config.js


const UnoCSS = require('@unocss/webpack').default
const presetUno = require('@unocss/preset-uno').default

module.exports = configure(function (ctx) {
   // ...
   boot: [
      'UnoCss' // name of your boot file
   ]
   // ...
    build: {
      // ...
      extendWebpack (cfg) {
        cfg.plugins.push(UnoCSS({
          presets: [
            presetUno()
          ]
        }))
      },
      // ...
    }
    //...
}

Start your dev server with quasar dev

And you should be able to use any TailwindCSS classes.

Note: styles do not auto refresh on the page when you update you need to manually refresh the page to see the changes.

How to use Tailwind CSS with Quasar framework?

2 Answers