仕事の仕事量が最近変化したため、開発者としての仕事を普段ほど楽しむことができなくなっています。つまり、構(gòu)築するフロントエンド機(jī)能がありません。これを補(bǔ)うために、私はフロントエンド メンター プラットフォームでプロジェクト開発を再開しました。このプラットフォームは、開発者が実際のプロジェクトに変換できる美しい UI モックアップを提供します。私は約 1 年前にこのプラットフォームを使い始めましたが、プロジェクトの品質(zhì)だけでなく、アクセシビリティのベスト プラクティスについて開発者を教育することに特に重點(diǎn)を置いた、コミュニティ構(gòu)築への焦點(diǎn)にも感銘を受けました。これは、実際のプロジェクトでフロントエンド スキルを磨きたいと考えている開発者に強(qiáng)くお?jiǎng)幛幛工胨厍绀椁筏ぅ辚僵`スです。難易度はさまざまで、HTML と CSS のみを必要とする非常に単純なプロジェクトから始めます。あらゆるプロジェクトに適したプロジェクトがあります。スキルレベル！

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

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

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

Tailwind をインストールします

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

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

npm install -D tailwindcss postcss autoprefixer

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

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

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

TailwindCSS を初期化します

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

npx tailwindcss init -p

ソースパスを構(gòu)成する

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

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

<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 を構(gòu)築するためのスクリプトを追加します。これにより、構(gòu)築されたスタイルを含むoutput.cssファイルが作成されます。 --watch フラグを使用すると、CSS の変更をリアルタイムで監(jiān)視できます。つまり、スタイルを更新するたびにスクリプトを再起動(dòng)する必要がありません。

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

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

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

npm run build:css

リンクスタイルシート

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

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

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

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

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

これらのファイルと、プロジェクトのルート ディレクトリにある style-guide.md ファイルを參照して、どのフォントが使用されているか、どのフォントのウェイトが必要であるかを確認(rèn)することをお?jiǎng)幛幛筏蓼埂?

@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 構(gòu)成

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

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

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

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

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

以上がTailwind CSS を使用してフロントエンド メンター プロジェクトを設(shè)定する方法の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語 Web サイトの他の関連記事を參照してください。