Using Tailwindcss on Meteor projects

Introduction

I am a longtime fan of Meteor (since 2015) and I had appreciated its qualities as a full-stack framework.
Unfortunately, there were often problems and development was not always simple and straightforward.
Recently the team updated many components and improved compatibility with the node ecosystem and I decided to try if the use of this platform had returned to being what I expected: an environment where you can quickly move from the idea to a prototype of reactive application.

I'm not a front-end guy

Not being a programmer with great aesthetic and interface skills, I recently learned to appreciate Tailwindcss which, as emphasized on the site, is "A utility-first CSS framework for rapidly building custom designs".
I needed to integrate Postcss into the Meteor build flow in order to make the best use of all Tailwindcss features.

I discovered on the chat of the Community Meteor on Slack that the package that integrates Postcss has been updated very recently and therefore allows you to use the features that make development pleasant (such as build and automatic reload at each code change both on the server and front-end) and facilitate the release of the application in production (Tailwindcss needs PurgeCSS to eliminate the classes not used by the css to decrease its size).

Talk is cheap: show me how to do!

Ok, so let's start. Open a terminal and create a basic Meteor application in a directory of your choice, I'll try to explain every what every needed command do:

$ meteor create my-app

enter in the freshly baked app:

$ cd my-app

remove the standard minifier:

$ meteor remove standard-minifier-css

add the postcss processing package:

$  meteor add hexsprite:postcss

add Tailwindcss:

$ meteor npm install tailwindcss

add the npm package needed to process the css:

$ meteor npm install --save-dev postcss postcss-load-config autoprefixer

configure tailwind

$ npx tailwind init

it create tailwind.config.js. Enter the file and change it to purge classes from the files:

Note: you probably don't need all 3 files type...but you already know this ;-)

create the postcss configuration.

Here we need to have different behavior for development and production for optimizing both, so we purgecss only when we build for production, since is a long process that we don't need durin development.

Add Tailwind to the main.css file:

@tailwind base;
@tailwind components;
@tailwind utilities;

Change some class on main.html like:

<h1 class="text-xl text-blue-500 uppercase">Hello, TailwindCSS!</h1>

then start meteor and enjoy!

$ meteor run

Note: You will receive a warning about configuration of Autoprefixer, as I said I'm not a front-end guy so I leave it to you working on this.

Replace Autoprefixer browsers option to Browserslist config.
Use browserslist key in package.json or .browserslistrc file

Comments

[Nick Mudge]

Hey, I just released RunCSS which is a runtime version of TailwindCSS. See here: dev.to/mudgen/runcss-a-runtime-ver...

I am interested in your thoughts about it.

[Massimiliano Bertinetti]

It seems really interesting, like your other project Webscript. I'll give a deeper look soon!

[Nick Mudge]

Awesome!

[Geon George]

Thank you for this great article!
I got an issue following this.
It says

Invalid PostCSS Plugin found: [1]

The fix

Now, Plugin 1 in postcss config is autoprefixer (0->tailwind, 1->autoprefeixer)

It seems to be an issue of autoprefixer 10

For anyone with the same issue, roll back to version 9 of autoprefexer.

package.json

"autoprefixer": "^9.8.6",

and

meteor npm install

[CarlosMC]

Hi, I just found out tailwindcss and I'm also a fan of Meteor full-stack framework. I'll start a new project using both so this article helped me a lot. Thank You!

[Gorbus]

Hey,

We are using this config for our Meteor/react project and while it works locally we can't manage to have it work in production. Any idea what could be the cause ? None of the styling exists when live.

[MichelAtGithub]

Hi,

Have you found a solution for your Meteor/react project. I'm bumping my head against the same problem. Copying all tailwindcss to the main.css file seems to be a very stupid solution (though it works).

[Gorbus]

the main problem was to make sure all the javascript files are in the purge in tailwind.config.js and not only your entry point.

In our case we have:

./client/ * * / * .html
./client/ * * / * .jsx
./client/ * * / * .js
./imports/ui/ * * / * .js
./imports/ui/ * * / * .jsx

don't keep the space between the * but there was auto restyling if I was putting them together

[Massimiliano Bertinetti]

Really, I never tried with React.
Where you put in production?
Is the code on a public repo where is possible to see the code?