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.
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).
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
$ meteor npm install tailwindcss
add the npm package needed to process the css:
$ meteor npm install --save-dev postcss postcss-load-config autoprefixer
$ 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