Official Tailwind support

[Rolanddoda]

I know that many people think that you don't need Tailwind if you use Quasar, but maybe there are people who think that official Tailwind support would be great.

[FadhiliNjagi]

Quasar doesn't really need official support for Tailwind CSS. Don't get me wrong, I love Tailwind CSS and I have been using it more and more now that I'm outgrowing the training wheels (Quasar Vue Components). Quasar projects are still Vue projects under the hood and you can install Tailwind directly as you would in Vue:

1. Install Tailwind CSS and its dependencies

npm

npm install --save-dev tailwindcss postcss autoprefixer

yarn

yarn add -D tailwindcss postcss autoprefixer

pnpm

pnpm add -D tailwindcss postcss autoprefixer

2. Initialize Tailwind

npx

npx tailwindcss init -p

If you have corepack enabled, you can use your package manager e.g. yarn or pnpm instead of npx

This will create 2 files: tailwind.config.js and postcss.config.js

3. Configure postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {}
  }
}

In the latest Quasar versions, you can override the contents of the existing files and move the overrideBrowsersList array over to your package.json file under the key browserslist.

4. Configure tailwind.config.js

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

5. Add a tailwind.css file in src/css

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

Ignore editor warnings

6. Include tailwind.css in your quasar.config.js

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

If postcss starts giving you issues you could try to rename it to postcss.config.cjs

And Voila! You can also install Tailwind CSS IntelliSense extension on VS code which can greatly improve DX when working with tailwind. Some Quasar CSS classes conflict with Tailwind classes, but they are few and I can live with the Quasar ones overriding the Tailwind ones.

In my opinion, this setup, though not great to do every time, is sufficient. Official Tailwind support may increase the burden on the developers unnecessarily since it's out of scope.

PS: It's an opinion. You're free to have yours.

[Rolanddoda]

@FadhiliNjagi not true, see: #6775

[stefanvanherwijnen]

The solution seems to be hidden in that issue:
#6775 (comment)

So you can use Tailwind just fine, just make sure the Tailwind class names don't interfere with Quasar's class names.