Não tenho a pretensão de ser um bom designer. Mas eu valorizo um bom design. Tailwind é a melhor ferramenta que encontrei para criar interfaces de usuário personalizadas com uma ótima aparência.
Nesta postagem do blog, compartilharei algumas dicas que achei extremamente úteis ao criar componentes React reutilizáveis com o Tailwind.
O que é Tailwind e por que usá-lo?
Tailwind é uma biblioteca CSS de primeiro nível que expõe propriedades CSS aplicadas como classes diretamente à sua marcação. Antes de existir, usei outra biblioteca CSS UI muito popular. Prometia belos designs com o mínimo de esforço. Eu me senti tão produtivo no começo jogando botões, cartões e acordeões tão rápido quanto recortar e colar. Com apenas algumas aulas, um botão feio se transformou em um lindo botão.
Mas o problema com a maioria dessas bibliotecas de atalhos de interface do usuário é que seus componentes estão basicamente fixados. A primeira vez que tentei definir o estilo de um selecionador de data personalizado com esta biblioteca, me peguei vasculhando um arquivo CSS incompreensível. A solução que encontrei foi cortar com important! .
O Tailwind requer mais trabalho inicial, mas é muito mais fácil construir um componente personalizado sem domínio total de CSS. Parte desse processo é aprender a usar componentes de maneira eficaz com o Tailwind.
Primeiros passos com componentes de marcação plana
A primeira chave para construir bons componentes é começar por não construir nenhum. É difícil desistir de abstrações prematuras. A menos que você tenha certeza de quais serão os componentes certos, é melhor começar com uma marcação plana no nível de uma página.
O Tailwind torna isso muito fácil. Você pode trabalhar rapidamente em um arquivo e construir a estrutura e o estilo juntos. A troca de contexto de vários arquivos adiciona muito atrito no início. Ao quebrar componentes, você pode mantê-los no mesmo arquivo até que você realmente precise usar aquele componente em outro lugar. Você só deve extraí-lo quando for difícil mantê-lo onde está.
Como escolher a API certa
Uma API confusa ao usar um componente pode levar a bugs. Robin Malfait, que agora trabalha para o Tailwind Labs, compartilhou suas próprias “regras não escritas para componentes” em um bate-papo do Discord. Eu os compartilho aqui porque não vi um resumo melhor para escolher uma boa API de componente.
- Seja o mais explícito possível:
- Use estados em vez de booleanos.
- Use estados em vez de booleanos.
ClassNamecomo um adereço é um cheiro de código:-
-
- Prefira o estado local ao global:
- Deixe claro de onde vem o estado
- Prefira acessórios em vez de estado:
- É melhor derivar de adereços do que sincronizar com seu estado
- Prefira sem adereços a adereços:
- Os adereços aumentam os possíveis estados em que seu componente pode estar
- Prefira componentes a adereços:
-
-
- Prefira crianças a adereços:
-
-
Abaixo está um componente de emblema escrito em TypeScript que eu uso. Isso é semelhante a um exemplo que Robin compartilhou neste Gist . Esta versão possui quatro variações de cores e dois tamanhos.
import React, {ReactNode} de'react';
importar {classNames} de'../util/classNames';
enum Variant { VERMELHO, AMARELO, VERDE, AZUL,
}
enum Size { AMPLA, PEQUENA,
}
tipo Props={ variante: variante; crianças ?: ReactNode; tamanho: Tamanho;
};
const SIZE_MAPS: Registro ={ [Size.SMALL]:'px-2.5 text-xs', [Size.LARGE]:'px-3 text-sm',
};
const VARIANT_MAPS: Registro ={ [Variant.RED]:'bg-red-100 text-red-800', [Variant.YELLOW]:'bg-yellow-100 text-yellow-800', [Variant.GREEN]:'bg-green-100 text-green-800', [Variant.BLUE]:'bg-blue-100 text-blue-800',
};
função de exportação Badge (props: Props) { const {filhos, variante, tamanho}=adereços; Retorna ( {crianças} );
}
Badge.defaultProps={ variante: Variant.GRAY, tamanho: Size.SMALL,
};
Badge.variant=Variante;
Badge.size=Tamanho;
O emblema só pode estar em um dos oito estados definidos pelo enum:
Uma versão simples de JavaScript usando objetos em vez de enums para mapear para os diferentes estados é mostrada abaixo.
import React from'react';
importar {classNames} de'../util/classNames';
const SIZE_MAPS={ PEQUENO:'px-2.5 text-xs', GRANDE:'px-3 text-sm',
};
const VARIANT_MAPS={ VERMELHO:'bg-red-100 text-red-800', AMARELO:'bg-yellow-100 text-yellow-800', VERDE:'bg-green-100 text-green-800', AZUL:'bg-blue-100 text-blue-800',
};
função de exportação Badge (adereços) { const {filhos, variante, tamanho}=adereços; Retorna ( {crianças} );
}
Badge.variant=VARIANT_MAPS;
Badge.size=SIZE_MAPS;
Bônus: ClassNames Helper
Trabalhar com o Tailwind no React e, especialmente, construir componentes reutilizáveis, geralmente requer a combinação de strings de nome de classe condicionalmente. Existem vários pacotes no npm que a maioria das pessoas usa para fazer isso. Não há nada de errado com isso, mas para combater o inchaço de mais um pacote com dependências, aqui está uma função que Robin também compartilhou para fazer isso. Muito limpo, não é nada complicado, mas prático.
exportar função classNames (... classes: (false | null | undefined | string) []) { return classes.filter (Boolean).join ("");
}
//exemplo de uso
Tipos de componentes no Tailwind
Não componentes (modelos ou snippets)
Às vezes, o que você está tentando encapsular é um padrão repetido em vez de um componente. Se os detalhes forem exclusivos para a maioria das instâncias e não precisar ficar vinculado a outras instâncias, é na verdade um modelo ou snippet.
Um bom exemplo disso é o que o Tailwind lançou como seu produto pago, Tailwind UI. Esses snippets devem ser recortados e colados em seu aplicativo para acelerar a prototipagem. Eles podem se tornar componentes reutilizáveis em seu código em algum ponto, supondo que você descubra que eles são repetidos em vários lugares em seu aplicativo com consistência suficiente para deixar claro o que a API deve ser. Caso contrário, mantenha-os em sua biblioteca de snippet.
Pequenos componentes
Um botão é o exemplo clássico de um pequeno componente que geralmente é extraído com o Tailwind. O exemplo abaixo tem 17 classes de utilitários. Você pode descobrir que tem dezenas de botões em um site que compartilhará 15 das 17 classes.
Nesse caso, você poderia usar a diretiva @apply do windwind para combinar as classes comuns acima em uma nova classe btn . Normalmente não faço isso porque é um modelo mental mais fácil para mim manter a maioria dos meus componentes dentro do modelo de componente para React.
Pequeno componente (exposição de estilos)
Em alguns casos, você pode querer criar um componente que encapsule algo diferente de estilos. Pode ser um manipulador de eventos de clique ou algum outro comportamento. Esta é uma exceção aos “ classNames as adereços” sendo um cheiro de código. Aqui, é melhor usar classNames como um suporte e colocar todas as classes do Tailwind no componente em vez de nele.
Grande componente complexo
Grandes componentes que incluem vários elementos, como um shell de aplicativo, barra lateral ou cabeçalho, podem ser tentadores de parametrizar em excesso. Para torná-los o mais configuráveis possível, você deseja preenchê-los com adereços. Mas isso torna mais difícil ler seu código e saber em que estado está cada versão desse shell de aplicativo.
Em vez disso, eu me inclino fortemente para a extremidade “componentes sobre adereços” e “filhos sobre componentes” do espectro da API para eles. Freqüentemente, eles começam muito semelhantes um ao outro. Mas conforme o site cresce e muda, cada instância tende a divergir, forçando você a adicionar outro suporte para acomodar.
Uma vez vinculados, sempre parece mais fácil mantê-los vinculados até que de repente você descubra que tem um componente monstro. A lição aqui é: não tenha medo de quebrar esses componentes grandes quando eles se tornarem difíceis de manejar.
Conclusão
Usar o React é uma das melhores maneiras de criar aplicativos modernos a partir de componentes. O Tailwind é a maneira mais fácil que encontrei de estilizar aplicativos sem um alto nível de domínio de CSS. Juntos, os dois permitem que você crie componentes reutilizáveis que parecem e funcionam bem juntos.
A postagem Dicas de CSS do Tailwind para criar React reutilizável componentes apareceu primeiro no LogRocket Blog .
