TailwindCSSを使用してSnazzyWebサイトを迅速に開発する方法

公開: 2022-03-16

開発者として進歩するにつれて、より少ないコードを書くことでより多くのことを行うのに役立つテクノロジーを使用する可能性が高くなります。 Tailwind CSSのような堅固なフロントエンドフレームワークは、それを実現する1つの方法です。

この記事では、Webページの構築と設計を支援するCSSフレームワークであるTailwindCSSについて学習します。 まず、Tailwind CSSをプロジェクトにインストールして統合する方法、いくつかの実用的なアプリケーションを確認する方法、およびカスタムスタイルとプラグインを作成する方法について説明します。

興奮した？ さぁ、始めよう！

Tailwind CSSとは何ですか？

tailwind-css-ホームページ
テールウィンドCSS。

Tailwind CSSは、ユーティリティファーストのCSS（Cascading Style Sheets）フレームワークであり、マークアップで直接Webページを構築および設計するために使用できる事前定義されたクラスを備えています。 これにより、事前定義されたクラスの形式でHTMLにCSSを記述できます。

フレームワークとは何か、「ユーティリティファーストCSS」とは何を意味するのかを定義して、TailwindCSSとは何かをよりよく理解できるようにします。

フレームワークとは何ですか？

一般的なプログラミング用語として、フレームワークは、既存のツールの機能から構築された再利用可能な既製のコンポーネントを提供するツールです。 フレームワークを作成する全体的な目的は、作業を減らして開発速度を上げることです。

フレームワークの意味を確立したので、TailwindCSSがCSS機能に基づいて構築されたツールであることを理解するのに役立つはずです。 フレームワークのすべての機能は、クラスとして構成されたCSSスタイルから派生しました。

ユーティリティファーストのCSSフレームワークとは何ですか？

ユーティリティファーストCSSとは、事前定義された機能を備えたマークアップ（HTML）のクラスを指します。 これは、事前定義されたスタイルがアタッチされたクラスを作成するだけでよく、それらのスタイルが要素に適用されることを意味します。

バニラCSS（フレームワークやライブラリを含まないCSS）を使用している場合は、最初に要素にクラス名を付けてから、そのクラスにさまざまなプロパティと値を付加します。これにより、要素にスタイルが適用されます。 。

例を示します。 ここでは、角が丸いボタンと「クリックしてください」というテキストを作成します。 ボタンは次のようになります。

角がわずかに丸みを帯びた長方形の黒いボタンと、「Clickme」と書かれた白いテキスト。
私たちのボタン。

最初にバニラCSSを使用してこれを行い、次にTailwindCSSで利用可能なユーティリティクラスを使用します。

バニラCSSを使用

<button class="btn">Click me</button>

ボタンタグにクラスbtnを指定しました。これは、外部スタイルシートを使用してスタイル設定されます。 あれは：

 .btn { background-color: #000; color: #fff; padding: 8px; border: none; border-radius: 4px; }

TailwindCSSを使用

<button class="bg-black p-2 rounded">Click me</button>

これはすべて、バニラCSSの例と同じ効果を達成するために必要です。 使用した各クラス名にはすでに事前定義されたスタイルがあるため、スタイルを記述しなければならない外部スタイルシートは作成されませんでした。

TailwindCSSを使用するための前提条件

Tailwind CSSを使用する前に、フレームワークの機能を問題なく使用するために満たすことを検討する必要があるいくつかの前提条件があります。 それらのいくつかを次に示します。

  • HTML、その構造、およびその仕組みに関する十分な知識
  • CSSの強固な基盤—メディアクエリ、フレックスボックス、グリッドシステム

Tailwind CSSはどこで使用できますか？

Tailwind CSSは、React.js、Next.js、Laravel、Vite、GatsbyなどのJavaScriptフレームワークを含むフロントエンドWebプロジェクトで使用できます。

TailwindCSSの長所と短所

TailwindCSSを使用する利点のいくつかを次に示します。

  1. より迅速な開発プロセス
  2. ユーティリティが似ているので、CSSをもっと練習するのに役立ちます
  3. すべてのユーティリティとコンポーネントは簡単にカスタマイズできます
  4. 本番用の全体的なファイルサイズは通常小さいです
  5. CSSをすでに知っている場合は簡単に学ぶことができます
  6. 学習のための優れたドキュメント

Tailwind CSSを使用することの欠点には、次のようなものがあります。

  1. すべてのスタイルがHTMLファイルに含まれているため、大規模なプロジェクトではマークアップがまとまりがないように見える場合があります。
  2. CSSをよく理解していないと、学ぶのは簡単ではありません。
  3. 入力要素を含め、すべてを最初から作成する必要があります。 Tailwind CSSをインストールすると、デフォルトのCSSスタイルがすべて削除されます。
  4. Tailwind CSSは、Webサイトのフロントエンドの開発に費やす時間を最小限に抑え、主にバックエンドロジックに焦点を当てる場合、最適なオプションではありません。

TailwindCSSを使用する場合

Tailwind CSSは、記述するコードを減らして開発プロセスをスピードアップするのに最適です。 パディング、間隔などのさまざまな設計要件にわたって一貫性を維持するのに役立つ設計システムが付属しています。 これにより、設計システムの作成について心配する必要がなくなります。

コンポーネント（ナビゲーションバー、ボタン、フォームなど）を常に同じように使用する必要がないため、簡単に構成できるフレームワークを使用する場合は、TailwindCSSを使用することもできます。 コンポーネントがどのように見えるかを選択できます。 ただし、CSSを学習および実践していない場合は、Tailwindを使用しないでください。

TailwindCSSと他のCSSフレームワークの類似点と相違点

ここにいくつかの類似点があります：

  1. 彼らはあなたがより速く仕事を成し遂げるのを助けます。
  2. 事前定義されたクラスが付属しています。
  3. それらはCSSルールに基づいて構築されました。
  4. これらは、CSSの実用的な知識があれば、簡単に習得して使用できます。

次に、いくつかの違いを見てみましょう。

  1. Tailwindは、コンポーネントを作成する必要があるため、ほとんどのフレームワークとは異なります。 たとえば、Bootstrapにはナビゲーションバーやボタンなどのコンポーネントがありますが、Tailwindでは、それらすべてを自分で作成する必要があります。
  2. Bootstrapのような一部のフレームワークは簡単にカスタマイズできないため、それらのデザインパターンを使用する必要があります。 Tailwindでは、すべての流れを制御します。
  3. Tailwindを使用するには、CSSに関する深い知識が必要です。 同じ結果を得るには、バニラCSSを作成しているかのようにクラス名を組み合わせる必要があるため、クラス名を作成するだけでは不十分です。 他のほとんどのフレームワークで知っておく必要があるのは、クラス名を使用したときにどのコンポーネントが構築されるかだけです。

TailwindCSSの使用を開始する方法

Tailwind CSSをインストールしてプロジェクトに統合する前に、次のことを確認してください。

  1. ターミナルでNodeパッケージマネージャー（npm）を利用するために、Node.jsがコンピューターにインストールされています。
  2. プロジェクトはすべて、作成されたファイルでセットアップされます。

現在のプロジェクト構造は次のとおりです。

 -Tailwind-tutorial -public -index.html -styles.css -src -styles.css

次に、プロジェクトのターミナルを起動し、次のコマンドを実行します。

 npm install -D tailwindcss

上記のコマンドは、TailwindCSSフレームワークを依存関係としてインストールします。 次に、以下のコマンドを実行して、tailwind.config.jsファイルを生成します。

 npm install -D tailwindcss

tailwind.config.jsファイルは作成時に空になるため、次のコードをいくつか追加する必要があります。

 module.exports = { content: ["./src/**/*.{html,js}", "./public/*.html"], theme: { extend: {}, }, plugins: [], };

コンテンツ配列で提供されるファイルパスにより、Tailwindはビルド時に未使用のスタイルをパージ/削除できます。

次に行うことは、 srcフォルダー内のCSSファイルに「@tailwind」ディレクティブを追加することです。これは、Tailwindが事前定義されたすべてのユーティリティスタイルを生成する場所です。 

@tailwind base; @tailwind components; @tailwind utilities;

最後に行うことは、ターミナルで次のコマンドを実行してビルドプロセスを開始することです。

 npx tailwindcss -i ./src/styles.css -o ./public/styles.css --watch

上記のコードでは、入力ファイルはsrcフォルダーのスタイルシートであり、使用したスタイルはすべてパブリックフォルダーの出力ファイルに組み込む必要があることをTailwindに伝えています。 --watchを使用すると、Tailwindは、自動ビルドプロセスの変更についてファイルを監視できます。 これを省略すると、コードをビルドして目的の出力を確認するたびに、そのスクリプトを実行する必要があります。

より少ないコードを書きながらより多くのことをしたいですか？ 堅固なフロントエンドフレームワークは、それを実現する1つの方法です。 TailwindCSSから始めるクリックしてツイート

TailwindCSSの使用

プロジェクトにTailwindCSSをインストールしてセットアップしたので、そのアプリケーションを完全に理解するためにいくつかの例を見てみましょう。

Flexboxの例

Tailwind CSSでフレックスを使用するには、フレックスのクラスを追加してから、フレックスアイテムの方向を追加する必要があります。

 <div class="flex flex-row"> <button> Button 1 </button> <button> Button 2 </button> <button> Button 3 </button> </div>
TailwindCSSのflex-rowユーティリティクラスを使用して水平に配置された3つのボタン。
3つの紫色のボタン。

flex-row-reverseを使用すると、ボタンが表示される順序が逆になります。

flex-colはそれらを互いに積み重ねます。 次に例を示します。

 <div class="flex flex-col"> <button> Button 1 </button> <button> Button 2 </button> <button> Button 3 </button> </div>
TailwindCSSのflex-colユーティリティクラスを使用して垂直に配置された3つのボタン。
3つの紫色のボタン。

前の例と同じように、 flex-col-reverseは順序を逆にします。

グリッドの例

グリッドシステムで列と行を指定する場合、要素が使用可能なスペースをどのように占有するかを決定する数値を渡すことにより、別のアプローチを取ります。

ダウンタイムとWordPressの問題に苦しんでいますか？ Kinstaはあなたの時間を節約するために設計されたホスティングソリューションです！ 私たちの機能をチェックしてください
<div class="grid grid-cols-3"> <button> Button 1 </button> <button> Button 2 </button> <button> Button 3 </button> <button> Button 4 </button> <button> Button 5 </button> <button> Button 6 </button> </div>
Tailwind CSSのgrid-colsユーティリティクラスを使用して、6つのボタンが列に均等に分散されています。
6つの紫色のボタン。

色

Tailwindには、事前定義された色がたくさん付属しています。 各色にはさまざまなバリエーションがあり、最も明るいバリエーションは50、最も暗いバリエーションは900です。

これを説明するための複数の色とそのHTML16進コードの写真を次に示します。

Tailwind CSSの赤、オレンジ、琥珀色のカラーバリエーション
Tailwindのデフォルトパレットから色をカスタマイズします。 （画像ソース）

上記の赤い色を使用してボタン要素に背景色を与える方法の例を示します。

 <button class="bg-red-50">Click me</button> <button class="bg-red-100">Click me</button> <button class="bg-red-200">Click me</button> <button class="bg-red-300">Click me</button> <button class="bg-red-400">Click me</button> <button class="bg-red-500">Click me</button> <button class="bg-red-600">Click me</button> <button class="bg-red-700">Click me</button> <button class="bg-red-800">Click me</button> <button class="bg-red-900">Click me</button>

この構文は、同じ方法で記述されているが数字を使用しない黒と白を除いて、Tailwindのすべての色で同じです： bg-blackとbg-white 。

テキストの色を追加するには、クラスtext-{color}を使用します。

 <p class="text-yellow-600">Hello World</p>

パディング

Tailwindには、デザイン全体で一貫したスケールを維持するのに役立つデザインシステムがすでにあります。 知っておく必要があるのは、各ユーティリティを適用するための構文だけです。

以下は、要素にパディングを追加するためのユーティリティです。

  • pは、要素全体のパディングを示します。
  • pyは、padding-topとpadding-bottomを示します。
  • pxは、padding-leftとpadding-rightを示します。
  • ptはパディングトップを示します。
  • prはパディング右を示します。
  • pbはパディングボトムを示します。
  • plはパディングを示します-左

それらを要素に適用するには、Tailwindが提供する適切な番号を使用する必要があります。これは、前のセクションでカラーバリエーションを表した番号と少し似ています。 これが私たちの意味です：

 <button class="p-0">Click me</button> <button class="pt-1">Click me</button> <button class="pr-2">Click me</button> <button class="pb-3">Click me</button> <button class="pl-4">Click me</button>

マージン

パディングとマージンの事前定義されたユーティリティは非常に似ています。 pをmに置き換える必要があります：

  • m
  • my
  • mx
  • mt
  • mr
  • mb
  • ml

TailwindCSSプラグインを作成する方法

Tailwind CSSにはすでに多数のユーティリティと設計システムが構築されていますが、Tailwindの用途を拡張するために追加したい特定の機能がある可能性があります。 Tailwind CSSを使用すると、プラグインを作成してこれを行うことができます。

アクアカラーを追加するプラグインと、X軸上で要素150を回転させる回転ユーティリティを作成して、手を汚しましょう。 これらのユーティリティは、JavaScriptを少し使用してtailwind.config.jsファイルで作成します。

 const plugin = require("tailwindcss/plugin"); module.exports = { content: ["./src/**/*.{html,js}", "./public/*.html"], theme: { extend: {}, }, plugins: [ plugin(function ({ addUtilities }) { const myUtilities = { ".bg-aqua": { background: "aqua" }, ".rotate-150deg": { transform: "rotateX(150deg)", }, }; addUtilities(myUtilities); }), ], };

さて、これを分解しましょう。 最初に行ったのは、Tailwindのプラグイン関数をインポートすることでした。

 const plugin = require("tailwindcss/plugin");

次に、plugins配列にプラグインを作成しました。

 plugins: [ plugin(function ({ addUtilities }) { const newUtilities = { ".bg-aqua": { background: "aqua" }, ".rotate-150deg": { transform: "rotateX(150deg)", }, }; addUtilities(newUtilities); }), ],

プラグインを作成した後、ビルドスクリプトを再実行する必要がある場合があります。

プラグインの準備ができたので、次のようにテストできます。

 <button class="bg-aqua rotate-150deg">Click me</button>

すべてを正しく行うと、テキストがX軸で150に回転した水色のボタンが表示されます。

Webページを構築および設計するためのあなたの秘密兵器？ TailwindCSS クリックしてツイート

概要

フレームワークは、ワークフローを高速化する上で非常に貴重なオプションです。 デザインの一貫性を維持しながら、見栄えの良いプロフェッショナルなWebページを作成するのに役立ちます。 Tailwind CSSは、Webデザインと開発を次のレベルに引き上げるのに役立つ多くのユーティリティフォワードCSSクラスを提供します。

この記事では、Tailwind CSSとは何か、そしてそれをフレームワークにするものについて説明しました。 次に、インストールプロセスを確認し、既存の機能を拡張するカスタムプラグインを作成する方法を示すいくつかの例を確認しました。

この時点までフォローアップした場合は、Tailwindがどのように機能するかについての基本的かつ確実な理解が得られます。 ただし、このようなユーティリティファーストのフレームワークを上手に使用するには、まだしっかりとした基盤がない場合は、CSSの練習を続け、知識を増やす必要があります。

過去にTailwindCSSまたは別のCSSフレームワークを使用したことがありますか？ コメントセクションであなたの考えを共有してください！