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 would like to change the border radius on a q-list component that I’m using in a dropdown button (q-btn-dropdown). However, it seems that one of those components adds a q-menu component which is hoisted to under the body tag and it is on that component that the border-radius styles are being set.

That means that the only way I know of changing the border radius is to target all q-menus. I.e., I could do something like this:

<style>
  body .q-menu { border-radius: 0;} 
</style>

But that would change all q-menu components whenever I use them. Of course, theoretically speaking I could scope the styles like this:

<style scoped>
  body .q-menu { border-radius: 0;} 
</style>

But for whatever reason I find that scoping doesn’t work with quasar. That is certainly the case here.

So what I am wondering is – is there a way to change the border-radius just for this usage of q-list (inside of q-btn-dropdown)? If so, how?

Thanks.

I would like to set a transition speed for q-drawer when I toggle it open or closed. I can’t seem to figure out how to do that.

I tried the following, but it did not work:

<style>
  .q-drawer {
    transition: 0.5s;
  }
</style>

Any ideas how to make this work?

Thanks.

I have two .vue files: header.vue and drawer.vue.

header.vue contains a button that is supposed to toggle open or shut the drawer (it does so by toggling a boolean value to true or false). drawer.vue has the data that needs to be toggled when the button is clicked (i.e., it contains the boolean value).

How can I get the two files to communicate with one another without having to combine the contents of the two file into a single .vue. file?

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.