まだ読んでいない場合は、パート1を読んでください。これは、React.jsフレームワークで使用されるTailwindCSSのパート2です。TailwindCSSがインストールされたので、コンポーネントの作成に取り掛かりましょう。create-react-appには何でも名前を付けることができますが、私は個人的にTailwindCSSという名前を付けました。

App.jsファイルからボイラープレートコードを削除します。後で使用します。ヒーローコンポーネントを作ろう！

ヒーロー

ヒーローセクションは、第一印象を設定するためにユーザーがWebサイトに最初に表示するものです。他のウェブサイトがスローガンやアニメーショングラフィック付きのロゴを表示することに気づいたかもしれません。Tailwindでこのプロジェクトのためにそれを作りましょう！

コンポーネントフォルダを作成しましょう。その中にHero.jsファイルがあります。

ここでは、背景を白に設定し、高さは画面全体を囲んでいます。また、テキストがページの中央に配置されるようにしました。それをエクスポートしてApp.jsファイルに配置すると、結果を確認できます。

今は本当に必要最低限​​なので、ナビゲーションバーを作りましょう！コンポーネントでは、App.jsにエクスポートできるようにNav.jsを作成します。

ナビゲーションバー

これで、画面を囲む幅のサイズのフレックスボックスになりました。また、ナビゲーションバーの高さを16ピクセルに設定し、内部のすべてのアイテムを中央に配置しました。これは今のように見えます：

基本的なTailwindCSSスタイルのアプリケーションの他のセクションを追加して、バーのアイテムにできるようにします。

情報

次に情報セクションを作成します。情報セクションは、会社と、製品またはサービスの観点から会社が提供するものについてです。その横にグラフィック、画像スライド、またはグリッドが表示される場合があります。追加する前に、基本構造を作成しましょう。

情報に同じ<div>スタイルを使用し、グリッドレイアウトを追加し、側面にテキストを追加しました。背景を黒に設定し、すべてのアイテムを中央に配置しました。現在、gap-6で間隔を設定した3つのグリッドがあります。実際のグリッドでは、高さと幅を60ピクセルに設定し、境界線を設定して3次元のシェーディングを作成しました。

ナビゲーションバーが画面に固定されています！また、情報セクションも画面全体を占めます。nav-itemsが追加されると、いつでもWebサイトのさまざまなセクション間を移動できます。

次に、連絡先ページを追加します。

連絡先

連絡先ページは通常、会社に問い合わせを送信する最後のセクションです。基本的な入力タイプボックスを作成し、それにいくつかの基本的なスタイルを追加します。

画面の高さを設定しましょう。中央揃えに加えて、今回は側面にテキストの説明があるため、x軸上のアイテムの間隔を8ピクセルにします。入力ボックスと送信ボタンの高さと幅も設定します。ボタンは、「relative w-fullbottom-0」で入力ボックスの下部に配置されています。

そしてそれで、それはこのように見えるでしょう！

最後に、フッターを作成しましょう！

フッター

フッターはシンプルで、ページの一番下に配置されます。それにスタイリングとテキストを追加するだけです。

悪くない！

パート3では、TailwindCSSスタイルのサイトにさらに多くのものを追加します。ロゴ、背景、説明付きの模擬製品、アニメーション/効果、その他のスタイリングから。