twin.macro

Twin.macro combina Tailwind CSS com CSS-in-JS em tempo de compilação. Quando o Babel processa arquivos JavaScript ou TypeScript, o Twin pega classes escritas em props tw, imports tw ou chamadas styled e as transforma em objetos CSS. Esses objetos são passados para uma biblioteca CSS-in-JS escolhida, portanto, as classes não precisam de um bundle extra no lado do cliente. O README mostra vários padrões de uso. Você pode estilizar elementos JSX diretamente com uma prop tw, como um elemento input usando 'border hover:border-black'. Você pode importar tw e aninhá-lo dentro de uma prop css para estilos condicionais, combiná-lo com templates css e sintaxe semelhante ao Sass, criar componentes com tw.input, clonar componentes existentes com tw(Input) e usar styled com estilização condicional. Imports de bibliotecas de estilização comuns podem ser colapsados em um único import de twin.macro. O Twin suporta grupos de variantes para aplicar prefixos a várias classes de uma vez, incluindo hover, focus, breakpoints responsivos, pseudo-elementos before, variantes empilhadas e grupos aninhados. Ele relata sugestões úteis quando o valor de uma classe ou variante é digitado incorretamente, usando valores da configuração do Tailwind. O import theme expõe valores da configuração do Tailwind. Um ponto de exclamação final ou inicial adiciona !important a uma classe, e grupos de colchetes podem aplicar !important a várias classes. O projeto funciona com emotion, styled-components, solid-styled-components, stitches e goober. O README fornece links para exemplos de Parcel, Webpack, Preact, Create React App, Vite, Jest/React Testing Library, Next.js, T3 App, Blitz.js, Gatsby, Storybook, workspaces com componentes de UI compartilhados e HeadlessUI. Também menciona a compatibilidade com o plugin oficial do Tailwind para VS Code e links para recursos da comunidade, incluindo Discord, guias de documentação sobre estilização de props, componentes styled, opções, temas avançados, sincronização de breakpoints e snippets/plugins do VS Code. O Twin é distribuído como um pacote npm.