I’ve been tinkering around with Meteor, a full-stack JavaScript framework, quite a bit lately.

It’s fun! Since I’m more used to WordPress and Laravel, it’s interesting to dive into the Node world. The two way data binding thing between frontend and backend is really cool in Meteor!

However, this brave new world comes with different solutions that you’re not used to. For example, SCSS compilation works out of the box in Laravel thanks to Laravel Mix.

But how does such things work in Meteor?

I’ve started to become a big fan of the utility framework Tailwind CSS lately.

So how do I include Tailwind into Meteor? I could of course just add a <link> tag and download it from the CDN, but hey, that’s cheating! 😎 I should of course use NPM!

1. Install Tailwind

The Tailwind documentation says the following:

For most projects, you’ll want to add Tailwind as a PostCSS plugin in your build chain.

Okey, so I guess I need to add a PostCSS step to Meteor’s build system…? 😳

But let’s begin with installing Tailwind first:

$ meteor npm install tailwindcss --save-dev

And generate the tailwind.js configuration file:

$ ./node_modules/.bin/tailwind init

Then, add the Tailwind CSS to the client/main.css file:

2. PostCSS

Okey, let’s try to get this PostCSS thing up and running. The Meteor documentation has a section about PostCSS, so that’s a good starting point:

2.1. Install the PostCSS package

This is pretty straight forward:

$ meteor remove standard-minifier-css

$ meteor add juliancwirko:postcss

But if you take a look at the documentation for the PostCSS package, you’ll find this third step which isn’t included in the Meteor documentation:

$ meteor npm install --save-dev postcss@6.0.22 postcss-load-config@1.2.0

2.2. Imports with PostCSS

If you scroll down on the documentation page, you’ll see a section talking about imports. That’s something we also need!

Let’s install it:

$ meteor npm install postcss-import --save-dev

3. Package.json

Almost there! Now we need to add some PostCSS configuration to the package.json file.

{

...

"postcss": {

"plugins": {

"postcss-import": {},

"tailwindcss": {}

}

}

...

}

Then run:

$ npm update

$ meteor #(You have to restart meteor)

What I believe this means is that we’re telling the PostCSS package to use the postcss-import and tailwindcss plugins in the build step. postcss-import allows us to import components into our stylesheet. But I’m new to this and not sure about anything…🙄🤷🏻‍♂️

That reminds me of the last step…

4. Update main.css

The Tailwind CSS says the following in the comments:

/*

* If using `postcss-import`, use this import instead:

*

* @import "tailwindcss/preflight"

*/

@tailwind preflight;

Wait! We ARE using postcss-import ! So let’s update the stylesheet so it looks like this instead:

And here’s the package.json file:

Now, your client/main.css file should be compiling and containing all the Tailwind CSS!

I don’t know if this is the best way to include Tailwind into your Meteor application, but it’s working! It took me quite some time to get it working, so I hope this can help someone else! 😃