twin.macro

Twin.macroは、コンパイル時にTailwind CSSとCSS-in-JSを融合させます。BabelがJavaScriptまたはTypeScriptファイルを処理する際、Twinはtwプロップ、twインポート、またはstyledコールで記述されたクラスをCSSオブジェクトに変換します。これらのオブジェクトは選択したCSS-in-JSライブラリに渡されるため、クラスのために追加のクライアントサイドバンドルを必要としません。 READMEではいくつかの使用パターンが示されています。例えば、input要素に'border hover:border-black'を指定するように、twプロップでJSX要素を直接スタイリングできます。また、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パッケージとして配布されています。