適切なCSSフレームワークを選択することは、新しいプロジェクト開(kāi)発の重要な部分です。 BootstrapやFoundationなどのフレームワークは、開(kāi)発者が簡(jiǎn)単に開(kāi)始できる既製のプリセットコンポーネントに人気があります。この方法は、より多用途の外観と感觸を持つシンプルなWebサイトに適しています。しかし、より複雑でパーソナライズされたWebサイトの場(chǎng)合、問(wèn)題が発生します。

プロジェクトが進(jìn)行するにつれて、コンポーネントをカスタマイズし、新しいコンポーネントを作成し、最終的なコードベースが均一でメンテナンスが容易であることを確認(rèn)する必要があります。

上記のニーズは、BootstrapやFoundationなどのフレームワークに対応するのが困難です。これらのフレームワークは、主観的で、多くの場(chǎng)合望ましくない多くのスタイルをもたらすためです。その結(jié)果、デフォルトのスタイルをオーバーライドしようとしながら、具體性の問(wèn)題を解決し続ける必要があります。これは簡(jiǎn)単ではありません。

棚オンソリューションは簡(jiǎn)単に実裝できますが、柔軟性がなく、特定の境界によって制限されています。一方、CSSフレームワークなしでWebサイトを設(shè)計(jì)することは、管理と保守が容易ではありません。それで、解決策は何ですか？

いつものように、ソリューションは黃金の平均に従います。コンクリートと抽象の間の適切なバランスを見(jiàn)つけて適用する必要があります。低レベルのCSSフレームワークは、このバランスを提供します。このようなフレームワークはたくさんあります。このチュートリアルでは、最も人気のあるものであるTailwind CSSを探ります。

キーポイント

• Tailwind CSSは、HTMLのWebコンポーネントのより直接的な制御とカスタマイズを可能にする実質(zhì)的に好ましいアプローチを採(cǎi)用し、それにより、より管理しやすくスケーラブルなコードベースを促進(jìn)します。
• Tailwind CSSのインストールとセットアップは、NPMのインストール、tailwind.config.jsによる構(gòu)成、@tailwindコマンドを使用してスタイルを含めるなど、非常に簡(jiǎn)単です。
• Tailwind CSSは、ブレークポイントプレフィックスを使用して條件付きで応答性のあるWebサイトを簡(jiǎn)単に構(gòu)築できるモバイルファーストユーティリティクラスを通じてレスポンシブデザインをサポートしています。
• このフレームワークは、共通のパターンの再利用可能なコンポーネントへの抽出を促進(jìn)し、冗長(zhǎng)性を減らし、スタイル設(shè)計(jì)の効率を改善します。
• Tailwindの強(qiáng)力なカスタマイズにより、開(kāi)発者は獨(dú)自のCSSクラスとユーティリティでフレームワークを拡張し、プロジェクト固有のニーズに合わせてデフォルトのテーマを調(diào)整できます。
小さな個(gè)人ブログから大規(guī)模なエンタープライズアプリケーションまで、Tailwind CSSは柔軟でメンテナンスが簡(jiǎn)単であるため適しています。

追い風(fēng)とは何ですか？

Tailwindは単なるCSSフレームワークではなく、設(shè)計(jì)システムを作成するためのエンジンです。 -

tailwind公式ウェブサイト

Tailwindは、低レベルのユーティリティクラスのコレクションです。レゴブリックのようなあらゆるタイプのコンポーネントを構(gòu)築するために使用できます。このコレクションは、最も重要なCSSプロパティをカバーしていますが、さまざまな方法で簡(jiǎn)単に拡張できます。 Tailwindでは、カスタマイズはもはや問(wèn)題ではありません。フレームワークには優(yōu)れたドキュメントがあり、各クラスのユーティリティを詳細(xì)に説明し、カスタムメソッドを?qū)g証します。すべての最新のブラウザとIE11はそれをサポートしています。

なぜ実用的な優(yōu)先フレームワークを使用するのですか？

Tailwindのような低レベルの実用的な優(yōu)先度CSSフレームワークには多くの利點(diǎn)があります。最も注目すべきもののいくつかを調(diào)べてみましょう：

• 要素の外観をよりよく制御できます。ユーティリティクラスを使用すると、要素の外観をより簡(jiǎn)単に変更して微調(diào)整できます。
大規(guī)模なプロジェクトでは、大規(guī)模なCSSコードベースではなくHTMLファイルのみを維持する必要があるため、大規(guī)模なプロジェクトで簡(jiǎn)単に管理および維持できます。
不要なスタイルと戦うことなく、ユニークなカスタムWebサイトデザインを構(gòu)築する方が簡(jiǎn)単です。
高度にカスタマイズ可能でスケーラブルであるため、無(wú)制限の柔軟性が得られます。
モバイルファーストアプローチを採(cǎi)用し、レスポンシブデザインパターンを簡(jiǎn)単に実裝できます。
一般的な繰り返しのパターンをカスタム再利用可能なコンポーネントに抽出できます。ほとんどの場(chǎng)合、カスタムCSSのラインを書(shū)く必要はありません。
自己解釈クラスがあります。クラス名を読むだけで、スタイリング要素の外観を想像できます。

最後に、Tailwindの作成者が言ったように：

初めて見(jiàn)たとき、それが良いアイデアだと考えることはほとんど不可能でした - あなたは実際にそれを試してみる必要があります。

それでは、試してみましょう！

テールウィンドの初心者

tailwindのカスタマイズを?qū)g証するには、npmを介してインストールする必要があります。

次のステップは、

npm install tailwindcss

ファイルを作成することです。これを使用して、

ディレクティブを使用してフレームスタイルを含めます。 styles.css @tailwindの後、コマンドを?qū)g行します。コマンドは、開(kāi)発中にカスタムオプションを配置する最小限の

@tailwind base;

@tailwind components;

@tailwind utilities;

ファイルを作成します。生成されたファイルには、次のコンテンツが含まれています

npx tailwind init次のステップは、スタイルを使用して使用できるようにすることです。 tailwind.config.js

最後に、生成された

module.exports = {
  theme: {},
  variants: {},
  plugins: [],
}

ファイルとフォントをhtmlにリンクします：

npx tailwind build styles.css -o output.css

さて、作成を開(kāi)始する準(zhǔn)備ができました。

output.css

（長(zhǎng)さが長(zhǎng)すぎるが、寫(xiě)真とキーコードのスニペットが保持されているため、単一ページのWebサイトテンプレートを構(gòu)築するための詳細(xì)な手順はここでは省略されています）

<link rel="stylesheet" type="text/css" href="output.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">

概要

ご覧のとおり、TailWindは、オプションや柔軟性を制限することなく、簡(jiǎn)単なプロセスを提供します。 Tailwindが提供する実用的な優(yōu)先度の方法は、Github、Heroku、Kickstarter、Twitch、Segmentなどの大企業(yè)に正常に適用されています。

個(gè)人的には、Bootstrap、Foundation、Semantic UI、Uikit、Bulmaなどのフレームワークのスタイルと何時(shí)間も「戦い」と「戦い」をした後、Tailwindユーティリティを使用して、雲(yún)のない空を自由に飛ぶように感じます。 。

（長(zhǎng)すぎるため、FAQSセクションはここでは省略されていますが、主な質(zhì)問(wèn)と回答の概要が保持されています）FAQSセクションは、Tailwind CSSの一意性、開(kāi)始するアプローチをカバーしています。その他のフレームワークの互換性、レスポンシブデザイン、大規(guī)模なプロジェクトの適用性、テーマのカスタマイズ、プリプロセッサのサポート、生産環(huán)境の最適化、電子メール設(shè)計(jì)、學(xué)習(xí)リソース。

この改訂された出力は、元の畫(huà)像の位置と形式を維持しながら、テキストを大幅に言い換えて、Webサイトテンプレートを構(gòu)築するための長(zhǎng)期にわたって要約されています要約もまとめられています

以上がTailwind CSSを備えたユニークで美しいWebサイトを構(gòu)築する方法の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。