Installing Tailwind CSS 2 in a Meteor project

Versão em português.

Update: this tutorial is for Meteor 2.6 and lower versions. Meteor now supports Tailwind 3, you can follow a more recent blog post Meteor.js with React and Tailwind CSS 3.

---

Meteor is a super productive JS framework that allows us to implement functionalities in both the backend and the frontend sides. Tailwind is a CSS framework for building modern websites and apps. The combination of the two gives us an excellent combo!

Tailwind CSS has some peculiarities when it comes to building and parsing our pages, so we need some steps to integrate them.

Creating your project

Start by creating a new Meteor project if you don’t have one set up already, enter in the project folder and run it to make sure it is all correct.

meteor create my-project
cd my-project
meteor run

By default, it uses React and makes a subdirectory named my-project.

Install Tailwind via npm

meteor npm install tailwindcss@2.2.19 postcss@8.3.1 postcss-load-config@3.1.0 autoprefixer@10.4.0

It is recommended to use meteor npm command instead of only npm to use the npm version bundled with Meteor itself.

Install Meteor package for postcss

Install juliancwirko:postcss and remove the Meteor standard minifier.

meteor remove standard-minifier-css
meteor add juliancwirko:postcss

Configure postcss

Create a file named .postcssrc.js, add tailwindcss and autoprefixer to your PostCSS configuration.

// .postcssrc.js
module.exports = ctx => {
  // This flag is set when loading configuration by this package
  if (ctx.meteor) {
    const config = {
      plugins: {
        tailwindcss: {},
        autoprefixer: {},
      },
    };

    if (ctx.env === 'production') {
      // "autoprefixer" is reported to be slow,
      // so we use it only in production.
      config.plugins.autoprefixer = {
        overrideBrowserslist: ['defaults'],
      };
    }

    return config;
  } else {
    return {};
  }
};

Include Tailwind in your CSS

Add Tailwind to your main.css file.

// main.css
@tailwind base;
@tailwind components;
@tailwind utilities;

Configure Tailwind

Create a tailwind.config.js file with the content below:

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

Building your CSS

When building for production, be sure to configure the purge option to remove any unused classes for the smallest file size:

// tailwind.config.js
module.exports = {
  purge: ['./imports/ui/**/*.{js,jsx,ts,tsx}', './public/*.html'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

References:
https://tailwindcss.com/docs/installation
https://github.com/meteor/examples/tree/main/tailwindcss

Comments

[Markel]

Any idea how you get JIT working with tailwindcss ^3? JIT is buildin with tailwindcss 3 and onsave it's not regenerating CSS files.

[Frederico Maia]

Hey @marcelweidum, JIT doesn't work with Meteor at the moment. We have it in our roadmap to be worked out soon.

What you could right now is a workaround by using Postcss as a separate process from Meteor. You can see how to do it here: github.com/Meteor-Community-Packag...

[Markel]

Okay I will do that! Thank you 🙏🏻