Install Tailwind CSS with Meteor

Setting up Tailwind CSS in a Meteor project.

Start by creating a new Meteor project if you don't have one set up already. The most common approach is to use the Meteor CLI.

Terminal

npx meteor create my-project
cd my-project

Install @tailwindcss/postcss and its peer dependencies via npm.

Terminal

npm install tailwindcss @tailwindcss/postcss postcss postcss-load-config

Create a postcss.config.mjs file in the root of your project and add the @tailwindcss/postcss plugin to your PostCSS configuration.

postcss.config.mjs

export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

Add an @import for Tailwind CSS to your ./client/main.css file.

main.css

@import "tailwindcss";

Run your build process with npm run start.

Terminal

npm run start

Start using Tailwind’s utility classes to style your content.

App.jsx

export const App = () => (
  <h1 className="text-3xl font-bold underline">
    Hello world!
  </h1>
)