I’m new to Quasar too but just installed TailwindCSS as usual, added the tailwind classes to the app.css as described in the Tailwind docs and added it to the postcss config and it works out of the box as I would expect.

I even (mind, I’m using Quasar with the Quasar CLI) was able to connect the color config of Tailwind with the brand color config of Quasar by extracting them into a separate Javascript file. In that brand config file I have a module.export with the brand object which I import into TailwindCSS config as the color object and also in the Quasar config as the framework config brand object.
So I don’t use the config SASS file of Quasar for the brand colors but I put them right into the config javascript file. An example of that can be found when you export the colors via the Quasar Theme Builder in the docs.

It’s very simple actually:

Create a JS file somewhere (I created a brand.config.js file in my root where Tailwinds config also resides) with a color object which you will export (use the Quasar naming such as primary:

const brand = {
    primary  : '#ffbb00',
    secondary: '#ffffff',
    accent   : '#242424',
    dark     : '#696969',
    positive : '#60e67f',
    negative : '#db394c',
    info     : '#e3e3e3',
    warning  : '#f2a838'
};

module.exports = brand;

Than import this into Tailwind config and Quasar config files:

const brand = require('./brand.config.js');

Than use them in your Tailwind config

theme: {
        extend: {
            colors: brand
    }
}

and Quasar config:

framework: {
    config: {
        brand: brand
    }
}

You can also use the spread operator if you want to add additional colors:

theme: {
        extend: {
            colors: {
                ...brand,
                'extra-color': '#555555'
        }
    }
}

Hi, according to the docs, types are kept when saving/retrieving from Local Storage with Quasar.
I’m saving an object that has other types inside. It has another Object a Date and some Strings in it.
The Object inside the Object is returned as such, but the Date is returned as a String.

Is this a bug or a consequence of it being inside an Object? And if so, why are Objects inside Objects not returned as Strings?

It’s very simple actually:

Create a JS file somewhere (I created a brand.config.js file in my root where Tailwinds config also resides) with a color object which you will export (use the Quasar naming such as primary:

const brand = {
    primary  : '#ffbb00',
    secondary: '#ffffff',
    accent   : '#242424',
    dark     : '#696969',
    positive : '#60e67f',
    negative : '#db394c',
    info     : '#e3e3e3',
    warning  : '#f2a838'
};

module.exports = brand;

Than import this into Tailwind config and Quasar config files:

const brand = require('./brand.config.js');

Than use them in your Tailwind config

theme: {
        extend: {
            colors: brand
    }
}

and Quasar config:

framework: {
    config: {
        brand: brand
    }
}

You can also use the spread operator if you want to add additional colors:

theme: {
        extend: {
            colors: {
                ...brand,
                'extra-color': '#555555'
        }
    }
}

What do you mean exactly by navigatable?

It wouldn’t have its own navigation. It is kind of the end station, the deepest level. Just an info page.

The main page consists of a list of items. Clicking one of the items brings you to the detail page.
The detail page consists of some info + another list of items. Clicking one of those items brings you to the detail sub page.
The detail sub page consists of just plain info. (This page will also be shown elsewhere on another level -> as a detail page).

My tabs remain in the layout within the footer.
But what I mean is that theoretically my structure could become something like this which doesn’t seem nice at all:

<q-layout>
  <q-page-container>
    <q-page>
        CONTENT OF MAIN PAGE
        <div>
            <q-page>
                CONTENT OF DETAIL PAGE
                <div>
                    <q-page>
                        CONTENT OF DETAIL SUB PAGE
                    </q-page>
                 </div>
            </q-page>
        </div>
    </q-page>
  </q-page=container>
</q-layout>

This is all just for keeping the active state on my tabs when on a different page. So maybe there is a better way?
Now all my components have a root path in my router. Because it’s an app, url’s don’t matter much.
But the way you navigate is that you go deeper and deeper into a structure. The components are now all loaded into the main <router-view> which works perfectly and is easy to maintain and develop, but the active state on my tabs doesn’t work because I’m on a different rootpath whenever I go deeper into the structure. That’s why I decided to work with child paths in my router and end up with this code.

Any ideas?

I have a navigation structure with tabs. And my navigation would be something like:
Homepage -> detail page -> sub-detail page
Where the home tab should remain active when a user is on the sub-detail page.

I have a main layout file like this (simplified):

<q-layout>
  <q-header />
  <q-drawer />

  <q-page-container>
    <router-view />
  </q-page=container>

  <q-footer>
    <q-tabs />
  </q-footer>
</q-layout>

In a page that gets loaded into the router-view I have:

<q-page>
  Content
</q-page>

But for the hometab to remain active based on my routing as the single source of truth, I’d set a child router in my router and have a second <router-view> in this component. But when I do this, I’m loading a new component with its own <q-page> inside the parents <q-page> which is inside the main <q-page-container>.

Is this ok? Won’t it bring a world of trouble? Can q-page components be inside other q-page components?

What’s the best way of nesting pages like this while keeping the main page tab active?

I’m new to Quasar too but just installed TailwindCSS as usual, added the tailwind classes to the app.css as described in the Tailwind docs and added it to the postcss config and it works out of the box as I would expect.

I even (mind, I’m using Quasar with the Quasar CLI) was able to connect the color config of Tailwind with the brand color config of Quasar by extracting them into a separate Javascript file. In that brand config file I have a module.export with the brand object which I import into TailwindCSS config as the color object and also in the Quasar config as the framework config brand object.
So I don’t use the config SASS file of Quasar for the brand colors but I put them right into the config javascript file. An example of that can be found when you export the colors via the Quasar Theme Builder in the docs.