3 Dicas para escalar React com TailwindCSS

A estilização de componentes em React pode ser feita de várias formas, desde o uso de CSS tradicional até bibliotecas avançadas de CSS-in-JS. Neste artigo, abordaremos três dicas práticas para melhorar a estilização dos seus componentes React, utilizando propriedades condicionais, e as biblioteca tailwind-merge e taiwind-variants.

Dica 1: Estilização Condicional Baseada em Propriedades

Criação de um Componente de Botão

Vamos usar como exemplo um componente de botão simples que pode mudar de estilo a partir de propriedades passadas a ele.


import { ComponentProps } from "react";

export type ButtonProps = ComponentProps<"button"> & {
  success?: boolean;
};

export function Button({ success, ...props }: ButtonProps) {
  console.log(success);
  return (
    <button
      className={`rounded px-4 py-1.5 text-sm font-medium text-zinc-900 hover:bg-zinc-200 ${
        success ? "bg-emerald-400" : "bg-zinc-50"
      }`}
      {...props}
    />
  );
}

Nesse exemplo, o botão pode ter um estado de “success” e alternar sua estilização dependendo de uma ação do usuário. Ou seja, usuário clica, ele carrega, faz uma chamada para a API ou algo assim. Depois que isso finaliza, troco a cor do botão por alguns instantes para dar uma sensação de sucesso.


import Button from './Button';

export function App() {
  return (
    <>
      <div className="flex h-screen flex-col items-center justify-center gap-6 bg-zinc-950 text-zinc-50">
        <Button success>Sign in</Button>
      </div>
    </>
  );
}

Dica 2 + ✨: Utilização da Biblioteca `tailwind-merge` para Classes Condicionais

A biblioteca tailwind-merge facilita a manipulação de classes CSS de forma condicional e dinâmica. Então bora refatorar o componente Button para usar tailwind-merge

Instalação da Biblioteca tailwind-merge

Primeiro, precisamos instalar a biblioteca:


npm install tailwind-merge

Refatoração do Componente `Button`

Aqui, vamos realizar algumas melhorias no componente Button. Inserimos a função twMerge() para lidar com a manipulação de classes CSS de maneira eficiente e utilizamos o atributo data-success para gerenciar a responsabilidade de alteração visual do botão com base no seu estado de sucesso para deixar o código mais legível.


import { ComponentProps } from "react";
import { twMerge } from "tailwind-merge";

export type ButtonProps = ComponentProps<"button"> & {
  success?: boolean;
};

export function Button({ success = false, className, ...props }: ButtonProps) {
  return (
    <button
      className={twMerge(
        "bg-zinc-50 px-5 py-1.5 rounded font-medium text-zinc-900 text-sm data-[success=true]:bg-emerald-500 data-[success=true]:hover:bg-emerald-600 hover:bg-zinc-200",
        className
      )}
      data-success={success}
      {...props}
    >
      {props.children}
    </button>
  );
}

1. Função twMerge: Utilizamos a função twMerge para combinar as classes CSS de forma eficaz, evitando conflitos e permitindo a composição dinâmica das classes do Tailwind CSS.

2. Atributo data-success: Adicionamos o atributo data-success ao botão. Esse atributo é usado para armazenar o estado de sucesso do botão (true ou false). Com base nesse estado, podemos aplicar diferentes estilos CSS.

3. Classes Condicionais: As classes CSS foram configuradas para mudar com base no valor do data-success. Se data-success for true, o botão terá uma cor de fundo verde (bg-emerald-500) e uma cor de fundo diferente ao passar o mouse (hover:bg-emerald-600). Se data-success for false, o botão terá suas classes padrão de estilo.

📌

Essa refatoração torna o componente Button mais flexível e reutilizável, permitindo a personalização dinâmica dos estilos com base nos atributos personalizados.

Uso do Componente



import Button from './Button';

export function App() {
  return (
    <div className="flex h-screen flex-col items-center justify-center gap-6 bg-zinc-950 text-zinc-50">
      <Button success className="w-20">
        Sign in
      </Button>
    </div>
  );
}

Dica 3: Utilização d `taiwind-variants` para Variantes de Estilos

A biblioteca tailwind-variants permite utilizar o TailwindCSS de forma declarativa dentro dos seus componentes, combinando a flexibilidade do Tailwind com a modularidade do CSS-in-JS.

Instalação da `tailwind-variants`

Primeiro, instale a biblioteca:


npm install tailwind-variants

Bora mais uma vez refatorar e partir para a criação de Variantes de Estilos

Vamos criar variantes de estilo para o componente Button usando tailwind-variants.


import React, { ComponentProps } from "react";
import { tv, VariantProps } from "tailwind-variants";

const button = tv({
  base: "flex items-center justify-center rounded bg-zinc-50 text-sm font-medium text-zinc-900 hover:bg-zinc-200 data-[success=true]:bg-emerald-500 data-[success=true]:hover:bg-emerald-600",
  variants: {
    size: {
      default: "h-10 px-4",
      sm: "h-8 px-4",
      xs: "h-6 px-2 text-xs",
    },
    type: {
      default: "bg-gray-500",
      success: "bg-emerald-400 hover:bg-emerald-500",
    },
  },
  defaultVariants: {
    size: "default",
  },
});

export type ButtonProps = ComponentProps<"button"> &
  VariantProps<typeof button> & {
    success?: boolean;
  };

export function Button({ size, success = false, ...props }: ButtonProps) {
  return (
    <button className={button({ size })} data-success={success} {...props}>
      {props.children}
    </button>
  );
}

Utilizamos a função tv para definir o componente button com suas variantes. O objeto tv recebe três propriedades principais:

1. base: Define as classes base aplicadas ao botão. Isso inclui classes do TailwindCSS para flexbox, alinhamento, bordas, cores e tamanhos.

2. variants: Define as variantes de estilo do botão. Aqui temos duas variantes: size e type. Cada variante possui diferentes opções que aplicam classes específicas:

size: Define tamanhos diferentes (default, sm, xs) com classes TailwindCSS apropriadas.

type: Define tipos diferentes (default, success) com classes de cor de fundo.

3. defaultVariants: Define os valores padrão para as variantes. No caso, size é definido como default.

Usando o componente 👇


import Button from './Button';

export function App() {
  return (
    <div className="flex h-screen flex-col items-center justify-center gap-6 bg-zinc-950 text-zinc-50">
       <Button success>Sign in</Button>
       <Button>Sign in</Button>
       <Button size="xs">Sign in</Button>
       <Button size="sm">Sign in</Button>
    </div>
  );
}

Observando os resultados:

Neste artigo, abordamos três dicas para melhorar a estilização dos seus componentes em React utilizando TailwindCSS. Usar propriedades condicionais, a biblioteca tailwind-merge e TailwindVariants pode tornar seu código mais limpo, organizado e eficiente. Experimente essas técnicas nos seus projetos e veja a diferença que elas podem fazer na manutenção e escalabilidade do seu código.

Quer saber mais na Prática? Vem pro vídeo com Diego Fernandes 👇

Já tem graduação? Dê seu próximo passo...

Última chance do ano de garantir sua matrícula de pós-graduação pelo preço atual antes do reajuste!

Dê seu próximo passo...

Última chance antes do reajuste 🔥

Dica 1: Estilização Condicional Baseada em Propriedades

Criação de um Componente de Botão

Dica 2 + ✨: Utilização da Biblioteca tailwind-merge para Classes Condicionais

Instalação da Biblioteca tailwind-merge

Refatoração do Componente Button