Instalando Tailwind CSS 2 em um projeto Meteor 2.6
Tags: meteor, javascript, node
Published: 2021-11-10 00:05:06

[English version](https://dev.to/fredmaiaarantes/installing-tailwind-in-a-meteor-project-2b6h).

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](https://blog.meteor.com/meteor-js-with-react-and-tailwind-css-3-3e878645451e).

------

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](https://meteor.com) 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](https://github.com/Meteor-Community-Packages/meteor-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