DEV Community

loading...
Cover image for Add Tailwind CSS to your Quasar project in 5 minutes or less.

Add Tailwind CSS to your Quasar project in 5 minutes or less.

eltoritoelvis profile image Elvis Ibarra ๐Ÿƒ ใƒป1 min read

Why do this?

I've been building a passion project of mine, Jiujitsio, in Quasar for the past few months and wanted to implement Tailwind styling when prototyping new or creating custom components.

Step 1 - Install Tailwind

Install Tailwind via NPM or Yarn.

Install via npm or yarn screenshot

Step 2 - Add Tailwind to your CSS.

Import Tailwind Directives. Add the following in between the style tags of any Quasar component you wish to style with Tailwind.

Tailwind directives screenshot

Step 3 - Process your CSS with Tailwind

Since Vue styles are piped through PostCSS we are going to need to modify our .postcssrc.js file to require Tailwind.

Alt Text

Step 4 - Profit & Next Steps

That's it! Any Quasar components in your project where you add the Tailwind directives will now respond to Tailwind class styling. You can also optionally also add a Tailwind config file (may be a follow up post) for further customization.

Video Demo:

Relevant Docs:

Discussion (3)

Collapse
linnaek profile image
LinnaeK

Thank you for these clear directions. I have been trying to attach Tailwind to Quasar components (ex q-input) that already have their own CSS. So far the Quasar CSS has been overwriting most of the Tailwind CSS. Do you have suggestions on how to reverse this? (my Tailwind classes are prefixed with tw-)

Collapse
eltoritoelvis profile image
Elvis Ibarra ๐Ÿƒ Author

Hi LinnaeK ๐Ÿ‘‹,

โ€จโ€จThanks for your question. Iโ€™m currently sticking to using Quasarโ€™s CSS in my own project rather than trying to fight with the framework as I donโ€™t think there currently is a way to fix the conflicts you described.

I mainly wrote that for fun and would wait until/if this is fixed before trying to use Tailwind & Quasar together on a production app without running into these issues.

โ€จโ€จThereโ€™s an open issue about this on Quasarโ€™s Github page. โ€จโ€จ

I hope they are able to โ€œfixโ€ this as I would love to be able to use either or both options.

Collapse
ciokan profile image
Romeo Mihalcea

Pictures as code - the coolest thing to post in programming articles.

Forem Open with the Forem app