Meteor.js with React and Tailwind CSS 3

We all know that Meteor is a super productive JS framework that allows us to create full-stack projects. React.js is a widely used UI library for building web apps. And Tailwind is a CSS framework for building modern websites and apps. The combination of the three gives us an excellent combo!

Meteor.js with React and Tailwind CSS 3

We use them in some internal projects, and we are very happy with this choice. Meteor supports Tailwind CSS 3 from the recently released 2.7 version.

Tailwind CSS has some peculiarities when building and parsing our pages, so we need to do some steps to integrate them. In this post, we will create a starter project combining those 3 technologies: Meteor, React, and Tailwind.

Spoiler alert: we are creating a new skeleton for Tailwind. You will be able to use a tailwind flag and get a Meteor + React + Tailwind app ready to use.

Create your project

Start by creating a new Meteor project. Before moving to the next step, enter the project folder and run it to make sure it is all correct. By default, Meteor uses React and when the project is created it creates a subdirectory with the same name.

$ meteor create tailwind-with-meteor
$ cd tailwind-with-meteor
$ meteor run

You should see the screen below:

The default generated Meteor app with a counter

Install Tailwind CSS

Install tailwindcss and its peer dependencies, and then run the init command to generate both tailwind.config.js and postcss.config.js. It is recommended to use the meteor npm command instead of only npm to use the version bundled with Meteor itself.

$ meteor npm install tailwindcss postcss autoprefixer postcss-load-config
$ npx tailwindcss init -p

Configure your template paths

The content section of your tailwind.config.js file is where you configure the paths to all of your HTML templates, JavaScript components, and any other source files that contain Tailwind class names.

module.exports = {
  content: ["./imports/ui/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Include Tailwind in your CSS

Add Tailwind directives to your main.css file.

@tailwind base;
@tailwind components;
@tailwind utilities;

Let’s add some Tailwind classes to the h1 element from the ./imports/ui/App.jsx file to check if it is all good.

export const App = () => (
  <div>
    <h1 className="text-3xl text-indigo-800">
      Welcome to Meteor + Tailwind!
    </h1>
    <Hello/>
    <Info/>
  </div>
)

Open your app, and you should see its title styled by Tailwind as the screenshot below:

Of course, this is pretty simple, but now you can apply any Tailwind classes to your app. You can see this simple web app running if you access this URL.

Please test it out and give us your feedback. See you in the next one!

References:

Originally posted on Meteor Blog.