DEV Community

Frederico Maia
Frederico Maia

Posted on • Updated on

Installing Tailwind CSS in a Meteor project

Versão em português deste post.

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

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

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

Meteor is not yet compatible with Tailwind 3.

Install Meteor package for postcss

Install juliancwirko:postcss and remove the Meteor standard minifier.

meteor remove standard-minifier-css
meteor add juliancwirko:postcss
Enter fullscreen mode Exit fullscreen mode

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

Include Tailwind in your CSS

Add Tailwind to your main.css file.

// main.css
@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

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: [],
}
Enter fullscreen mode Exit fullscreen mode

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: [],
}
Enter fullscreen mode Exit fullscreen mode

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

Discussion (3)

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

Collapse
fredmaiaarantes profile image
Frederico Maia Author

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...

Collapse
marcelweidum profile image
Markel

Okay I will do that! Thank you 🙏🏻