Tailwind CSSを備えたユニークで美しいWebサイトを構築する方法

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

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

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

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

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

キーポイント

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

追い風とは何ですか？

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

tailwind公式ウェブサイト

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

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

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

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

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

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

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

テールウィンドの初心者

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

次のステップは、

<code class="language-bash">npm install tailwindcss</code>

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

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

<code class="language-css">@tailwind base;

@tailwind components;

@tailwind utilities;</code>

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

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

最後に、生成された

<code class="language-javascript">module.exports = {
  theme: {},
  variants: {},
  plugins: [],
}</code>

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

<code class="language-bash">npx tailwind build styles.css -o output.css</code>

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

output.css

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

<code class="language-html"><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"></code>

概要

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

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

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

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

以上がTailwind CSSを備えたユニークで美しいWebサイトを構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。