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

Caprification

I think you will be better off with the Quasar's inbuilt CSS utilities which offer most of the features of Tailwind CSS. – Mefford

@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. – Dressing

@Dressing - Who would set a fixed height and not a relative one in modern app design? And why suffer all the bloat Tailwind generates when a fixed height is clearly a case for writing you own custom class? Stop serving the Tailwind Kool-Aid. Quasar provides 90% of what Tailwind does. – Obfuscate

Answer 1

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

Edit

It seems like the team is considering UnoCSS integration and making Quasar's CSS swappable with Tailwind for Quasar v3 https://github.com/orgs/quasarframework/projects/2?pane=issue&itemId=1451670

Nacre

Answer 2

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;

Farland

Answer 3

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.

Kilocycle