tailwind-cssquasar-frameworkquasar

How to use Tailwind CSS with Quasar framework?

I have been trying to use Tailwind to custom the Quasar components, but the Quasar CSS has been overwriting most of the Tailwind CSS.

I added a prefix to my tailwind.config.js and my Tailwind classes are prefixed with tw- like in the example below.

module.exports = {
  prefix: 'tw-',
}
Solution

  • There is a dedicated issue on Quasar's github

    As a Quasar dev said, prefixing tailwind classes is the recommended way of doing so. So you're right!

    To go deeper, the most interesting part seems about using Unocss to play with its presets for other frameworks like Tailwind

    Edit

    It seems like the team is considering UnoCSS integration and making Quasar's CSS swappable with Tailwind for Quasar v3 https://github.com/orgs/quasarframework/projects/2?pane=issue&itemId=1451670