This extension makes it easy to integrate TailwindCSS (https://tailwindcss.com/) into Quasar (https://quasar.dev).
This extension now uses TailwindCSS v3.3.3.
quasar ext add tailwindcss-3in 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')
Author: Ahmed Shehab ahbox@outlook.com
In case of any issues, please submit it to https://github.com/risha700/quasar-app-extension-tailwindcss-3/issues