この投稿では、Tailwind CSS でテンプレート パスを構成する手順を示します。
Tailwind CSS でテンプレート パスを設定するにはどうすればよいですか?
” tailwind.config.js 」設定ファイルは、ユーザーが Tailwind CSS を埋め込むテンプレート パスを設定するために使用されます。デフォルトでは存在しませんが、「npm」パッケージ マネージャーを使用してプロジェクト内に作成できます。
このセクションでは、「tailwind.config.js」ファイル内のテンプレート パスを構成するためのいくつかの重要な手順を実行します。
ノート : 「Tailwind CSS」を実装するには、まず「 Node.js 提供されたリンクを介してシステムにアプリケーションをインストールします。 https://nodejs.org/en 」をクリックしてコマンドを実行します。
ステップ1：「TailwindCSS」をインストールする
まず、「Project1」という名前の新しいプロジェクトを作成し、コード エディターで開きます。次に、新しいターミナルを開き、次のコマンドを使用して「Tailwind CSS」をインストールします。
npm install -D tailwindcss
上記のコマンドでは、「 npm 」は、以下のように「TailwindCSS」をインストールするノードパッケージマネージャーです。
ここの出力は、「Tailwind CSS」とそのパッケージが正常にダウンロードされたことを示しています。
ステップ 2: Tailwind 構成ファイルを作成する
次に、Tailwind CSS 設定ファイルを作成します。 tailwind.config.js 」を使用して、次のコマンドを使用して HTML テンプレートのパス、ユーザー定義クラス、その他の多くの指定などの機能を拡張します。
出力には、指定された構成ファイルが作成されたことが示されます。さて、「」を見てください。 tailwind.config.js ' ファイル：
ステップ 3: Tailwind ディレクティブをメイン CSS ファイルに追加する
ここで、作成した Tailwind プロジェクトに特別な機能を追加するために、次の 3 つの既存の tailwind ディレクティブをメインの「」に追加します。 スタイル.css ' ファイル：
@tailwind コンポーネント;
@tailwind ユーティリティ。
上記のコード ブロックでは次のようになります。
- ベース : これは、背景色、テキスト色、フォント ファミリーなどの Web ページのスタイルをデフォルトで変更する「Tailwind CSS」の最初のレイヤーです。
- コンポーネント : この 2 番目のレイヤーは、ブラウザーのサイズに応じて幅を追加する「コンテナー」クラス内で使用できます。そのセクションでは、ユーザーは独自に作成した外部コンポーネントを追加できます。
- 公共事業 : これは、シャドウ、カラー、追加、フレックス、その他多くのクラスなど、ほぼすべてのスタイリング クラスを合計する 3 番目のレイヤーです。
これらのディレクティブは、次のウィンドウに表示されます。
ステップ 4: CSS を構築する
次に、Tailwind CLI ツールを使用して次のコマンドを実行して CSS を構築します。すべてのテンプレート ファイルをスキャンし、「」に CSS を構築します。 dist/output.css ' ファイル：
上記のコマンドが正常に実行されたことがわかります。 「project1」のファイル構造は次のようになります。
ステップ 5: HTML テンプレートを作成し、そのパスを構成する
ユーザーが「Tailwind CSS」を埋め込みたい HTML テンプレートを作成し、そのパスを「 tailwind.config.js ”。まず、次の HTML テンプレートを見てみましょう。 インデックス.html ”:
< リンク href = 「/dist/output.css」 相対 = 「スタイルシート」 >
< / 頭 >
< 体 >
< h2 クラス = 'text-center font-bold text-white bg-orange-500' >Linuxhint へようこそ!< / h2 >< br >
< h3 クラス = 'text-center font-bold text-blue-600 bg-pink-400' >最初のチュートリアル: Tailwind CSS フレームワーク。< / h3 >< br >
< p クラス = 「テキストセンターテキストグリーン500」 >Tailwind CSS は、事前定義された CSS クラスを次のように設定するのに役立つよく知られた CSS フレームワークです。 スタイル HTML 要素。< / p >
< / 体 >
上記のコード行では次のようになります。
- 「ヘッド」セクションでは「 <リンク> 作成・コンパイルしたCSSファイルをリンクするタグ「 /dist/output.css ” 既存の HTML ファイルを使用して” インデックス.html ”。
- 「body」セクションでは、最初に「 ” Tailwind クラスを使用して最初の小見出しを定義するタグ” テキストの配置 ” を使用して「中央」に位置を調整します。 フォントの太さ ” テキストを「太字」にします。” テキストの色 ” で指定した色を追加し、” 背景色 」を使用して、それぞれ指定された背景色を適用します。
- 次に、「 ' そしてその ' 」タグも、上で説明した Tailwind クラスを使用してコンテンツのスタイルを設定します。
HTML テンプレートのパスを構成する
次に「」を開きます。 tailwind.config.js 」を作成し、HTML テンプレート ファイル (つまり「index.html」) の「content」セクションにリンクまたはパスを追加します。
プレス ' Ctrl+S 」をクリックして新しい変更を保存します。
ステップ 6: HTML コードを実行する
最後に、ライブサーバーで HTML「index.html」コードを実行し、その出力を確認します。
出力
ご覧のとおり、出力には、Tailwind CSS を使用してスタイル設定された HTML コンテンツが表示されます。
結論
Tailwind CSS は「」を使用します。 tailwind.config.js 」設定ファイルを使用して、作成された HTML テンプレートのパスを設定します。 「」を指定します。 コンテンツ 」セクションには、すべての HTML テンプレート、Tailwind クラス名を含むソース ファイル、および JavaScript コンポーネントの正確なパスが含まれています。指定された HTML ファイルをスキャンし、そのコンテンツに Tailwind CSS を実装します。この投稿では、Tailwind CSS でテンプレート パスを構成する完全な手順を説明しました。