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

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

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

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

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

キーポイント

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

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

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

tailwind公式ウェブサイト

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

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

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

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

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

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

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

テールウィンドの初心者

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

次のステップは、

npm install tailwindcss

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

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

@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

さて、作成を開始する準備ができました。

output.css

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

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

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

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

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

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