[Vuejs]-How to add Tailwind CSS with Quasar?

Similar to Harris’ answer but with a separate .css file. Follow these steps:

1) npm install -D tailwindcss postcss autoprefixer

2) npx tailwindcss init

3) Configure your template paths at tailwind.config.js:

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

4) Create a file at src/css/tailwind.css and add the Tailwind directives:

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

5) Modify the postcss.config.js file (require tailwindcss)

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
  ]
}

6) Finally, we include the tailwind.css in quasar.config.js (css option)

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

Also, I recommend adding a prefix to all tailwind classes since Quasar has also some utilities classes that overwrites the tailwind ones.
Adding this option to tailwind.config.js solves the problem:

prefix: 'tw-'

Go into your Quasar project and run:

run npm i -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7autoprefixer@^9 

Then go to .postcssrc.js and add:

module.exports = {
  plugins: [
    // to edit target browsers: use "browserslist" field in package.json
    require('autoprefixer'),
    require('tailwindcss')

  ],
}

Then in any Vue.js component add this in the style tag import:

<style>
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
</style>