Using Tailwind with every Meteor project

announce
1

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

8 Likes
2

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
3

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

4

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
5

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
6

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

7

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

8

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
9

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
10

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
11

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
12

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

2 Likes
13

Hey there! Link is not working anymore

14

You can try using this link.

Using Tailwind.css in a Meteor project | by Stefan Ledin | ITNEXT

15

We have an example in our official repo of examples https://github.com/meteor/examples/tree/main/tailwindcss

16

Hi @filipenevola can you by any chance provide an example (or an idea how to make it work) of tailwind with the new Just in Time Mode working?

This thread doesnt seem to go anywhere.

Just in Time drastically improves tailwind imo, and I would love to use it in my meteor projects.

EDIT: Actually I just found a way and posted it in the thread.

17

I have started a project with a setup identical to the example at https://github.com/meteor/examples/tree/main/tailwindcss . I works fine on dev server but I ran into problems when I wanted to build it. The build stops with an error when you import additional css files in js files (Easy reproducible in example).

18

I’m building an app with Tailwind and Meteor and I don’t see any issues on building it.

What is the issue that you are getting @janmp ?

19

I’ll reply in the other topic. New Tailwind CSS JIT compiler

20

I switched from tailwind to GitHub - tw-in-js/twind: The smallest, fastest, most feature complete Tailwind-in-JS solution in existence.
So any configuration problems with tailwind are just gone and it’s fast, flexible and overall quite enjoyable.

I just tried to reproduce the problem I have had with tailwind, but it seems to work now.