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
Top comments (3)
Any idea how you get JIT working with tailwindcss ^3? JIT is buildin with tailwindcss 3 and onsave it's not regenerating CSS files.
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...
Okay I will do that! Thank you 🙏🏻