Swappable CSS frameworks (i.e. TailwindCSS)

Is your feature request related to a problem? Please describe. Adoption of Quasar may be limited due to the requirement to learn its styling rules.

Describe the solution you’d like Would be terrific if users could choose among existing CSS frameworks, specifically TailwindCSS, possibly Tachyons or others. (Tailwind is pure CSS, no components that conflict with Quasar’s).

Describe alternatives you’ve considered

• quasar devs explain how to prevent default CSS from being included in final package
• from there, community could probably figure out what to add to quasar.conf to include alternate CSS frameworks, if so desired.
• Users happy with Quasar’s default CSS can totally ignore the above.

Additional context New users who are already familiar with Tailwind or other CSS frameworks might be hesitant to try Quasar because it requires learning a new set of CSS classes and abandoning their existing knowledge. Additionally, people familiar with multiple CSS syntaxes might prefer to just use one in both Quasar and non-Quasar projects, as it can sometimes be difficult to switch between. Example q-my-md vs my-4 (Tailwind) for setting vertical margin.

Tailwind is a great project (so is Quasar), in the long term it may ease internal development by allowing Quasar devs to focus only on components and the framework and not so much on styling. Both use similar methodologies (utility-based) so it’s not like introducing a completely new way of thinking.

This is not the first time this idea has been raised, see also #4274 (specifically, here) and #5204

[PollieDev]

I have some projects which I would like to port to Quasar to be able to build them into an app and a website at the same time. All these sites are written with the use of Tailwind. Next to that, since Tailwind UI came out I use it quite often as I’m not the best with UX / UI.

Having to rename all the classes with a prefix is mission impossible. After building the quasar app, if I simply remove the following line in client-entry.js:

// We load Quasar stylesheet file
import 'quasar/dist/quasar.sass'

It all works like a charm!

I’m not requesting you to replace the quasar framework with Tailwind. But it would be nice to simply have an option to disable default styling. There are so many web devs that could potentially jump to quasar if they can use the tooling they are used to. But forcing them into your stylesheet will be a big downside if not a reason to not use Quasar at all (at least this is the case for me).

[timesignature]

@apply is just @extend renamed, which is a native to Stylus and SASS.

http://stylus-lang.com/docs/extend.html https://sass-lang.com/documentation/at-rules/extend

What I can agree on is the CSS purge, which we are researching.

I’ll leave the ticket open, but replacing the internal CSS in Quasar with some external framework is a no go.

how about giving your developers an option to choose wch styling framework they want,rather than make them focus on one thing because believe me brother i believe quasar is a great project just lacking some flexibility