編集者の評価: ユーザーの評価:[合計: 0 平均: 0] @media(min-width: 500px) { } @media(min-width: 800px) { }
Tailwindgen は、 使用できるシンプルなオンライン Tailwind グリッド ジェネレーターです。行と列の数を入力し、HTML コードとともに視覚的にグリッド レイアウトを生成します。必要な Tailwind クラスはすべてコードに含まれており、同じものに対して React と同等のコードを生成することもできます。
CSS グリッド ジェネレーターについては以前に説明しました。ここでの Tailwindgen は、カスタム CSS クラスの代わりに、このツールが Tailwind CSS クラスを追加することによってグリッドを生成するという事実を除いて、ほぼ同じです。良い点は、カスタムの行と列を指定して目的の形状のグリッドを取得できる、視覚的なグリッド ジェネレーターが提供されることです。
Tailwindgen を使用して Tailwind を使用して CSS グリッドを生成する:
Tailwindgen の Web サイトは完全に無料で使用できます。始めるためのサインアップや登録ページさえありません。 こちらからメイン Web サイトにアクセスし、すぐに使い始めてください。ウェブサイトのメイン インターフェースは次のようになります。
次に、行と列の数を選択する必要があります。次に、特定の行と列を選択してグリッド レイアウトを選択し、カスタム レイアウトを作成する必要があります。レイアウトは任意の方法で指定でき、すべてのコードを簡単に生成できます。
さらに下にスクロールすると、生成されたコードが表示されます。 CSS と HTML コードをコピーして、プロジェクトで使用します。ここでの良い点は、HTML とは別に、React コンポーネントのコードを JSX として生成することです。 ReactJS で Tailwind グリッドを使用する場合は、これをコピーすることもできます。
この方法で、これを使用して Tailwind グラインドを生成し、フロントエンド プロジェクトで使用することもできます。これにより、グリッド レイアウトを手動でコーディングする必要がなくなります。このツールをブックマークするだけで、いつでも好きなときに使用できます。
Closign の考え:
Tailwind CSS は最近人気が高まっており、そのための新しいヘルパー ツールが毎日リリースされています。 Web サイトまたは Web アプリの UI を設計するために必要な基本的な構成要素の 1 つ。したがって、Tailwind グリッド ジェネレータが必要な場合は、ここで、あなたを失望させないものを紹介します。
