This content originally appeared on DEV Community and was authored by Frederico Maia
Criando seu projeto
Inicie criando um novo projeto Meteor se você ainda não um configurado, 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@latest postcss@latest postcss-load-config@latest autoprefixer@latest
É 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.
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
This content originally appeared on DEV Community and was authored by Frederico Maia
Frederico Maia | Sciencx (2021-11-10T00:05:06+00:00) Instalando Tailwind CSS em um projeto Meteor. Retrieved from https://www.scien.cx/2021/11/10/instalando-tailwind-css-em-um-projeto-meteor/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.