twin.macro

Twin.macro combina Tailwind CSS con CSS-in-JS en tiempo de compilación. Cuando Babel procesa archivos de JavaScript o TypeScript, Twin toma las clases escritas en props tw, importaciones tw o llamadas styled y las convierte en objetos CSS. Estos objetos se pasan a una biblioteca de CSS-in-JS seleccionada, por lo que las clases no requieren un paquete adicional en el lado del cliente. El README muestra varios patrones de uso. Puede dar estilo a elementos JSX directamente con una prop tw, como un elemento input que use 'border hover:border-black'. Puede importar tw y anidarlo dentro de una prop css para estilos condicionales, combinarlo con plantillas css y sintaxis similar a Sass, crear componentes con tw.input, clonar componentes existentes con tw(Input) y usar styled con estilos condicionales. Las importaciones de bibliotecas de estilo comunes pueden colapsarse en una sola importación desde twin.macro. Twin admite grupos de variantes para aplicar prefijos a múltiples clases a la vez, incluyendo hover, focus, breakpoints responsivos, pseudo-elementos before, variantes apiladas y grupos anidados. Reporta sugerencias útiles cuando el valor de una clase o variante está mal escrito, utilizando los valores de la configuración de Tailwind. La importación de theme expone los valores de la configuración de Tailwind. Un signo de exclamación al principio o al final añade !important a una clase, y los grupos entre corchetes pueden aplicar !important a múltiples clases. El proyecto funciona con emotion, styled-components, solid-styled-components, stitches y goober. El README enlaza ejemplos para Parcel, Webpack, Preact, Create React App, Vite, Jest/React Testing Library, Next.js, T3 App, Blitz.js, Gatsby, Storybook, espacios de trabajo con componentes de UI compartidos y HeadlessUI. También menciona la compatibilidad con el plugin oficial de Tailwind para VS Code y enlaza recursos comunitarios, incluyendo Discord, guías de documentación sobre estilos de props, componentes styled, opciones, tematización avanzada, sincronización de breakpoints y snippets/plugins de VS Code. Twin se distribuye como un paquete de npm.