Como começar com o Tailwind CSS: Construindo interfaces responsivas e modernas do zero

O que é o Tailwind CSS e quais são as suas principais vantagens?

O Tailwind CSS é um framework CSS prático que dá prioridade às funcionalidades. Diferente de frameworks como Bootstrap ou Material-UI, que fornecem componentes pré-definidos, o Tailwind oferece uma série de classes CSS de alta granularidade, permitindo que você crie qualquer tipo de design simplesmente combinando essas classes diretamente no HTML. A sua filosofia central é a “prioridade prática”, o que significa que você não precisa sair do arquivo HTML para escrever CSS personalizado a fim de implementar estilos mais complexos.

As suas principais vantagens são refletidas em vários aspectos. A primeira é o notável aumento na velocidade de desenvolvimento: ao combinar ferramentas prontas, é possível criar protótipos e layouts de forma rápida, sem a necessidade de alternar repetidamente entre arquivos CSS e HTML. A segunda é o total controle sobre o design; você não está mais limitado aos estilos padrão de componentes específicos e pode implementar o esboço do design com precisão até o nível dos pixels, criando interfaces únicas. Por fim, através de… tailwind.config.js O arquivo de configuração oferece uma grande capacidade de personalização; você pode definir facilmente suas próprias cores, espaçamentos, pontos de interrupção e outros elementos do sistema de design, garantindo a consistência no estilo do projeto.

Construa o seu primeiro projeto com Tailwind CSS

Existem várias maneiras de começar a usar o Tailwind CSS, e a mais simples e rápida é experimentá-lo através do seu CDN (Content Delivery Network). No entanto, para projetos de produção, recomendamos fortemente o uso de um processo de construção (build process) para ativar todas as suas funcionalidades e gerar arquivos CSS otimizados.

Leitura recomendada Guia de Introdução ao Tailwind CSS: Construindo Interfaces de Usuário Responsivas e Modernas do Zero。

O método mais comum é instalá-lo como um plugin do PostCSS. Primeiro, você precisa inicializar um projeto e instalar as dependências necessárias. Faça isso usando npm ou yarn. tailwindcss、postcss e autoprefixerEntão, use… npx tailwindcss init Comando para gerar o arquivo de configuração padrão tailwind.config.js。

Assistente do construtor de sites WordPress.com

Disponibilidade de 99,999% + recuperação de desastres entre regiões, suporte 24 horas por dia, 7 dias por semana, site de criação de IA gratuito com a compra do pacote de blog

Nome de domínio gratuito por um ano

Visite o Assistente do construtor de sites do WordPress.com →

Assistente do construtor de sites UltaHost

Mais de 900 modelos gratuitos e personalizáveis para obter o poder de SEO de que você precisa para otimizar seu site para exposição em pesquisas

Oferta 40%

Visite o UltaHost Website Builder Helper →

Em seguida, você precisa criar um arquivo de configuração para PostCSS (por exemplo, `style.css`). postcss.config.jsAdicione o Tailwind CSS e o Autoprefixer como plugins. Em seguida, crie um arquivo CSS principal (por exemplo, `main.css`). src/input.css) e use @tailwind As instruções para incluir as várias camadas do Tailwind são as seguintes:

/* src/input.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Por fim, configure o processo de compilação (por exemplo, usando Vite, Webpack ou diretamente o Tailwind CLI) para processar esse arquivo CSS, compilá-lo e gerar o resultado final. Introduza o arquivo CSS gerado no HTML, e então você poderá começar a usar os métodos e classes fornecidos pelo Tailwind.

Dominar as principais ferramentas de desenvolvimento e o design responsivo.

As classes de ferramenta do Tailwind CSS abrangem todos os aspectos do CSS, e suas regras de nomeação são intuitivas e fáceis de memorizar.

Classes de layout e espaçamento

Classes de layout, como… flex、grid、block、inline-block Usado para controlar o modo de exibição. O espaçamento é definido através de… p-{size}( Margem interna ) e m-{size}(Os margens) são usados para controlar isso, onde… {size} Seguir uma escala de 0 a 96, por exemplo. p-4 Expressar 1rem O espaçamento interno (padding) do… A largura e a altura são definidas usando… w- e h- Prefixos, como… w-full、h-screen。

Leitura recomendada Análise dos conceitos centrais do Tailwind CSS。

Cores e Tipografia

Utilização da cor de fundo bg-{color}-{shade}A cor do texto é definida pelo uso de especificações de cor, como cores em hexadecimal, nomes de cores ou sistemas de cores padrão (como RGB, CMYK, HSL, etc.). text-{color}-{shade}Por exemplo bg-blue-500 e text-gray-800Em termos de layout, o tamanho da fonte é definido através… text-{size}(Por exemplo, text-xlO controle da espessura da fonte é realizado através de… font-{weight}(Por exemplo, font-boldControle.

Implementar um design responsivo

O Tailwind utiliza um sistema de pontos de interrupção prioritário para dispositivos móveis. O prefixo de pontos de interrupção padrão é < sm:、md:、lg:、xl:、2xl:Você pode adicionar esses prefixos antes de qualquer nome de ferramenta para que elas sejam aplicadas em larguras de tela específicas ou superiores a essas larguras. Por exemplo,<div class="text-center md:text-left"> Isso significa que o texto será alinhado à esquerda em telas de tamanho médio ou maiores, e caso contrário, será centralizado. Isso permite que você crie interfaces que se adaptem de forma muito fluida a diferentes dispositivos.

Técnicas avançadas: Personalização e otimização

À medida que o tamanho do projeto aumenta, torna-se essencial personalizar e otimizar o Tailwind.

Construtor de sites da Bluehost

Oferece ferramenta de criação de sites com IA, suporte por telefone e chat ao vivo 24 horas por dia, 7 dias por semana, nome de domínio gratuito por 1 ano, CDN gratuito, SLA de tempo de atividade de 99,99%

Visite a Bluehost

Sistema de design personalizado em profundidade

Todos os ajustes personalizados foram feitos. tailwind.config.js Isso é feito dentro do arquivo. Você pode… theme.extend Você pode adicionar novos valores aos objetos para expandir o tema padrão, como novas cores, espaçamentos ou fontes. Você também pode substituir completamente partes do tema padrão. Além disso, é possível definir pontos de interrupção personalizados para o projeto nesse local.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-primary': '#1d4ed8',
      },
      spacing: {
        '128': '32rem',
      }
    },
    screens: {
      'tablet': '640px',
      'laptop': '1024px',
      'desktop': '1280px',
    },
  },
}

Extrair componentes e reduzir o tamanho dos pacotes (arquivos de código)

Embora as classes práticas tenham prioridade, para evitar duplicações, você pode usar… @layer components As instruções permitem extrair classes de componentes reutilizáveis no CSS. Para combinações de estilos que serão usadas apenas uma vez, basta combinar as classes diretamente no HTML.

Para otimizar o ambiente de produção, o Tailwind utiliza o PurgeCSS (chamado de “Content Scanning” nas versões 3 e superiores do Tailwind CSS) para remover todo o CSS que não está sendo usado. Você precisa configurar isso no arquivo de configuração do Tailwind. content Especifique nos atributos todos os caminhos dos arquivos que contêm nomes de classes do Tailwind (como HTML, JSX, modelos Vue). Dessa forma, a ferramenta de construção só compactará os estilos que são realmente utilizados, resultando em um arquivo CSS muito pequeno.

Leitura recomendada Guia de Início para Construir Sites Responsivos Modernos com o Framework Tailwind CSS。

resumos

O Tailwind CSS revolucionou a maneira como os desenvolvedores front-end criam estilos de interface, graças à sua metodologia única e baseada em classes práticas. O caminho de aprendizado é bem estruturado: começa com a compreensão de seus conceitos fundamentais e vantagens, passa pela configuração do ambiente de desenvolvimento, até o domínio completo de ferramentas básicas como layout, espaçamento e cores, bem como da gramática responsiva. Em seguida, é possível personalizar profundamente o sistema de design através de arquivos de configuração e otimizar o código para produção. Dominar o Tailwind CSS não só aumenta significativamente a eficiência no desenvolvimento de interfaces, como também permite que os desenvolvedores se concentrem na criação de interfaces web modernas, únicas, precisas e de alto desempenho. À medida que você ganha mais experiência, começará a perceber o poder que a “liberdade dentro de restrições” oferecida pelo framework.

Perguntas frequentes Perguntas frequentes

Qual é a diferença entre Tailwind CSS e Bootstrap?

O Tailwind CSS é um conjunto de ferramentas de base “sem estilo” (sem definições de aparência pré-definidas), que não fornece componentes prontos com aparências específicas (como barras de navegação ou cartões). Em vez disso, ele oferece as classes fundamentais necessárias para criar esses componentes, dando aos desenvolvedores total controle sobre o design.

hosting.com

SSL gratuito, Cloudflare CDN, WAF, mais de 40 salas de servidores globais para escolher, menor latência perto de você, suporte de serviço 24/7/365, agora você pode economizar até 67%, suporte para compilações de IA e otimização de SEO!

Visite hosting.com

O Bootstrap é uma biblioteca de componentes avançada que fornece uma série de componentes completos com estilos e interações pré-definidos, permitindo a criação rápida de interfaces com um visual uniforme. No entanto, ao realizar um design personalizado, é necessário substituir muitos dos estilos padrão, o que pode ser um processo um tanto complicado.

Escrever muitos nomes de classes em HTML torna o código mais difícil de ler?

No início, pode-se ter essa sensação, mas a legibilidade pode ser bem gerida através do uso de quebras de linha adequadas, da organização dos códigos (o plugin Prettier pode ajudar nisso) e da separação dos componentes complexos em arquivos próprios (como componentes Vue ou React). Muitos desenvolvedores acreditam que, em vez de ter que procurar constantemente entre arquivos CSS e HTML, é mais claro ter todos os estilos concentrados na camada de visualização do aplicativo.

Os ficheiros CSS gerados pelo Tailwind CSS são muito grandes?

No modo de desenvolvimento, a fim de disponibilizar todos os tipos de ferramentas possíveis, os arquivos CSS tendem a ser bastante grandes (geralmente ultrapassando alguns MB). No entanto, durante a compilação para produção, isso pode ser evitado com uma configuração correta. content Ao realizar o processo de “tree-shaking” no caminho de compilação, o arquivo CSS final geralmente fica muito pequeno (pode ser facilmente compactado para menos de 10KB), pois contém apenas as classes que são realmente utilizadas no projeto.

É possível usar apenas o Tailwind CSS, sem escrever nenhum código CSS personalizado?

Para a grande maioria dos projetos, a resposta é afirmativa. O objetivo do design do Tailwind CSS é atender a 99% das necessidades de estilo definidas pelo padrão 99%. Somente em casos extremamente especiais, em que não é possível alcançar o desejado estilo através da combinação de ferramentas padrão, é necessário escrever um pequeno código de CSS personalizado. @layer As instruções devem ser integradas ao sistema da Tailwind.