Tailwind CSS を使用してフロントエンド メンター プロジェクトを設定する方法

仕事の仕事量が最近変化したため、開発者としての仕事を普段ほど楽しむことができなくなっています。つまり、構築するフロントエンド機能がありません。これを補うために、私はフロントエンド メンター プラットフォームでプロジェクト開発を再開しました。このプラットフォームは、開発者が実際のプロジェクトに変換できる美しい UI モックアップを提供します。私は約 1 年前にこのプラットフォームを使い始めましたが、プロジェクトの品質だけでなく、アクセシビリティのベスト プラクティスについて開発者を教育することに特に重点を置いた、コミュニティ構築への焦点にも感銘を受けました。これは、実際のプロジェクトでフロントエンド スキルを磨きたいと考えている開発者に強くお勧めする素晴らしいリソースです。難易度はさまざまで、HTML と CSS のみを必要とする非常に単純なプロジェクトから始めます。あらゆるプロジェクトに適したプロジェクトがあります。スキルレベル！

このプラットフォームの優れた点の 1 つは、デザインといくつかの基本的なスターター コードのみが提供されるため、プロジェクトを完了するために好みのテクノロジの組み合わせを自由に選択できることです。個人的には、フレームワーク ¹ の使用を減らし、セマンティック HTML の作成とインタラクティビティ用の純粋な JS の追加に集中しようとしているので、これが私の今後のソリューションの大部分になります。

そうは言っても、私は今でもサイドプロジェクトのスタイリングソリューションとして Tailwind をとても気に入っています。私はこれを約 3 年間専門的に使用してきましたが、便利なデフォルトのユーティリティ クラスと、基本機能を拡張する際の快適な開発エクスペリエンスとの間でバランスが取れていることがわかりました (これについては以下で詳しく説明します)。初心者がすぐに Tailwind を使って構築を始めるべきだと言っているわけではありません。必ず最初に CSS を学習してください。ただし、CSS の仕組みについてよく知っている私にとって、Tailwind は生産性ツールです。そのユーティリティ クラスが内部で何をしているのかを理解しているからです。

そのため、フロントエンドのメンターといくつかの課題を完了した後、提供されたプロジェクトの起動コードに何度か Tailwind を追加する必要がありました。私は、一般的なスタートアップ プロジェクトで Tailwind をインストールして構成するためのワークフローを文書化することが、このプラットフォームを初めて使用するもののプロジェクトで Tailwind を使用したいと考えている他の開発者にとって役立つかもしれないと考えました。依存関係管理の多くのことと同様に、その方法はおそらく何百万もの異なる方法があります。これは単に私が推奨する方法なので、実際の結果は異なる場合があります。

Tailwind をインストールします

パッケージのインストール

まず、Front End Tutor からダウンロードしたスタートアップ コードのルート ディレクトリに移動し、次のコマンドを実行して Tailwind とその依存関係をインストールする必要があります。

npm install -D tailwindcss postcss autoprefixer

依存関係に関するいくつかのメモ:

• Tailwind CSS は PostCSS を使用して CSS を処理します。 PostCSS は JavaScript プラグインを使用して CSS を変換するツールであり、Tailwind CSS 自体は PostCSS プラグイン ² です。
• Autoprefixer は、Can I Use の値を使用して CSS ルールにベンダー プレフィックスを追加する PostCSS プラグインです。これにより、CSS がさまざまなブラウザーで動作することが保証されます。

技術的には、プロジェクトに Tailwind をインストールするためにこれらは必要ありませんが、通常、これらを使用するとスムーズに動作することがわかります。

TailwindCSS を初期化します

次に、次のコマンドを使用して、tailwind.config.js ファイルと postcss.config.js ファイルを生成します。

npx tailwindcss init -p

ソースパスを構成する

次に、tailwind.config.js に移動し、index.html をコンテンツ配列に追加します。これにより、不要なスタイルが確実に削除されます。これが実際にどのように機能するかについて詳しくは、Tailwind の Content Config ドキュメントをご覧ください。

Tailwind ユーティリティ クラスを使用してスタイル設定されるプロジェクト用に複数の HTML ファイルを作成する場合は、そのパスもこの配列に追加する必要があることに注意してください。

<code>module.exports = {
  content: ["index.html"],
  theme: {},
  plugins: [],
};</code>

CSS に Tailwind を含めます

プロジェクトのルートに CSS ファイルを作成し (通常は、styles.css という名前を付けます)、次のコンテンツをそれに追加します:

<code>@tailwind base;
@tailwind components;
@tailwind utilities;</code>

ビルド スクリプトを追加して実行します

package.json ファイルに、CSS を構築するためのスクリプトを追加します。これにより、構築されたスタイルを含むoutput.cssファイルが作成されます。 --watch フラグを使用すると、CSS の変更をリアルタイムで監視できます。つまり、スタイルを更新するたびにスクリプトを再起動する必要がありません。

このコマンドには好きな名前を付けることができることに注意してください。ここでは慣例に従っているだけです。

<code>"scripts": {
  "build:css": "tailwindcss build styles.css -o output.css --watch"
}</code>

これで、次のスクリプトを実行して CSS をコンパイルできるようになります:

npm run build:css

リンクスタイルシート

最後に、index.html ファイル (およびスタイルを適用する他の HTML ファイル) の先頭にリンク タグを含める必要があります。

<code><link href="output.css" rel="stylesheet"></link></code>

これで、このファイルで Tailwind が動作するかどうかをテストできるようになります。通常は >

のようなものを追加します

プロジェクトフォントをインストールする

Front End Mentor からプロジェクトのスタートアップ コードをダウンロードすると、ビルドするデザインのフォントのフォント ファイルが含まれています。これには通常、可変フォント ファイルと静的フォント ファイルの組み合わせが含まれます。この目的のために、./assets/fonts/static で提供されるファイルを使用します。

これらのファイルと、プロジェクトのルート ディレクトリにある style-guide.md ファイルを参照して、どのフォントが使用されているか、どのフォントのウェイトが必要であるかを確認することをお勧めします。

@font-face ルールを追加

これを決定したら、プロジェクト ルートに別の新しい CSS ファイルを作成し (通常は fonts.css という名前を付けます)、スタートアップ コードで提供される各フォント ファイルに対して @font-face ルールを定義する必要があります。

<code>@font-face {
  font-family: "Inter";
  font-weight: 400;
  src: url("assets/fonts/static/Inter-Regular.ttf") format("ttf");
}

@font-face {
  font-family: "Inter";
  font-weight: 600;
  src: url("assets/fonts/static/Inter-SemiBold.ttf") format("ttf");
}

@font-face {
  font-family: "Inter";
  font-weight: 700;
  src: url("assets/fonts/static/Inter-Bold.ttf") format("ttf");
}</code>

上記の例は、ソーシャル リンク プロファイルの課題に対する私のソリューションであり、Inter フォントの 3 つの異なるウェイトを使用しています。

フォントフェイスを定義した後、前にoutput.cssを使用したのと同じように、HTMLドキュメントにスタイルシートをリンクする必要があります:

<code>module.exports = {
  content: ["index.html"],
  theme: {},
  plugins: [],
};</code>

拡張 Tailwind 構成

次に、tailwind.config.js のテーマを拡張して、必要に応じてプロジェクトのフォントを適用するためのユーティリティ クラスを追加する必要があります。

<code>@tailwind base;
@tailwind components;
@tailwind utilities;</code>

プロジェクトに複数のカスタム フォントがある場合は、fontFamily オブジェクトに任意の数のプロパティを定義できることに注意してください。これらのプロパティには好きな名前を付けることができますが、通常は、comic-sans など、ほとんどの Tailwind ユーティリティがそのまま作成される方法と一致するように、フォント名をハイフンに変換するだけです。

これで、font-inter クラスを HTML に追加し、マークアップに適用された新しいフォントを確認できるようになります。フォントを 600 のウェイトで適用する font-semibold など、設定したさまざまなフォントのウェイトを使用することもできます。

<code>"scripts": {
  "build:css": "tailwindcss build styles.css -o output.css --watch"
}</code>

以上がTailwind CSS を使用してフロントエンド メンター プロジェクトを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。