Tailwind CSSは、フロントエンド開発をスピードアップするために設計された、ユーティリティファーストのCSSフレームワークです。クラスを使用して、レイアウト、色、間隔、タイポグラフィ、影などをHTML内で直接コントロールすることができます。つまり、CSSを大量に書かなくても、要素のスタイルを整えることができます。 簡単に組み合わせて思い通りのウェブサイトを作ることができるビルディングブロックのセットがあるようなものです。
Tailwind CSSの制作者たちは、Tailwind UIという、ユーザーが自分のプロジェクトにコピーできる、Tailwindのコンポーネントやパターンを事前に構築されたライブラリを開発しました。
このライブラリはMergeライブラリでも統合されています。
<aside> 📎 備考 Tailwind UIは現在ベータ版です。
</aside>
UXPin内蔵のTailwind UIライブラリでは、Mergeライブラリとして統合された、完全にカスタマイズ、およびテーマ設定が可能です。この統合により、Tailwind CSSの優れた機能性と柔軟性が、プロトタイピングワークフローに直接組み込まれます。現在、18のコンポーネントと要素をお使いいただけます。また、便利なコンポーネント図とパターンも用意されています。
Tailwind UIでは、Tailwind CSSコンポーネントのHTMLコードを基に、カスタムTailwindコンポーネントを作成することができます。これらのコンポーネントは完全にカスタマイズ可能です。
<aside> 📎 備考 JavaScriptが必要なコンポーネントは、コンポーネントの作成プロセスでJavaScriptコードが削除されるため、UXPinアップロード後に正しく機能しない場合があります。
</aside>
また、AI Component Creatorを使用して、UXPinライブラリ用のカスタムコンポーネントを生成することもできます。
Tailwind UIは、グローバルテーマとローカルテーマの両方をサポートしています。
グローバルテーマ： グローバルテーマを設定し、ページ全体に反映させることで、デザインの一貫性を保つことができます。
ローカルテーマ： ローカルテーマプロパティを設定することで、テーマの変更を特定のページにのみ適用することができ、デザインのカスタマイズに柔軟性を持たせることができます。
Heroicons - Tailwind CSSのメーカーによる手作りの美しいSVGアイコンは、Iconコンポーネントやプロパティで使用可能。SVGをコピーして、コンポーネントやプロパティにペーストするだけ！
