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.

[derpierre65]

i don't know, i don't use tailwind to add new fonts
you can use the legacy javascript based configuration file with @config "../../tailwind.config.js"; (path to your config.js)
i prefer the tailwind 4 way, i think in future versions this variant could be dropped
i know the tailwind 3 way to add fonts but i don't know how what's the replacement for that in tailwind 4, did you checked the docs?

[xewl]

I'm trying to add a font using tailwind.config.js, whoever th font is not available, how did you solved that?

Tailwind doesn't add fonts, it only references them (as it's just adding a "font-family" property).
You still have to include the link rel; or import it in your CSS file itself.

[yusufkandemir]

In case some of you were unable to use the Vite plugin way with Tailwind 4, the issue should be resolved: #17880
I don't have further information about integrating Tailwind, just wanted to share that the issue got resolved in case it helps someone.

[JunHaoShih]

i got tailwind 4 running with quasar and @tailwindcss/postcss

1. npm install tailwindcss @tailwindcss/postcss
2. add tailwindcss to your postcss.config, example:

import autoprefixer from 'autoprefixer'
import tailwindcss from "@tailwindcss/postcss";

export default {
  plugins: [
    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'
      ]
    }),
    tailwindcss(),
  ]
}

3. add tailwind import to your app.scss @import "tailwindcss" prefix(tw) source("../"); you can add more source() declarations if you want to add more source paths to tailwind
   my app.scss is in src/css/app.scss, that's why i am using ../ for my src directory.
4. use tailwind classes in your source files

note: tailwind changed the prefix behaviour, if you use tw as a prefix you need to use tw:bg-red-500, you can't now set a prefix like tw- in tailwind 3

How do you handle Tailwind 4 cascade layer? Due to cascade layer. I cannot even change q-header's color like tw:bg-amber-500.

[46319943]

i got tailwind 4 running with quasar and @tailwindcss/postcss

1. npm install tailwindcss @tailwindcss/postcss
2. add tailwindcss to your postcss.config, example:

import autoprefixer from 'autoprefixer'
import tailwindcss from "@tailwindcss/postcss";

export default {
  plugins: [
    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'
      ]
    }),
    tailwindcss(),
  ]
}

3. add tailwind import to your app.scss @import "tailwindcss" prefix(tw) source("../"); you can add more source() declarations if you want to add more source paths to tailwind
   my app.scss is in src/css/app.scss, that's why i am using ../ for my src directory.
4. use tailwind classes in your source files

note: tailwind changed the prefix behaviour, if you use tw as a prefix you need to use tw:bg-red-500, you can't now set a prefix like tw- in tailwind 3

How do you handle Tailwind 4 cascade layer? Due to cascade layer. I cannot even change q-header's color like tw:bg-amber-500.

In my case, adding important when importing Tailwind CSS allows it to override Quasar's unlayered CSS. This is a temporary solution, as Quasar is currently working on adding support for CSS layers. #17800

# tailwind.css
@import 'tailwindcss' important;