quasar-app-extension-tailwindcss-3

TailwindCSS

This extension makes it easy to integrate TailwindCSS (https://tailwindcss.com/) into Quasar (https://quasar.dev).

Install

This extension now uses TailwindCSS v3.2.24.

quasar ext add tailwindcss-3

in order to make dark variant works, you need to add a watcher to adjust html element as quasar uses body element for controlling darkMode there is a composable helper

// inside App.vue mostly or where you handle DarkMode
import { TailwindDarkFix } from 'src/composables/tw-dark-fix';

setup(){
  // this does the trick of handling tailwind dark styles
  TailwindDarkFix();
}

==> Note: as of tailwind 3 dark mode is enabled by default as 'media', to make our settings work it will be predefiened as 'class' attribute on tailwind config.

==> and if you are not using tailwind dark utils you can disable it by removing darkMode from config file.

===> For nesting rules:

if you need to use @apply inside .vue files styles

just add

// .postcssrc.js or postcss.config.js depending on your setup.

require('tailwindcss')('src/extensions/tailwindcss/tailwind.config.js')

Credits

Author: Ahmed Shehab [e-mail]

License: MIT

Issues:

In case of any issues, please submit it to https://github.com/risha700/quasar-app-extension-tailwindcss-3/issues