Se você deseja estilizar seus aplicativos com uma estrutura rápida, flexível e confiável, o Tailwind CSS é uma ótima opção. Tailwind é uma estrutura CSS que ajuda você a projetar componentes da Web personalizados. Você pode criar componentes sem precisar alternar entre arquivos HTML e CSS.

Ao contrário do Bootstrap, o Tailwind não possui classes pré-definidas. Em vez disso, você pode personalizar o seu próprio. Com o Tailwind, você pode criar componentes complexos com utilitários, funções e diretivas primitivos.

Aprenda a instalar e usar o Tailwind para criar interfaces de usuário incríveis em seus projetos Next.js.

Instalar Tailwind CSS em Next.js

Comece instalando o Tailwind em um aplicativo Next.js. O processo é semelhante ao instalando o Tailwind em um aplicativo React, com uma pequena diferença no processo de configuração.

Vou ao Instalação CSS do Tailwind página. Então vá para o

Guias de estrutura seção e selecione Next.js. Esta seção contém todas as instruções necessárias para configurar o Tailwind em seu projeto Next.js.

Para instalar o Tailwind via npm, o gerenciador de pacotes JavaScript, execute estes dois comandos de terminal:

npm install -D tailwindcss postcss autoprefixador
npx tailwindcss init -p

Esses comandos criam dois arquivos de configuração chamados tailwind.config.js e postcss.config.js na pasta raiz do projeto. Esses arquivos indicam que o TailwindCSS foi instalado com sucesso. Você também pode instalar o Tailwind CSS por meio da Tailwind CLI ou como um plug-in PostCSS.

Configurar modelos

Após a instalação, você deve configurar os caminhos de modelo fornecidos no guia de instalação para o arquivo de configuração do aplicativo. Adicione o seguinte código ao arquivo tailwind.config.js:

/** @tipo {import('tailwindcss').Config}*/
módulo.exportações = {
 contente: [ 
"./app/**/*.{js, ts, jsx, tsx}",
"./pages/**/*.{js, ts, jsx, tsx}",
"./components/**/*.{js, ts, jsx, tsx}",
// Ou se estiver usando o diretório `src`: 
"./src/**/*.{js, ts, jsx, tsx}",
 ],
 tema: { 
 ampliar: {},
 },
 plug-ins: [],
}

Adicionar diretiva Tailwind ao aplicativo

Em seguida, adicione as seguintes diretivas do Tailwind ao arquivo CSS do seu aplicativo. Este é o arquivo chamado global.css. Você deve excluir o conteúdo do arquivo global.css e adicionar as diretivas Tailwind.

base @tailwind;
componentes @tailwind;
utilitários @tailwind;

Executar processo de compilação

Agora, no terminal, execute a ferramenta CLI com o seguinte comando:

npm run dev

Este comando verifica seus arquivos de modelo em busca de classes e constrói seu CSS. Ele abrirá uma porta para você visualizar o navegador.

Agora, se você navegar até o servidor em http://localhost: 3000 você verá seu aplicativo. Você deve notar uma ligeira mudança no conteúdo. Isso indica que o processo de instalação foi bem-sucedido e o Tailwind CSS está ativo.

Use o Tailwind no projeto

Em seguida, vamos testar os recursos CSS do Tailwind aplicando classes ao seu projeto. Por exemplo, você tem um aplicativo com o texto "Hello Tailwind". Você quer dar a ele uma cor vermelha com um fundo azul claro.

Criar uma Home.tsx arquivo, em seguida, adicione o seguinte código:

exportarpadrãofunçãoLar() {
retornar (
"bg-blue-300">
'texto-vermelho-900'>Olá CSS do Tailwind</h1>
 </body>
 );
} 

Agora, ao navegar no navegador, você verá o texto alterado para vermelho e o fundo azul.

Você pode explorar outros recursos CSS do Tailwind para estilizar outros componentes do seu aplicativo. Os modificadores condicionais permitem que você crie estados reativos como foco e foco. Você também pode personalizar suas páginas para os modos escuro e claro de acordo com a preferência do usuário.

Vantagens de usar Tailwind CSS

Feito por Adam Wathan em 2017, o Tailwind CSS difere de outras bibliotecas CSS de várias maneiras. Ele tem tempo de execução zero, tornando-o extremamente rápido. E é fácil de instalar. O Tailwind verifica todos os arquivos HTML e componentes JavaScript em busca de nomes de classes em seu aplicativo. Em seguida, gera os estilos correspondentes que desenham os elementos.

Tailwind CSS permite que você crie componentes complexos a partir de utilitários primitivos. Você pode reutilizar estilos em componentes e usar modificadores para estilizar UIs responsivas. Use as etapas aqui para saber como instalar e usar Tailwind CSS para personalizar aplicativos que correspondam à sua marca.