Instalando Tailwind CSS 2 em um projeto Meteor 2.6

English version.

Atualização: este tutorial é para o Meteor 2.6 e versões anteriores. Meteor agora tem suporte ao Tailwind 3, você pode seguir este post mais recente Meteor.js with React and Tailwind CSS 3.

Meteor é um framework JS super produtivo que nos permite implementar funcionalidades tanto no backend quanto no frontend. Tailwind é um framework CSS para construirmos websites e apps modernos. A combinação dos dois nos dá um excelente combo!

O Tailwind CSS tem algumas particularidades na hora de fazer o build e parse das nossas páginas, por isso precisamos de alguns passos para integrá-los.

Criando seu projeto

Inicie criando um novo projeto Meteor se você ainda não possui um criado, entre no diretório do projeto e o execute para garantir que está tudo certo.

meteor create my-project
cd my-project
meteor run

Por padrão, Meteor usa React e cria um subdiretório chamado my-project.

Instalando Tailwind via npm

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

É recomendado utilizar o comando meteor npm ao invés de somente npm para usar a versão do npm que já vem com o próprio Meteor.

Meteor ainda não é compatível com Tailwind 3.

Instalando um pacote Meteor para postcss

Instale juliancwirko:postcss e remova o minificador padrão do Meteor.

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

Configure o postcss

Crie um arquivo chamado .postcssrc.js, adicione o tailwindcss e o autoprefixer à sua configuração do PostCSS.

// .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 {};
  }
};

Inclua o Tailwind em seu CSS

Adicione o Tailwind ao seu arquivo main.css.

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

Configure o Tailwind

Crie um arquivo chamado tailwind.config.js com o conteúdo abaixo:

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

Construindo seu CSS

Quanto estiver construindo seu app para produção, garanta que configurou a opção de purge para remover quaisquer classes de CSS não utilizadas para ter o menor tamanho de arquivo possível:

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

Referências:
https://tailwindcss.com/docs/installation
https://github.com/meteor/examples/tree/main/tailwindcss