I am new to quasar and so far I really like it. With that said, I would like to integrate tailwindcss with it if possible so that I can use it’s utility classes when I want.

Does anyone know how to do this – or can they point to any documentation that can explain how to integrate the two together?

Thanks.

I just tried to modify the quasar.variables.scss file as follows:

$primary: $blue-7;
$secondary: #26a69a;
$accent: #9c27b0;

$positive: #21ba45;
$negative: #c10015;
$info: #31ccec;
$warning: #f2c037;

That is to say, I tried to set the $primary variable equal to the $blue-7 sass variable (which I got from here: https://quasar.dev/style/sass-scss-variables#Variables-list).

However, that did not work. I got the following error message:

Failed to compile.

./node_modules/quasar/dist/quasar.sass (./node_modules/css-loader/dist/cjs.js??ref–8-oneOf-2-1!./node_modules/postcss-loader/src??ref–8-oneOf-2-2!./node_modules/sass-loader/dist/cjs.js??ref–8-oneOf-2-3!./node_modules/@quasar/app/lib/webpack/loader.quasar-sass-variables.js!./node_modules/quasar/dist/quasar.sass)

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):

SassError: Undefined variable: “$blue-7”.

    on line 15 of src/css/quasar.variables.scss

    from line 1 of C:\code\tutorials\quasar\learning-quasar\node_modules\quasar\dist\quasar.sass

$primary: $blue-7;

----------^

Any idea how I can use the sass variables to set the primary and other color variables used in quasar?

Thanks.