🦚

TailwindCSSの導入

9 min read

TailwindCSSは「使いやすさを優先しよう」という考え方で設計されたユーティリティファーストのCSSフレームワークです。公式ドキュメントがかなり充実していますので、こちらを参照しつつ導入部分を簡単にまとめてみたいと思います。

https://tailwindcss.com/

今回は行うことは以下のような内容です。

  • npmでtailwindcssをインストールする
  • 設定ファイルを作成して簡単なカスタマイズをする
  • Purge機能を使用してファイルの軽量化を行う

TailwindCSSを利用する方法

TailwindCSSを利用するにはCDNから読み込む方法とnpmを利用してインストールする方法があります。

CDNから読み込む

htmlのhead内に以下を記述するのみで利用できます

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

簡単に利用できて便利ですが、この方法ではTailwindCSSのデフォルトテーマをカスタマイズすることができなかったり、未使用のスタイルを削除できないなどの制約があります。

npmを利用してインストールする

今回はルートディレクトリを作成して、srcに開発用ファイル、distに本番用ファイルを配置して進めます。最終的に、以下のような構成となります。

.
├── dist
│   ├── styles.css
│   └── index.html
├── src
│   ├── styles.css
│   └── styles_dev.css
├── tailwind.config.js
└── package.json

インストール

まず作業用ディレクトリに移動して、npm initコマンドを実行しpackage.jsonファイルを作成します。

$ npm init -y

次に以下のコマンドでtaailwindcssをインストールします。一緒にpostcssautoprefixerもインストールします。

$ npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

各バージョンは以下のようになりました(2021/05/13時点)。

package.json
{
  // ...
  "devDependencies": {
    "autoprefixer": "^10.2.5",
    "postcss": "^8.2.15",
    "tailwindcss": "^2.1.2"
  }
}

cssファイルのビルド

srcディレクトリの中にstyles.cssを作成して以下のように記述します。

src/styles.css
@tailwind base;
@tailwind components;
@tailwind utilities;

ここまでできたら、以下のコマンドでビルドできます。

$ npx tailwindcss build src/styles.css -o src/styles_dev.css

   tailwindcss 2.1.2

   🚀 Building: src/styles.css

   ✅ Finished in 3.31 s
   📦 Size: 4.19MB
   💾 Saved to src/styles_dev.css

Sizeがとても大きくなっていますが、ここでは一旦このままとして後の手順で軽量化します。

ビルドに毎回長いコマンドを打つのが大変なのでscriptを使用します。package.jsonに以下の記述を追加します。名前はdevとしました。

package.json
"scripts": {
  "dev": "tailwindcss build src/styles.css -o src/styles_dev.css",
}

これでnpmコマンドからビルドできるようになりました。

$ npm run dev

htmlファイルから読み込む

srcディレクトリにstyles_dev.cssが生成されたので、dist内にhtmlファイルを作成してこれを読み込みます。
これで準備が整ったので、簡単にclassを記述してみます。

dist/index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>TailwindCss sample</title>
  <link rel="stylesheet" href="../src/styles_dev.css">
</head>
<body>
  <button class="w-24 m-4 p-4 rounded-sm bg-red-500 text-center text-white">テスト</button>
</body>
</html>

無事にスタイルが適用されました!

TailwindCCのカスタマイズ

TailwindCCをカスタマイズする方法をいくつか試してみたいと思います。まず下記コマンドを実行してtailwind.config.jsという設定ファイルを生成します。

$ npx tailwindcss init
tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

IDEにVSCodeを利用している場合、Tailwind CSS IntelliSenseというプラグインを利用すると、コード補完が利いて便利です。
※この機能を利用するためにはtailwind.config.jsファイルが必要になります。

クラスを追加する

独自のユーティリティクラスを追加するには、tailwind.config.jsthemeの中に記述を追加していきます。デフォルトの設定に追加していく場合はextendの中に記述します。

tailwind.config.js
module.exports = {
  theme: {
    // ここに書くと追加ではなくデフォルトの設定が上書きされる
    extend: {
      // デフォルトの設定に追加する場合はこの中に書く
    },
  },
}

カラーパレットの追加

例としてカラーパレット設定を追加してみます。最初に下記のように記述してcolorsの設定を使えるようにします。

const colors = require('tailwindcss/colors');

カラーパレットのカスタム用に、あらかじめ用意されたものがいくつかありますので、試しにこの中からTealを追加してみます。

https://tailwindcss.com/docs/customizing-colors#color-palette-reference
tailwind.config.js
const colors = require('tailwindcss/colors');

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      colors: {
        'teal': colors.teal
      },
    },
  },
  // ...
}

この状態でビルドすると、追加したクラスが使用できるようにまります。

dist/index.html
<div class="text-teal-700 bg-teal-100">tealのテスト</div>

独自のカラーパッレトを作成することもできます。以下のように適当な名前(今回はhobbyとしました)をつけて色を指定します。この状態でビルドすると指定した名前でカラーが使用できるようにまります。

tailwind.config.js
// ...
theme: {
  extend: {
    colors: {
      'teal': colors.teal,
      hobby: {
        100: '#001871',
        200: '#ff585d',
        300: '#ffb549',
        400: '#41b6e6',
      }
    },
  },
},
// ...
dist/index.html
<body>
  <div class="p-2 m-2 text-teal-700 bg-teal-100">tealのテスト</div>
  <div class="p-2 m-2 text-hobby-100 bg-hobby-200">hobbyのテスト</div>
  <div class="p-2 m-2 text-hobby-300 bg-hobby-400">hobbyのテスト</div>
</body>

カラー以外にもフォントやブレークポイントのカスタマイズ、キー自体を新しく追加できたりなど、自由にカスタマイズできます。

https://tailwindcss.com/docs/theme

ベーススタイルをカスタマイズする

@base

TailwindCCでは、デフォルトで適用するスタイルをNormalize.cssをベースにして調整しています。その為デフォルトでは、要素ごとのスタイルがほとんど当たらない状態となります。見出しやリストなど要素ごとにベースのスタイルをカスタマイズしたい場合は、ビルド元のcssファイルを編集します。
例えばh1要素のテキストサイズをtext-2xlとしたい場合は以下のように書きます。

src/styles.css
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  h1 {
    @apply text-2xl;
  }
}

@layerでカスタムスタイルがどこに属するかを指定します。
@applyで既存のユーティリティクラスを使用できます。

https://tailwindcss.com/docs/functions-and-directives

@components

同じユーティリティパターンの使いまわしが必要になった場合、@layer components内に以下のように記述することで、パターンに名前をつけて使用することができます。

src/styles.css
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .btn {
    @apply w-24 m-4 p-4 rounded-sm bg-red-500 text-center text-white
  }
}
dist/index.html
<body>
  <button class="w-24 m-4 p-4 rounded-sm bg-red-500 text-center text-white">テスト</button>
  <button class="btn">@apply</button>
</body>

ビルドして使用してみると、同じようにスタイルが適用されました!

同じユーティリティパターンが2度以上でたら抽象化して利用するなど、ルールを決めて使用すると良いのかもしれません。

@utilities

また、独自のユーティリティクラスをこちらに追加することもできます。ブレークポイントの指定やhoverなどの擬似クラス等も設定できます。下記に詳しく書かれています。

https://tailwindcss.com/docs/adding-new-utilities

VSCodeを利用している場合、CSSファイル中に下図のようにエラーが出ます(セミコロンがないなど、通常のCSSの記述ではないため)。

解消方法はいくつかあるようですが、簡単な方法としてPostCSS Language Supportというプラグインをインストールして有効にするとで、エラーが消えます。

Purge機能でファイルサイズを小さくする

現状、ビルドで生成されるcssファイルのサイズがかなり大きくなっていました。これは実際に使用していないスタイルもビルド後のファイルに含まれてしまっている為です。

$ npm run dev

   tailwindcss 2.1.2

   🚀 Building: src/styles.css

   ✅ Finished in 3.31 s
   📦 Size: 4.19MB
   💾 Saved to src/styles_dev.css

4.19MBとかなり大きいサイズです...
本番環境で利用するために、このファイルサイズを縮小します。

まず、以下のコマンドでcross-envというライブラリをインストールします。

$ npm install cross-env

cross-envはOSごとの環境変数設定の違いを吸収してくれるパッケージです
https://www.npmjs.com/package/cross-env

次に、以下のようにtailwind.config.jspurge内にパージ対象のファイルを記述します。

tailwind.config.js
module.exports = {
  purge: [
    './dist/*.html',
  ],
  // ...
}

package.jsonscriptに以下のようなコマンドを追加します。今回名前はbuildとしてdist内に書き出されるようにしました。

package.json
{
  // ...
  "scripts": {
    "dev": "tailwindcss build src/styles.css -o src/styles_dev.css",
    "build": "cross-env NODE_ENV=production tailwindcss build src/styles.css -o dist/styles.css"
  },
  // ...
}

PurgeCSSがデフォルトで、環境変数NODE_ENVproductionでない場合はパージを実行しない仕様になっているため、cross-env NODE_ENV=productionとします。

これで準備が整ったので、ビルドします。

$ npm run build

   tailwindcss 2.1.2

   🚀 Building: src/styles.css

   ✅ Finished in 2.91 s
   📦 Size: 12.02KB
   💾 Saved to dist/styles.css

Sizeがかなりすっきりしました!

これをhtml内で読み込めば完了です。

dist/index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>TailwindCss sample</title>
  <!-- <link rel="stylesheet" href="../src/styles_dev.css"> -->
  <link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- ... -->
</body>
</html>

本番環境で利用する場合には、実質的にPurgeして使用することが必須になるかと思われます。

Purgeの注意点

Purgeする際の注意点として、動的にクラス名の文字列を組み立てる場合には注意が必要となります。例えば以下のような記述では、意図したクラスが得られません。

<!-- 以下のような記述では'text-red'と'text-green'はPurgeされてしまいます -->
<div class="text-{{ error ? 'red' : 'green' }}-600"></div>
<!-- この場合以下のように記述する必要があります -->
<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

これは、PurgeCSS(内部で使用するライブラリ)がファイル全体で以下の正規表現に一致する文字列を選別している為です。

/[^<>"'`\s]*[^<>"'`\s:]/g

https://tailwindcss.com/docs/optimizing-for-production

終わりに

今回初めて技術記事?らしきものを書いてみました。実務未経験で絶賛学習中の身ですので、内容に誤り等あれば修正したいと思いますのでご指摘頂けると助かります。

参考

GitHubで編集を提案

Discussion

ログインするとコメントできます