DEV Community

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.

Elvis Ibarra 🐃 on May 28, 2020

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...
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 🐃

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.

Collapse
 
ifierygod profile image
Goran Kortjie

This is funny 😄 but imagine building an entire website and all you have to do is send it pictures of code.

Collapse
 
thekhairul profile image
thekhairul

Thanks for the concise article. Adding tailwind modules (utilities, components, base) in my component increased compile time considerably. I then moved those in the entry css file (app.scss). Working great :)

Collapse
 
psanchezp31 profile image
Paula Sánchez P

Hi guys, I just wanted to let you know, that this worked for me but only installing this versions:
npm i -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9.
Thank you..