Instalando Tailwind CSS 2 em um projeto Meteor 2.6
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: