Introdução ao Twin: combinando o melhor do Tailwind e CSS-in-JS

Twin é uma biblioteca que capacita os desenvolvedores a criar aplicativos melhores combinando os poderes do Tailwind CSS com CSS-in-JS. Este artigo examina o Twin para entender como ele funciona e fornece um tutorial para usá-lo em um aplicativo React.

O que é Tailwind CSS?

Se você ainda não está familiarizado com ele, Tailwind é um utilitário baseado em Biblioteca CSS usada para criar designs personalizados. O Tailwind herda a maioria de suas características do Atomic CSS , uma abordagem de estilo de elemento que oferece nomes de classe de propósito único.

O Tailwind difere de suas alternativas, como Bootstrap e Bulma, porque fornece apenas os fundamentos brutos necessários para estilizar páginas e componentes, em oposição a um tema padrão com componentes predefinidos.

Por exemplo, para estilizar um cartão com o tema padrão de Bulma, basta adicionar class='card' a um elemento como um div . O Tailwind, por outro lado, requer que você seja mais específico na definição de estilos. O Tailwind oferece classes como bg-white para dar a um elemento uma cor de fundo branca ou px-4 para um preenchimento de quatro no eixo x.

Como resultado, um cartão projetado usando as classes de utilitários do Tailwind será semelhante ao seguinte:

 
 
 
 O pôr do sol mais frio 
 
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil. 
 

O que é CSS-in-JS?

CSS-in-JS é um padrão para escrever CSS com escopo de componente usando JavaScript. É importante observar que CSS-in-JS não é uma estrutura, mas sim uma ferramenta de autoria que permite implementar diferentes bibliotecas.

Como funciona o Twin

O Twin permite que você estilize componentes de front-end usando classes do Tailwind e depois os compile em qualquer biblioteca CSS-in-JS com suporte. Quando o Babel executa seus arquivos JavaScript ou Typescript, o Twin converte as classes em objetos CSS antes de passá-los para a biblioteca CSS-in-JS de sua escolha, eliminando assim a necessidade de um pacote cliente extra.

Minha opção de estilo favorita é usar a prop tw prop como alternativa à prop className padrão que vem com o React para passar estilos do Tailwind para um elemento.

Em vez de estilizar um botão com fundo azul como este:

 const Button=()=>  Clique aqui 

Você poderia escrever desta forma:

 const Button=()=>  Clique aqui 

O Twin também permite que você escreva estilos condicionais de uma forma mais expressiva, dando-lhe a opção de aninhar a importação tw em um prop CSS que aceita lógica:

 const ConditionalInput=({hasError})=> (  ); const [errorPresent, setErrorPresent]=useState (true); //em render 
   setErrorPresent (! errorPresent)} > {""} Alternar erro presente  

Usando componentes estilizados no Twin

Além de estilizar os elementos usando o tw prop Twin fornecido, você pode criar elementos adicionando a importação tw na parte superior do seu arquivo, assim como faria com componentes estilizados:

 importar tw de"twin.macro"; const PrimaryButton=tw.button`bg-blue-800 text-white px-6 py-2 m-6 arredondado-md pairar: bg-blue-600`; function App () { Retorna (  Olá  );
}
exportar aplicativo padrão;

Duplicando componentes existentes

Como desenvolvedor, você estará sujeito a situações em que deseja reutilizar componentes existentes, mas adicionar um pouco de estilo extra. O Twin leva isso em consideração ao permitir que você clonar componentes existentes, bem como especificar um estilo adicional a ser aplicado aos novos componentes:

 importar tw de"twin.macro"; const PrimaryButton=tw.button`bg-blue-800 text-white px-6 py-2 m-6 arredondado-md pairar: bg-blue-600`;
const OtherButton=tw (PrimaryButton) `bg-purple-600 pairar: bg-purple-200`; function App () { Retorna (  Olá   Outro botão  );
}
exportar aplicativo padrão;

Benefícios de usar Twin

• CSS personalizável
• Sem tamanho de compilação extra
• Suporte para estruturas React e React
• Suporte out-of-the-box para Vue (atualmente em fase de teste)
• As integrações CSS-in-JS ajudam a resolver a complexidade de adicionar animações personalizadas no Tailwind
• Alertas legíveis por humanos para erros de digitação. Por exemplo, se você acidentalmente aplicar uma classe inexistente como bg-pink sem adicionar um tom específico a um elemento, o Twin fornece um alerta semelhante a este:

Usando Twin em um aplicativo React

Embora você possa aproveitar o poder do Twin com outros frameworks, como Gatsby, Next.js e, mais recentemente, React Native, este exemplo se concentra no uso do Twin em um aplicativo React.

Pré-requisitos do tutorial

Para seguir este tutorial, você deve ter um ambiente de desenvolvimento React. Usaremos o seguinte:

• Crie um aplicativo React para criar um novo aplicativo React
• Yarn como nosso gerenciador de pacotes ( alternativa: npm )
• Emotion como nossa biblioteca CSS-in-JS ( alternativa: componentes estilizados, Goober, etc. )

Configure seu aplicativo React

Primeiro, crie uma nova instalação do React executando:

 npx criar app react twindemo 

Assim que o boilerplate do React for gerado, vá para a pasta usando o comando cd e instale o pacote twin.macro executando:

 yarn add tailwindcss twin.macro

Em seguida, instale o Emotion:

 fio adicionar @ emoção/núcleo @ emoção/estilo @ emoção/reagir

Depois que o Emotion estiver instalado, gere um arquivo tailwind.config.js executando:

 npm tailwindcss init--full

Agora adicione uma chave babelMacros no arquivo package.json do seu projeto:

"babelMacros": { "gêmeo": { "config":"tailwind.config.js" } }

Em seguida, importe a folha de estilo base do Tailwind no arquivo index.js do seu aplicativo com:

 import"tailwindcss/dist/base.min.css";

Dica : desde o React 17, é recomendável adicionar /** @jsxImportSource @ emotion/react **/ no topo de seu Arquivos JSX para importar e usar a propriedade tw fornecida pelo Twin.

Depois de fazer isso, seu arquivo App.js deve conter o código neste formato:

/** @jsxImportSource @ emotion/react */
importar tw de"twin.macro";
function App () { Retorna ( ... );
}
exportar aplicativo padrão;

Exemplo de replicação

Vamos ver o Twin em ação replicando esta seção do site oficial do TailwindCSS.

O snippet original é parecido com este:

 
  
 
 
 “Tailwind CSS é o único framework que vi escala em grandes equipes. É fácil de personalizar, se adapta a qualquer design, e o tamanho da construção é minúsculo. ” 
 
  

Se implementássemos isso usando Twin, o snippet ficaria assim:

/** @jsxImportSource @ emotion/react */
importar tw de"twin.macro"; function DemoTestimonial () { Retorna ( 
  
 
 
 “Tailwind CSS é a única estrutura que vi escala em grandes equipes. É fácil de personalizar, se adapta a qualquer projeto e a construção o tamanho é minúsculo. ” 
 
 
 
 Sarah Dayan 
 
 Engenheiro de equipe, Algolia 
 
 
 
 );
}
function App () { Retorna (  );
}
exportar aplicativo padrão;

Se visualizarmos o resultado no navegador, você obterá uma réplica totalmente responsiva do snippet original, só que agora estamos usando o Twin em nosso aplicativo.

Dica extra: usando babel-plugin-twin

Se quiser que o Babel importe o tw prop em seus arquivos JavaScript automaticamente, você pode usar o pacote babel-plugin-twin . Este pacote elimina a necessidade de adicionar import"twin.macro" ao topo de seus arquivos toda vez que você quiser acessar as classes utilitárias que o Twin fornece por meio do Tailwind.

Para fazer isso, abra seu novo projeto React e configure o Twin usando as etapas mostradas acima. Quando a configuração estiver concluída, instale o pacote babel-plugin-twin usando sua ferramenta de gerenciamento de pacotes favorita usando um dos comandos abaixo:

 npm i-D babel-plugin-twin
# ou
yarn adicionar babel-plugin-twin-D

A seguir, registre o pacote babel-plugin-twin como um plugin no arquivo babel.config.js . É importante que você registre babel-plugin-twin antes de babel-plugin-macros para evitar problemas ao executar uma compilação de seu aplicativo. Seu arquivo babel.config.js deve ficar assim depois de adicionar o pacote ao array plugins :

 module.exports={
//... plugins: [ "[babel-plugin-twin", {debug: true}],//se você deseja obter feedback de depuração "babel-plugin-macros", //... ],
};

Resumo

Neste artigo, mergulhamos na compreensão dos componentes estilizados e por que eles são necessários antes de dar uma olhada no Twin e como usá-lo em um aplicativo React.

Você pode encontrar os exemplos destacados neste artigo neste repositório GitHub . Não se esqueça de verificar a documentação oficial do Twin no GitHub para saber mais sobre este pacote fantástico.

A postagem Intro to Twin: combinando o melhor do Tailwind e CSS-in-JS apareceu primeiro no LogRocket Blog .

Source link