【入門】Tailwind.cssで学んだことをまとてみた【使い方】

記事内に広告を含みます

≫こちらのUdemy教材でTailwind CSSを学びました ≫こちらの本でTailwind CSSを学びました

【導入編】Tailwind.cssで学んだことをまとてみた
【使い方編】Tailwind.cssで学んだことをまとてみた
【入門】Tailwind.cssで学んだことをまとてみた【使い方】：まとめ

【導入編】Tailwind.cssで学んだことをまとてみた

Tailwind.cssを導入する（CDN編）

下記をHTMLに貼り付け

<script src="https://cdn.tailwindcss.com"></script>

ただCDNだとCSSで使用する全てのクラスが含まれる結果、ファイルサイズが大きくなるので、本番環境では不向きとのこと。

Tailwind.cssを導入する（npm編）

npmでのインストールして使う方法として、下記手順で解説していきます。

①：tailwind.cssをインストール

②：input.cssを作成

③：テンプレートパスを構成

④：ビルドする

⑤：ビルド後のcssファイルを読み込む

①：tailwind.cssをインストール

まず下記コマンドを順に行い、インストールします。

// インストール
npm install -D tailwindcss

// tailwind.config.jsが作られる
npx tailwindcss init

②：input.cssを作成

続いて「src」ディレクトリの中に「input.css」を作成します。

src/input.css

そしたらそのcssファイルに下記をコピペして貼り付けましょう。

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

③：テンプレートパスを構成

tailwind.config.jsにてテンプレートパスを構成します。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

④：ビルドする

下記コマンドでinput.cssをoutput.cssにビルドします。

npx tailwindcss -i ./src/input.css -o ./src/output.css --watch

ただ毎度上記のコマンドを打つのは手間がかかるので、下記のようにpackage.jsonに記述しておきます。

"scripts": {
  "build": "npx tailwindcss -i ./src/input.css -o ./src/output.css --watch"
},

これで下記コマンドをターミナルに打てば、ビルドができます。

npm run build

⑤：ビルド後のcssファイルを読み込む

後はビルドしたcssファイルを読み込めば使用可能です。

下記のようにlinkタグで読み込み、tailwindで使えるクラスをh1タグに入れると無事適用されました。

<!DOCTYPE html>
<html lang="ja">
<head>
~~
  <link href="./src/output.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

Tailwind CSSにおすすめの拡張機能

Tailwind CSS IntelliSense
（Tailwindで使うcssのクラス候補がでてきます）

≫こちらのUdemy教材でTailwind CSSを学びました ≫こちらの本でTailwind CSSを学びました

【使い方編】Tailwind.cssで学んだことをまとてみた

Tailwind CSS はユーティリティファーストの CSS フレームワークで、事前定義されたクラスが豊富に用意されています。

つまりその定義されたクラスを使えば、スタイルが当てられるということです。

使用するクラスの例

事前定義されたクラスの主な例がこちら↓

クラス	説明	例
`text-*`	テキストのサイズを設定	`<p class="text-lg"></p>`
`font-*`	フォントスタイルを設定	`<span class="font-bold"></span>`
`tracking-*`	文字間隔を設定	`<p class="tracking-wider"></p>`
`leading-*`	行間を設定	`<p class="leading-relaxed"></p>`

クラス	説明	例
`bg-*`	背景色を設定	`<div class="bg-blue-500"></div>`
`text-*`	テキスト色を設定	`<p class="text-red-400"></p>`
`border-*`	ボーダーの色を設定	`<div class="border border-gray-300"></div>`
`hover:bg-*`	ホバー時の背景色を設定	`<button class="hover:bg-green-600"></button>`

クラス	説明	例
`container`	中央揃えでレスポンシブな幅を提供	`<div class="container mx-auto"></div>`
`flex`	フレックスボックスを適用	`<div class="flex items-center"></div>`
`grid`	グリッドレイアウトを適用	`<div class="grid grid-cols-3 gap-4"></div>`
`space-x-*`	子要素間の水平間隔を設定	`<div class="flex space-x-4"></div>`

下記の公式ドキュメントのクイック検索等で、色々な定義されたクラスを調べることができます。

https://tailwindcss.com/docs/font-size

ブレイクポイントの設定方法

Tailwind.cssでブレイクポイントを設定する方法は「〇〇:」と記述すれば可能です。

そのやり方がこちら↓

プレフィックス	範囲	例
`sm:`	`min-width: 640px`	`<div class="sm:text-lg"></div>`
`md:`	`min-width: 768px`	`<div class="md:grid-cols-2"></div>`
`lg:`	`min-width: 1024px`	`<div class="lg:py-8"></div>`
`xl:`	`min-width: 1280px`	`<div class="xl:gap-10"></div>`
`2xl:`	`min-width: 1536px`	`<div class="2xl:text-3xl"></div>`

状態に基づくクラス

Tailwind CSS では、状態に基づくクラスを簡単に適用できます。

プレフィックス	説明	例
`hover:`	ホバー時	`<button class="hover:bg-blue-500"></button>`
`focus:`	フォーカス時	`<input class="focus:ring-2"></input>`
`active:`	アクティブ時	`<button class="active:scale-95"></button>`
`disabled:`	無効状態	`<button class="disabled:opacity-50"></button>`

@apply

「@apply」を使えば、cssファイルにTailwind用のクラスを組み込むことができ、それをまとめたクラスを使い回すことが可能です。

使い方の例がこちら↓

.btn {
  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
}

.btn:hover {
  @apply bg-blue-700;
}

<button class="btn">ボタン</button>

設定を色々カスタマイズ

Tailwind CSS は「tailwind.config.js」にて、色々設定をカスタマイズすることができます。

例えば使いたい色を設定したいときの例がこちら↓

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./*.{html,js}"],
  theme: {
    extend: {
      colors: {
        primary: {
          100: "#000066",
          300: "#000010",
        }
      }
    },
  },
  plugins: [],
}

実際にクラスとして使う例がこちら↓

.btn {
  @apply bg-primary-100 text-white font-bold py-2 px-4 rounded;
}

.btn:hover {
  @apply bg-primary-300;
}

このように簡単にカスタマイズすることができます。

ちなみにもっといろいろ設定することができますよ。
例えばブレイクポイントの数値や、フォントファミリーなどなど。

公式ドキュメントにやり方が載っているので参考にどうぞ↓

https://tailwindcss.com/docs/adding-custom-styles

https://tailwindcss.com/docs/theme

≫こちらのUdemy教材でTailwind CSSを学びました ≫こちらの本でTailwind CSSを学びました