Import Tailwind in Quasar

Step 1

bash

yarn add -D tailwindcss postcss autoprefixer
npx tailwindcss init

2. Step 2

Configure tailwlind.config.js

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

Step 3

Create src/css/tailwind.css

css

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

Step 4

Modify postcss.config.js

module.exports = {
  plugins: [
    // https://github.com/postcss/autoprefixer
    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') // add this
  ]
}

Step 5

Include tailwind.css in quasar.config.js

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

Step 6

Add prefix in tailwind.config.js to avoid overriding by Quasar utilities

prefix: 'tw-'