DEV Community

loading...
Cover image for Using Tailwindcss on Meteor projects

Using Tailwindcss on Meteor projects

maxbertinetti profile image Massimiliano Bertinetti Updated on ・2 min read

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 fullscreen mode Exit fullscreen mode

enter in the freshly baked app:

$ cd my-app
Enter fullscreen mode Exit fullscreen mode

remove the standard minifier:

$ meteor remove standard-minifier-css
Enter fullscreen mode Exit fullscreen mode

add the postcss processing package:

$  meteor add hexsprite:postcss
Enter fullscreen mode Exit fullscreen mode

add Tailwindcss:

$ meteor npm install tailwindcss
Enter fullscreen mode Exit fullscreen mode

add the npm package needed to process the css:

$ meteor npm install --save-dev postcss postcss-load-config autoprefixer
Enter fullscreen mode Exit fullscreen mode

configure tailwind

$ npx tailwind init
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

Change some class on main.html like:

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

then start meteor and enjoy!

$ meteor run
Enter fullscreen mode Exit fullscreen mode

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

Discussion (9)

pic
Editor guide
Collapse
mudgen profile image
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.

Collapse
maxbertinetti profile image
Massimiliano Bertinetti Author

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

Collapse
mudgen profile image
Nick Mudge

Awesome!

Collapse
geongeorge profile image
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
Collapse
carlosmc profile image
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!

Collapse
gorbus profile image
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.

Collapse
mtc profile image
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).

Collapse
gorbus profile image
Gorbus • Edited

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

Collapse
maxbertinetti profile image
Massimiliano Bertinetti Author

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?