Como instalar e usar Tailwind CSS em um aplicativo Next.js
Tailwind CSS é fácil de instalar e usar com Next.js, apenas certifique-se de configurá-lo corretamente primeiro.
Se você deseja estilizar seus aplicativos com uma estrutura rápida, flexível e confiável, Tailwind CSS é uma ótima opção. Tailwind é uma estrutura CSS que ajuda você a projetar componentes web personalizados. Você pode projetar componentes sem precisar alternar entre arquivos HTML e CSS.
Ao contrário do Bootstrap, o Tailwind não possui classes predefinidas. Em vez disso, você pode personalizar o seu próprio. Com o Tailwind, você pode construir componentes complexos com utilitários, funções e diretivas primitivas.
Aprenda como instalar e usar o Tailwind para criar interfaces de usuário incríveis em seus projetos Next.js.
Instale Tailwind CSS em Next.js
Comece instalando o Tailwind em um aplicativo Next.js. O processo é semelhante à instalação do Tailwind em um aplicativo React, com uma pequena diferença no processo de configuração.
Vá para a página de instalação do Tailwind CSS. Em seguida, vá para a seção Guias de estrutura 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 autoprefixer
npx tailwindcss init -pEsses comandos criam dois arquivos de configuração chamados tailwind.config.js e postcss.config.js na pasta raiz do projeto. Esses arquivos indicam que TailwindCSS foi instalado com sucesso. Você também pode instalar o Tailwind CSS por meio da CLI do Tailwind ou como um plugin 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 seu aplicativo. Adicione o seguinte código ao arquivo tailwind.config.js:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./app/**/*.{js,ts,jsx,tsx}",
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
// Or if using `src` directory:
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
Adicionar diretiva Tailwind ao aplicativo
Em seguida, adicione as seguintes diretivas Tailwind ao arquivo CSS do aplicativo. Este é o arquivo denominado global.css. Você deve excluir o conteúdo do arquivo global.css e adicionar as diretivas Tailwind.
@tailwind base;
@tailwind components;
@tailwind utilities;Executar processo de construção
Agora, no terminal, execute a ferramenta CLI com o seguinte comando:
npm run devEste comando verifica seus arquivos de modelo em busca de classes e cria seu CSS. Isso 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 um sucesso e que o Tailwind CSS está ativo.
Use Tailwind no projeto
A seguir, vamos testar os recursos CSS do Tailwind aplicando classes ao seu projeto. Por exemplo, você tem um aplicativo com o texto “Hello Tailwind”. Você deseja dar uma cor vermelha com um fundo azul claro.
Crie um arquivo Home.tsx e adicione o seguinte código:
export default function Home() {
return (
<body className="bg-blue-300">
<h1 className='text-red-900'>Hello Tailwind CSS</h1>
</body>
);
} Agora, ao navegar até o navegador, você verá o texto alterado para vermelho e o fundo para azul.
Você pode explorar outros recursos CSS do Tailwind para estilizar outros componentes do seu aplicativo. Os modificadores condicionais permitem criar estados reativos como passar o mouse e focar. Você também pode personalizar suas páginas nos modos claro e escuro de acordo com a preferência do usuário.
Vantagens de usar Tailwind CSS
Feito por Adam Wathan em 2017, Tailwind CSS difere de outras bibliotecas CSS em muitos aspectos. 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 projetam os elementos.
Tailwind CSS permite projetar componentes complexos a partir de utilitários primitivos. Você pode reutilizar estilos em componentes e usar modificadores para estilizar interfaces de usuário responsivas. Use as etapas aqui para aprender como instalar e usar Tailwind CSS para personalizar aplicativos que correspondam à sua marca.