Tailwind CSS

Framework CSS utility-first para criar designs personalizados rapidamente.

O Tailwind CSS é um framework CSS utility-first que disponibiliza classes utilitárias de baixo nível para construir designs personalizados sem escrever CSS personalizado. Em vez de componentes pré-desenhados, o Tailwind oferece blocos de construção, espaçamento, cor, tipografia, layout, que se compõem em qualquer design diretamente no HTML.

O Tailwind CSS é a base da nossa abordagem de estilização na GRADAX. Todos os projetos usam Tailwind porque nos permite construir designs pixel-perfect mais rapidamente do que qualquer outra abordagem de CSS, mantendo total flexibilidade de design.

Para que o usamos

Interfaces de aplicações web personalizadas
Implementação de design systems
Websites de marketing responsivos
Estilização de dashboards e painéis de administração
Desenvolvimento de templates de email
Estilização da biblioteca de componentes

O que nos dá

Utility-FirstEstilize elementos diretamente com classes utilitárias composáveis. Sem convenções de nomenclatura nem ficheiros CSS para gerir.
Compilação JITApenas o CSS que utiliza é enviado para produção. Tamanhos típicos de bundle abaixo de 10KB comprimidos com gzip.
Sistema de Design TokensEspaçamento, cores, tipografia e breakpoints consistentes definidos na configuração e usados em todo o lado.
Modo EscuroSuporte integrado para modo escuro com um simples prefixo. Alterne entre temas claros e escuros sem esforço.

Perguntas que nos fazem

O Tailwind CSS é melhor do que o CSS normal?

Para a maioria dos projetos, sim. O Tailwind elimina problemas de nomenclatura e especificidade do CSS, bem como código morto. Produz bundles mais pequenos e o desenvolvimento é mais rápido.

O Tailwind deixa o HTML feio?

As classes do Tailwind no HTML podem parecer verbosas, mas com a abstração de componentes em React, as classes ficam encapsuladas dentro dos componentes. A contrapartida é não haver alternância de contexto entre ficheiros HTML e CSS.

O Tailwind funciona com CSS existente?

Sim. O Tailwind pode ser adicionado de forma incremental a qualquer projeto. Funciona em conjunto com CSS, Sass ou soluções CSS-in-JS existentes, sem conflitos.

O Tailwind CSS é acessível?

O Tailwind fornece utilitários para texto para leitores de ecrã, estilos de foco e movimento reduzido. A acessibilidade depende de como constrói os componentes, o Tailwind dá-lhe as ferramentas, mas tem de as utilizar corretamente.

Mais sobre: Estilo e Design

Não sabe como isto se aplica a si?

Um engenheiro sénior percorre o seu site, a sua presença na pesquisa e a forma como os pedidos lhe chegam e depois escreve as três coisas que vale a pena corrigir primeiro. O documento fica consigo de qualquer forma.

Marcar a análise gratuita Pergunte-nos algo