Using Tailwind with every Meteor project

Hi pals!

I just write an article about using Tailwind with updated Postcss package and purging css in production.

Here is the link: https://dev.to/acciaiodigitale/using-tailwindcss-on-meteor-projects-273m

6 Likes

Nice work on your tutorial of Meteor + TailwindCSS @saknussemm, it looks very easy to use the two together.

Have you tried this primarily with Blaze so far? Or have you tried React, Vue, Svelte front-ends with your configuration? Great work! :rocket:

1 Like

For now only Blaze on Web and Cordova Android app.
Want to use also Alpine and make it simple for now.

There is also the option to use RunCSS, which is a new runtime version of TailwindCSS: https://dev.to/mudgen/runcss-a-runtime-version-of-tailwindcss-5dic

2 Likes

I just installed Meteor 1.11 and I created a project with the new meteor create --vue option.
With the base article I wrote and a couple of change is also possible to add Tailwindcss to a Vue Meteor application!

2 Likes

Thanks for the write up! Were you able to deploy this? I’m able to develop locally, but the css doesn’t run when I push to Galaxy or other servers

Not for now, also because I’m experimenting with Quasar / Meteor integration.
Another interesting alternatives to Tailwind for not having problem with compilation is Bonsai.css

Thanks! I was actually able to figure it out thankfully. My folder structure was a bit different, so I forgot to account for that when deploying to production.

1 Like

Yeah, folder structure must be taken in account on Meteor, I have the same problem now with Quasar. It took an entire day to find a solution that work smoothly.

1 Like

Could you tell us what you had to do ?

We’re trying to use tailwind with meteor and reactJS and somehow it’s not working in our production environment.

1 Like

I ended up having all of these in my purge array in my tailwind config:

purge: [
    "./client/**/*.html",
    "./client/**/*.vue",
    "./client/**/*.jsx",
    "./client/**/*.js",
    "./imports/ui/**/*.js",
    "./imports/ui/**/*.jsx"
  ],

The important files are the tailwind.config.js and the .postcssrc.js. Let me know if that helps

2 Likes

It worked. THanks a lot. I thought we needed only the entry points, not all files. It’s clear now :slight_smile:

2 Likes