O Tailwind CSS é um framework CSS utilitário que permite aos desenvolvedores projetar componentes web personalizados sem alternar para um arquivo CSS. Neste tutorial, você aprenderá como instalar o Tailwind CSS no React e como você pode usá-lo para construir uma página React simples.

Por que usar Tailwind CSS?

Já existem muitos CSS frameworks que simplificam a forma como os desenvolvedores projetam páginas da web. Então, por que você deve usar Tailwind CSS?

Estruturas CSS, como Bootstrap e Foundation, são estruturas opinativas, o que significa que fornecem aos desenvolvedores componentes predefinidos que possuem estilos padrão. Isso limita a personalização e a criatividade, e você acaba com sites que parecem bastante genéricos.

Tailwind CSS, no entanto, é uma estrutura que prioriza a utilidade que oferece a você o controle criativo para criar componentes dinâmicos. E, ao contrário do Bootstrap, você pode personalizar facilmente os designs como quiser.

Outra vantagem de usar Tailwind CSS é que você acaba com um tamanho de pacote CSS pequeno, pois remove todos os CSS não utilizado durante o processo de compilação (que é diferente do Bootstrap, pois inclui todos os arquivos CSS no Construir).

Saiba mais sobre o diferenças entre Tailwind CSS e Bootstrap do nosso artigo sobre o tema.

Desvantagens de Usar Tailwind CSS

Tailwind CSS tem uma curva de aprendizado íngreme, mesmo para desenvolvedores experientes. Leva algum tempo para aprender a usar completamente as classes de utilitários e pode ser necessário consultar a documentação com frequência. No entanto, depois de se familiarizar com as classes, você achará mais fácil e rápido em comparação com CSS simples.

A maioria dos desenvolvedores gosta de seguir o princípio da separação de interesses, de modo que os arquivos CSS e HTML sejam escritos em arquivos diferentes. Com Tailwind CSS, você escreve o CSS diretamente na marcação HTML - uma desvantagem para alguns.

Mesmo com essas desvantagens, Tailwind CSS é uma estrutura que você deve considerar seriamente se já estiver confortável com CSS e quiser construir designs mais rapidamente.

Primeiros passos: crie um projeto React

Execute o seguinte comando no terminal para criar um scaffold Reagir aplicativo usando criar-reagir-aplicativo.

npx create-react-app react-tailwind

criar-reagir-aplicativo fornece uma maneira fácil de criar um aplicativo React sem configurar ferramentas de compilação como webpack, babel ou linters. Isso significa que você acaba com um ambiente React funcionando em poucos minutos.

O comando acima cria uma nova pasta chamada reagir-vento de cauda. Navegue até a pasta e abra-a usando seu editor de texto preferido.

cd reagir-vento de cauda

Em seguida, instale o Tailwind CSS e configure-o para funcionar com o aplicativo React.

Use Tailwind CSS em React

Instale o Tailwind CSS e suas dependências com este comando:

npm instala tailwindcss postcss autoprefixer

Pós CSS usa plugins JavaScript para tornar o CSS compatível com a maioria dos navegadores. Ele verifica o navegador em que o aplicativo está sendo executado e determina os polyfills necessários para que seu CSS funcione perfeitamente. Autoprefixer é um plugin PostCSS que usa valores de caniuse. com para adicionar automaticamente prefixos de fornecedor às regras CSS.

Inicialize o CSS do Tailwind

Execute o inicialização do vento de cauda comando para gerar arquivos de configuração padrão Tailwind CSS.

npx tailwindcss init

Isso cria tailwind.config.js na pasta raiz que armazena todos os arquivos de configuração do Tailwind e contém o seguinte:

modulo.exports = {
 contente: [],
 tema: {
 ampliar: {},
 },
 plug-ins: [],
}

Configurar caminhos de modelo

Você precisa informar ao Tailwind CSS os arquivos que ele deve verificar para ver quais classes CSS estão sendo usadas. Isso permite que o Tailwind identifique e remova as classes não utilizadas e, portanto, reduz o tamanho do CSS gerado.

Dentro tailwind.config.js, adicione os caminhos do modelo na chave de conteúdo.

modulo.exports = {
 contente: [
 "./src/**/*.{js, jsx, ts, tsx}",
 ],
 tema: {
 ampliar: {},
 },
 plug-ins: [],
}

Injetar CSS Tailwind no React

O próximo passo é incluir Tailwind CSS no aplicativo usando @tailwind diretivas.

Excluir tudo em index.css e adicione o seguinte para importar os estilos base, componentes e utilitários.

@base de vento de cauda;
componentes @tailwind;
utilitários @tailwind;

Por fim, certifique-se index.css é importado em index.js e Tailwind CSS estará pronto para uso.

Usando Tailwind CSS para estilizar um componente React

Você irá criar a página web simples abaixo e estilizá-la usando as classes utilitárias do Tailwind.

Esta página contém duas seções principais: uma Barra de navegação, e a seção hero (que tem um título e um botão).

Para ilustrar como o Tailwind CSS facilita a escrita de CSS, tente estilizar a página da Web usando CSS simples e Tailwind CSS.

Comece modificando o App.js no src pasta para remover o código desnecessário.

importar './App.css'
função App() {
 Retorna (



 );
}
exportar aplicativo padrão;

Em seguida, adicione o conteúdo da página da Web ao App.js.

import "./App.css";
função App() {
 Retorna (







 Tailwind CSS facilita o estilo dos componentes React!



Iniciar






 );
}

Para usar CSS simples, adicione o CSS a App.css.

navegação {
 exibição: flexível;
 justificar-conteúdo: espaço-entre;
 preenchimento: 16px 36px;
 cor: #000;
 box-shadow: 0px 2px 5px 0px rgba (168, 168, 168, 0,75);
}
.logo {
 tamanho da fonte: 18px;
 intensidade da fonte: Negrito;
}
ul {
 estilo de lista: nenhum;
 exibição: inline-flex;
}
ul li {
 margem esquerda: 16px;
 cursor: ponteiro;
}
.hero {
 exibição: flexível;
 direção flexível: coluna;
 alinhar-itens: centro;
 margem superior: 64px;
}
h1 {
 tamanho da fonte: 36px;
 alinhamento de texto: centro;
}
.btn {
 cor de fundo: #000000;
 cor: #ff;
 preenchimento: 10px;
 largura: conteúdo de ajuste;
 margem superior: 36px;
}

Com Tailwind CSS, você não precisa escrever as regras CSS para cada classe. Em vez disso, você usa classes de utilitário. Essas são classes com escopo para uma única propriedade CSS. Por exemplo, se você deseja criar um botão com fundo preto e cor de texto branca, você precisa usar o botão bg-preto e texto-branco aulas de utilidade.

App.js deve ficar assim.

função App() {
 Retorna (







 Tailwind CSS facilita o estilo dos componentes React!




 Iniciar







 );
}

Você não precisa importar App.css já que os estilos gerados pelo Tailwind CSS são armazenados em index.css em que você importou index.js mais cedo.

Comparado ao CSS simples, essa abordagem resulta em menos código que é fácil de entender.

Código em grande estilo com Tailwind CSS

Neste artigo, você aprendeu sobre o Tailwind CSS, seus pontos fortes, desvantagens e como você pode usar suas classes utilitárias em aplicativos React. Além das classes, o Tailwind CSS também oferece outros recursos adicionais, incluindo a capacidade de criar layouts responsivos e componentes reutilizáveis.

Mas, como mencionamos anteriormente, o Tailwind está longe de ser o único framework CSS no mercado. Qual você usará para o seu próximo projeto?

Tailwind CSS vs. Bootstrap: Qual é o melhor framework?

Ao escolher um framework CSS, é importante encontrar aquele que atenda aos seus requisitos.

Leia a seguir

Sobre o autor