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-',
}

I think you will be better off with the Quasar's inbuilt CSS utilities which offer most of the features of Tailwind CSS. — Chin. Udara, Nov 26 '21 at 15:38
@Chin.Udara That's not true. Quasar's inbuilt CSS utilities don't have a way to set the width and height of an element, for instance. — letroot, May 16 '22 at 13:06

score 4 · Accepted Answer · answered Jan 27 '22 at 10:27

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

score 4 · Answer 2 · answered Nov 14 '22 at 20:35

for me i had to use .css instead of .scss which quasar use as global css so steps below

install

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx,vue}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

postcss.config.js

module.exports = {
  plugins: [
    require('autoprefixer')({
      overrideBrowserslist: [
        'last 4 Chrome versions',
        'last 4 Firefox versions',
        'last 4 Edge versions',
        'last 4 Safari versions',
        'last 4 Android versions',
        'last 4 ChromeAndroid versions',
        'last 4 FirefoxAndroid versions',
        'last 4 iOS versions',
      ],
    }),
    require('tailwindcss'),
  ],
};

quasar.config.js

    css: ['app.scss', 'tailwind.css'],

tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

score 3 · Answer 3 · edited Aug 16 '22 at 07:41

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?

3 Answers3