【Tailwind CSS】チュートリアル & Vite*Vue3への導入手順


![wind-windy.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2356280/bfd7c3ad-049e-39d9-e6cc-b8ad9f71a825.gif)
最近注目されているCSSフレームワーク、Tailwind CSSの学習メモ兼チュートリアル記事です。
Tailwindとは何か/どのように使うのかという点について記載しましたので、Tailwindの学習を始める方などのお役に立てると幸いです！

## [Tailwind CSS](https://tailwindcss.com/)
![Screen Shot 2023-03-18 at 15.51.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2356280/81bea405-a14f-e74a-9026-ac26215a7347.png)



Tailwindは、[Adam Wathan](https://github.com/adamwathan)率いる[TailwindLabs](https://github.com/tailwindlabs)によって開発されたされたCSSのフレームワークです。

2019年に初版がリリースされ、2021年に最新のメジャーアップデートとなるバージョン3.0がリリースされました。

## ユーティリティクラス
Tailwindには大量のユーティリティクラスが用意されています。それらを組み合わせてスタイルを調整してくのがTailwindを使用したスタイリングの大きな特徴です。大抵のスタイルをユーティリティクラスだけの組み合わせで実現できるように、かなり細かい単位でユーティリティクラスが用意されています。

例えばテキストを赤色にするユーティリティクラスだけでも、色の濃さを調整できるように以下の種類があります。

|  Tailwind ユーティリティクラス  |  CSSで書くと...  |
| ---- | ---- |
|  `text-red-50`  |  `color: rgb(254 226 226);`  |
|  `text-red-100`  |  `color: rgb(254 202 202);`  |
|  `text-red-200`  |  `color: rgb(252 165 165);`  |
|  `text-red-300`  |  `color: rgb(254 226 226);`  |
|  `text-red-400`  |  `color: rgb(248 113 113);`  |
|  `text-red-500`  |  `color: rgb(239 68 68);`  |
|  `text-red-600`  |  `color: rgb(220 38 38);`  |
|  `text-red-700`  |  `color: rgb(185 28 28);`  |
|  `text-red-800`  |  `color: rgb(153 27 27);`  |
|  `text-red-900`  |  `color: rgb(127 29 29);`  |

これだけ数が多いと、「クラスを覚えるのに苦労しそう...」と思うかもしれませんが、上記の`text-red-50`のように、Tailwindのユーティリティクラス名は適用されるスタイルがイメージしやすいように命名されています。

[公式ドキュメント](https://tailwindcss.com/docs/width)のユーティリティクラスのリファレンスも親切なものになっています。

また、ユーティリティクラスに存在しないサイズや色を指定したい際には、ブラケットを使用することができます。

例えば、標準のユーティリティクラスではテキストのサイズを18pxにするものはないのですが（[フォントサイズ指定クラス](https://tailwindcss.com/docs/font-size)）、`text-[18px]`という感じに指定することでスタイルをあてることができます。`text-[#8a1216]`のように色の指定にもブラケットを使用することが可能です。

## ユーティリティバリアント
Tailwindでは、`active`、`hover`をはじめとした複数のバリアントが用意されています。これらをユーティリティクラスの前に付与することで、より高度なスタイリングが可能です。

たとえば、ホバー時には色を少し濃くして、クリックされた時には更に色を濃くしたい場合、以下のようにクラスを指定します。`hover:`を付与すると、付与されたクラスがホバー時に適用されます。`active:`を付与すると、要素がアクティブの時に付与されたクラス適用されます。
~~~css
bg-blue-700 hover:bg-blue-800 active:bg-blue-900
~~~

他にも、代表的なものとして以下のようなバリアントが用意されています。全てのリファレンスは[公式ドキュメント](https://tailwindcss.com/docs/hover-focus-and-other-states#quick-reference)を参照してください。

|  バリアント  |  付与されたクラスが適用される条件  |
| ---- | ---- |
|  `hover`  |  要素のホバー時  |
|  `focus`  |  要素のフォーカス時  |
|  `active`  |  要素のアクティブ時  |
|  `disabled`  |  要素の非活性時  |
|  `visited`  |  画面初期遷移時  |
|  `checked`  |  ラジオボックス/チェックボックスのアクティブ時  |
|  `group-hover`  |  `group`が付与された親要素のホバー時  |
|  `group-focus`  |  `group`が付与された親要素のフォーカス時  |
|  `focus-within`  |  `focus`が付与された子要素のフォーカス時  |
|  `dark`  |  ダークモード有効時  |

## `tailwind.config.js`
`tailwind.config.js`というTailwindの設定ファイルでオプションを指定することで、全体の設定をカスタマイズすることができます。Tailwindをインストールした後に以下コマンドを実行することで、ルートディレクトリに自動に設定ファイルが作成されます。
~~~bash
npx tailwindcss init -p
~~~
~~~javascript:tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}
~~~
次項からは`tailwind.config.css`で設定可能なオプションを紹介していきます。

## ビルドサイズ最適化
大量のユーティリティクラスがあって、そこから必要なものを使用してスタイリングをするのがTailwindの特徴であることを紹介しましたが、全てのユーティリティクラスを読み込むとビルドサイズの肥大化が懸念されます。

これは、`content`オプションを使用することで解決することができます。

`tailwind.config.js`で用意されている`content`というオプションに、ユーティリティクラスが使用されるファイルを指定すると、指定されたファイル内で使用されているユーティリティクラスのみビルド対象とし、使用されていないものに関してはビルドの対象外とすることができます。これにより、余計なクラスを読み込むことによるビルドサイズの肥大化を防ぐことができます。

以下の例では、ルートディレクトリの`index.html`と、拡張子が`vue`,`js`,`ts`,`jsx`,`tsx`のファイルをビルド最適化の対象としています。基本的に以下の設定にしておけば大丈夫です。
~~~javascript:tailwind.config.js
module.exports = {
  // ...
  content: [
    './index.html',
    './src/**/*.{vue,js,ts,jsx,tsx}'
  ],
}
~~~

ちなみにこの`content`オプションは元々`purge`という名前だったのですが、バージョン3から`content`に名前が変更になりました。
この変更は、バージョン2まではビルド最適化に[PurgeCSS](https://coliss.com/articles/build-websites/operation/css/how-to-remove-unused-css.html)というツールが使用されていたのですが、バージョン3から使用されなくなったことが理由にあります。「PurgeCSSは使ってないのに`purge`っておかしくない...?`content`にします。」という感じです。（▶︎[参考](https://tailwindcss.com/docs/upgrade-guide#configure-content-sources)）
>Since Tailwind no longer uses PurgeCSS under the hood, we’ve renamed the purge option to content to better reflect what it’s for.

一応、バージョン3で`purge`を使用してもバージョン2までと同様にビルド最適化が可能ですが、以下のような警告が出力されます。特別な理由がなければ`content`を使用しましょう。
~~~bash
warn - The `purge`/`content` options have changed in Tailwind CSS v3.0.
warn - Update your configuration file to eliminate this warning.
warn - https://tailwindcss.com/docs/upgrade-guide#configure-content-sources
~~~

## テーマのカスタマイズ
`tailwind.config.js`の`theme`オプションを指定することで、カスタムカラーやカスタムフォントを追加することができます。

#### カスタムカラー
`colors`に`{カラーの名前}: '{カラー}'`といった形のプロパティを追加することで、カスタムカラーを追加することができます。以下のように`whopper`（[#8a1216](https://www.color-hex.com/color/8a1216)）というテーマカラーを追加してみましょう。
~~~javascript:tailwind.config.js
module.exports = {
  // ...
  theme: {
    extend: {
      colors: {
        whopper: '#8a1216'
      },
    },
  },
}
~~~
追加した後に、以下のようにクラスを指定することで、追加したカラーテーマが適用されます。
~~~html
<div class="flex h-screen items-center justify-center bg-gray-200">
  <p class="font-bold text-whopper">
    Hello Tailwind
  </p>
</div>
~~~
![Screen Shot 2023-03-21 at 21.11.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2356280/cdf15e4d-b81f-81b7-c540-fbd113825616.png)


#### カスタムフォント
フォントを変更するユーティリティクラスは、標準では`font-sans`,`font-serif`,`font-mono`の3種類しかありません。`theme`オプションの`fontFamily`で設定することで、お好みのフォントをインポートすることができます。

では、[Lobster](https://fonts.google.com/specimen/Lobster)というフォントを追加してみましょう。

まずは、Googleフォントで`@import`をコピーして、`src/index.css`（Tailwindの導入で登場するファイルです。後ほどの導入方法の中で登場します。）にペーストします。
この際の注意ですが、フォントを正しく読み込ませる為に`@import`文はファイルの一番上にするようにしてください。

※Googleフォントの使用方法/URLの取得方法は[こちらの記事](https://design.webclips.jp/google-font/)が参考になります！
~~~css:src/index.css
@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');

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

次に、`tailwind.config.js`にインポートしたフォントを追加します。`{フォント名}: ['{インポートしたフォント名}']`という形でフォントを追加してください。
~~~javascript:tailwind.config.js
module.exports = {
  // ...
  theme: {
    extend: {
      colors: {
        whopper: '#8a1216'
      },
      fontFamily: {
        lobster: ['Lobster'],
      },
    },
  },
}
~~~
`font-{フォント名}`という感じでクラスをあてると、インポートしたフォントが適用されます。
~~~html
<div class="flex h-screen items-center justify-center bg-gray-200">
  <p class="font-bold text-whopper font-lobster">
    Hello Tailwind
  </p>
</div>
~~~
![Screen Shot 2023-03-21 at 21.11.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2356280/190ab827-5749-c738-7a46-5a7b089d6636.png)

:::note warn
`Rubik+Doodle+Shadow`のような、`+`繋ぎのフォント名の場合には、読み込む際に`+`をスペースに入れ替えて読み込んでください。

```javascript
// index.css
@import url('https://fonts.googleapis.com/css2?family=Rubik+Doodle+Shadow&display=swap');

// tailwind.config.js
export default {
  ...
  theme: {
    extend: {
      fontFamily: {
        rubik: ["Rubik Doodle Shadow"], // 読み込み
      },
    },
  },
  ...
};
```
:::

## ダークモード
Tailwindでは、ユーティリティバリアントの1つである`dark:`を使用することで簡単にダークモードを実装することができます。
~~~html
<div class="flex h-screen items-center justify-center bg-gray-200 dark:bg-gray-700">
  <p class="font-bold text-blue-900 dark:text-blue-100">
    Hello Tailwind
  </p>
</div>
~~~
▶︎ ライトモード適用時
![Screen Shot 2023-03-21 at 20.57.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2356280/e1b7ca3d-eeda-ead8-b45d-546f342f2aa0.png)
▶︎ ダークモード適用時
![Screen Shot 2023-03-21 at 20.57.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2356280/c22c9199-10ed-9a10-92cc-d0ec59861e74.png)

ダークモードの切り替えは、`tailwind.config.js`の`darkMode`オプションで`media`または`class`を指定することで設定できます。
~~~javascript:tailwind.config.js
module.exports = {
  // ...
  darkMode: // 'media' or 'class'
}
~~~

`media`を指定した場合は使用しているOSの設定が反映されます。

`class`を指定した場合は、親要素のクラスに`dark`が付与されている場合に`dark:`が付与されたクラスが有効になります。アプリケーション内のユーザー操作でダークモードの切り替えができるようにするには、`class`を指定します。
~~~html
// ライトモード🌝
<div>
  <div class="flex h-screen items-center justify-center bg-gray-200 dark:bg-gray-700">
    <p class="font-bold text-blue-900 dark:text-blue-100">
      Hello Tailwind
    </p>
  </div>
</div>

// ダークモード🌚
<div class="dark">
  <div class="flex h-screen items-center justify-center bg-gray-200 dark:bg-gray-700">
    <p class="font-bold text-blue-900 dark:text-blue-100">
      Hello Tailwind
    </p>
  </div>
</div>
~~~

## その他オプション
上記で紹介したオプション`content`,`theme`,`darkMode`以外にも様々なオプションが用意されています。詳細の説明は割愛しますが、以下でそれぞれオプションの大まかな説明と参考記事を紹介します。

#### `variants`
プロジェクトで有効にするユーティリティバリアントの設定をすることができます。各コアプラグインに対してどのバリアントを有効にするか設定します。
~~~javascript:tailwind.config.js
module.exports = {
  // ...
  variants: {
    extend: {
      backgroundColor: ['active'],
      // ...
      borderColor: ['focus-visible', 'first'],
      // ...
      textColor: ['visited'],
    }
  },
}
~~~

バリアントの詳しい説明は、[こちらの記事](https://zenn.dev/unreact/articles/tailwindcss-customization-variants-jp)を参照してください。

#### `plugins`
サードバーティのプラグインを追加してTaillwindを拡張することができます。
~~~javascript:tailwind.config.js
module.exports = {
  // ...
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/forms'),
    require('@tailwindcss/line-clamp'),
    require('@tailwindcss/aspect-ratio'),
  ]
}
~~~

プラグインの詳しい説明は、[こちらの記事](https://zenn.dev/unreact/articles/tailwindcss-customization-plugins-jp)を参照してください。

#### `presets`
あらかじめ用意された`tailwind.config.js`の設定をベースとして流用する為のものです。色、フォントなどの一般的なカスタマイズを複数のチームで共有する場合に有効です。
~~~javascript:tailwind.config.js
module.exports = {
  // ...
  presets: [
    require('./tailwind-preset.js')
  ]
}
~~~
プリセットの詳しい説明は、[こちらの記事](https://zenn.dev/unreact/articles/tailwindcss-customization-presets-jp)を参照してください。

#### `prefix`
すべてのユーティリティクラスにカスタムプレフィックスを追加することができます。Tailwindのクラスであることを明示したい時などに有効です。
~~~javascript:tailwind.config.js
module.exports = {
  // ...
  prefix: 'tw-',
}
~~~
プレフィックスの詳しい説明は、[こちらの記事](https://zenn.dev/unreact/articles/tailwindcss-customization-configuration-jp#%E3%83%97%E3%83%AA%E3%83%95%E3%82%A3%E3%83%83%E3%82%AF%E3%82%B9-%7C-prefix)を参照してください。
#### `important`
Tailwindのユーティリティクラスの全てのスタイルに`!important`を付与するかどうかを設定することができます。
~~~javascript:tailwind.config.js
module.exports = {
  // ...
  important: true,
}
~~~
インポータントの詳しい説明は、[こちらの記事](https://zenn.dev/unreact/articles/tailwindcss-customization-configuration-jp#%E3%82%A4%E3%83%B3%E3%83%9D%E3%83%BC%E3%82%BF%E3%83%B3%E3%83%88-%7C-important)を参照してください。
#### `separator`
ユーティリティバリアントを付与する際に、ユーティリティクラスとの間に入れる`:`を別の文字に変更することができます。クラス名に特殊文字を使用することができない場合に有効です。
~~~javascript:tailwind.config.js
module.exports = {
  // ...
  separator: '_',
}
~~~
セパレーターの詳しい説明は、[こちらの記事](https://zenn.dev/unreact/articles/tailwindcss-customization-configuration-jp#%E3%82%BB%E3%83%91%E3%83%AC%E3%83%BC%E3%82%BF%E3%83%BC-%7C-separator)を参照してください。

#### `corePlugins`
コアプラグインを無効化することができます。プロジェクトに必要のないものを完全に無効にしたい場合に有効です。デフォルトでは全てが有効の為、無効にしたいもののみオプションに追加します。
~~~javascript:tailwind.config.js
module.exports = {
  // ...
  corePlugins: {
    float: false,
    objectFit: false,
    objectPosition: false,
  }
}
~~~
コアプラグインの詳しい説明は、[こちらの記事](https://zenn.dev/unreact/articles/tailwindcss-customization-configuration-jp#%E3%82%B3%E3%82%A2%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3-%7C-core-plugins)を参照してください。

#### `variantOrder`
ユーティリティクラスに対して複数のバリアントを付与している場合、デフォルトではTailwindの初期設定を基に有効化の順番が設定されます。`variantOrder`で指定することで、この順番をカスタマイズすることができます。
~~~javascript:tailwind.config.js
module.exports = {
  // ...
  variantOrder: [
    'first',
    'last',
    'odd',
    'even',
    'visited',
    'checked',
    'group-hover',
    'group-focus',
    'focus-within',
    'hover',
    'focus',
    'focus-visible',
    'active',
    'disabled',
  ]
}
~~~
バリアントオーダーの詳しい説明は、[こちらの記事](https://zenn.dev/unreact/articles/tailwindcss-customization-configuration-jp#%E3%83%90%E3%83%AA%E3%82%A2%E3%83%B3%E3%83%88%E3%82%AA%E3%83%BC%E3%83%80%E3%83%BC-%7C-variant-order)を参照してください。

## VSCode拡張機能

Tailwindを使用したスタイリングをスムーズに行う為、公式から[Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)というVSCodeの拡張機能が配布されています。Tailwindを取り入れる際は、是非インストールしてみてください。

クラスを入力する際に、入力された文字からTailwindのユーティリティクラスを予測変換していくれます。カラーを充てるユーティリティクラスの場合は、クラス名の前に色の見本が表示されます。
![Screen Shot 2023-03-20 at 23.16.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2356280/ab5bf77f-2264-db2d-a4b4-8b31830ee39f.png)
更に、ユーティリティクラスにマウスをホバーすると、「CSSで書くとこんな感じ」というのを表示してくれます。以下は`font-bold`にカーソルを合わせた際の表示です。
![Screen Shot 2023-03-20 at 23.16.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2356280/7d939b40-ba87-2f9b-7f07-45100b1aea11.png)

## Tailwind導入手順（Vite*Vue3）
Viteを使用して作成したVue3のアプリケーションに、Tailwindを導入する手順を紹介します。
#### 1. Vite*Vue3アプリケーションの作成
まずはViteを使用してvue3のアプリケーションを作成していきましょう。以下コマンドを実行してください。対話形式のCLIが起動するので、それぞれ以下で指定された値を入力/選択してください。

~~~bash
npm create vite@latest

> ? Project name: › hello-tailwind
> ? Select a framework: › Vue
> ? Select a variant: › JavaScript
~~~
作成したプロジェクトのディレクトリに移動し、`npm install`を実行します。
~~~bash
cd hello-tailwind
npm install
~~~

以下コマンドを実行して、開発サーバーを起動します。
~~~bash
npm run dev

> vite-test-app@0.0.0 dev
> vite


  VITE v4.1.4  ready in 194 ms

  ➜  Local:   http://127.0.0.1:5173/ 👈ブラウザでここにアクセス

  ➜  Network: use --host to expose
  ➜  press h to show help
~~~
上記コマンド実行時に表示される`Local`のアドレスにブラウザでアクセスしてみましょう。
以下のような画面が表示されれば、正常にアプリケーションが作成できています。
![Screen Shot 2023-03-10 at 4.50.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2356280/1de19e41-455e-b6f3-00de-96b205409dd3.png)

#### 2. Tailwindのインストール
Tailwindと、依存関係にあるpostcssとautoprefixerをインストールします。以下コマンドを実行してください。
~~~bash
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
~~~

#### 3. 設定ファイルの作成
次にTailwindの設定ファイルを作成します。以下コマンドを実行してください。
~~~bash
npx tailwindcss init -p
~~~
ルートディレクトリに`tailwind.config.js`と`postcss.config.js`が作成されます。

`tailwind.config.js`を以下のように修正してください。
~~~javascript:tailwind.config.js
module.exports = {
  content: [
    './index.html',
    './src/**/*.{vue,js,ts,jsx,tsx}'
  ],
  darkMode: 'media',
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};
~~~

Postcssの設定が記述されている`postcss.config.js`は、生成された状態のままで大丈夫です。
~~~javascript:postcss.config.cjs
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}
~~~
Tailwindを実際にアプリケーションで使用することができるようにしましょう。`src/`ディレクトリ配下に以下のような`index.css`を作成してください。
~~~css:src/index.css
@tailwind base;
@tailwind components;
@tailwind utilities;
~~~

作成した`index.css`を有効にする為、`src/main.js`でインポートします。
~~~javascript:src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import './index.css'; // index.cssをインポート

createApp(App).mount('#app');
~~~

#### 4. 動作確認
Tailwindの設定を読み込ませる為、開発サーバーのリロードをしてください。

次に、`src/App.vue`を以下のように編集してみてください。今回はダークモードにも対応させてみましょう。

~~~vue:src/App.vue
<template>
  <div
    class="flex h-screen items-center justify-center bg-white dark:bg-gray-800"
  >
    <button
      class="py-4 px-6 w-96 font-bold font-mono rounded-md transition-all text-white bg-blue-700 hover:bg-blue-800 active:bg-blue-900 dark:text-black dark:bg-blue-400 dark:hover:bg-blue-500 dark:active:bg-blue-600"
    >
      Hello Tailwind
    </button>
  </div>
</template>
~~~

ブラウザを確認し、以下のようにボタンが表示されれば、Tailwindがうまく導入できています！
![Screen Shot 2023-03-21 at 21.03.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2356280/940911f6-67c3-c8d2-883a-bfd6fbfd02b3.png)
ダークモードの動作確認もしてみましょう。今回、`tailwind.config.js`の`darkMode`では`media`を選択している為、使用しているPCのカラーテーマ設定が反映されます。Macを使用している方は、`システム環境設定 > 一般`からカラーテーマを設定することができます。`ダーク`を選択してみましょう。Windowsを使用されている方は、[こちら](https://appllio.com/windows-10-darkmode)を参考に設定してみてください。
![スクリーンショット 2023-03-21 23.06.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2356280/c6dcba09-1a02-08d5-6478-3aec585c7918.png)
ブラウザを再度確認すると、以下のようにダークモード用のスタイルが適用されていることが確認できます！
![Screen Shot 2023-03-21 at 21.02.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2356280/a1a08a3e-82b8-2f4e-636b-e920dca0779f.png)
これにて、Tailwindのチュートリアル&導入手順は終了です。最後まで読んでいただき、ありがとうございました！