2

Instalando Tailwind CSS em um projeto Meteor

 2 years ago
source link: https://dev.to/fredmaiaarantes/instalando-tailwind-css-em-um-projeto-meteor-gl4
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

English version of this post.

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
Enter fullscreen modeExit fullscreen mode

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
Enter fullscreen modeExit fullscreen mode

É 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
Enter fullscreen modeExit fullscreen mode

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 {};
  }
};
Enter fullscreen modeExit fullscreen mode

Inclua o Tailwind em seu CSS

Adicione o Tailwind ao seu arquivo main.css.

// main.css
@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen modeExit fullscreen mode

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: [],
}
Enter fullscreen modeExit fullscreen mode

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: [],
}
Enter fullscreen modeExit fullscreen mode

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


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK