twin.macro

Twin.macro объединяет Tailwind CSS с CSS-in-JS на этапе компиляции. Когда Babel обрабатывает файлы JavaScript или TypeScript, Twin берет классы, написанные в пропсах tw, импортах tw или вызовах styled, и превращает их в CSS-объекты. Эти объекты передаются в выбранную библиотеку CSS-in-JS, поэтому классым не требуется дополнительный клиентский бандл. В README показано несколько паттернов использования. Вы можете стилизовать JSX-элементы напрямую с помощью пропа tw, например, элемент input с использованием 'border hover:border-black'. Вы можете импортировать tw и вкладывать его в проп css для условных стилей, комбинировать его с шаблонами css и Sass-подобным синтаксисом, создавать компоненты с помощью tw.input, клонировать существующие компоненты с помощью tw(Input) и использовать styled с условной стилизацией. Импорты из популярных библиотек стилизации могут быть объединены в один импорт из twin.macro. Twin поддерживает группы вариантов для одновременного применения префиксов к нескольким классам, включая hover, focus, адаптивные брейкпоинты, псевдоэлементы before, стекированные варианты и вложенные группы. Он выдает полезные подсказки при опечатках в классе или значении варианта, используя значения из конфигурации Tailwind. Импорт theme предоставляет доступ к значениям из конфигурации Tailwind. Восклицательный знак в начале или конце добавляет !important к классу, а группы в квадратных скобках позволяют применить !important к нескольким классам. Проект работает с emotion, styled-components, solid-styled-components, stitches и goober. В README приведены ссылки на примеры для Parcel, Webpack, Preact, Create React App, Vite, Jest/React Testing Library, Next.js, T3 App, Blitz.js, Gatsby, Storybook, воркспейсов с общими UI-компонентами и HeadlessUI. Также упоминается совместимость с официальным плагином Tailwind для VS Code и приводятся ссылки на ресурсы сообщества, включая Discord, руководства по стилизации пропсов, styled-компонентам, опциям, продвинутому темизированию, синхронизации брейкпоинтов, а также сниппетам и плагинам для VS Code. Twin распространяется как npm-пакет.