Tailwind CSS を IE 11 対応しつつ使う

Tailwind CSS（以下 Tailwind）はユーティリティークラスを集めた CSS フレームワークです。

殆どのクラスが一つの CSS プロパティしか規定されていないので、他の CSS フレームワークを使っている時にありがちな、欲しくないルールの上書きなどを気にせずに使うことができます。

Tailwind v2 以降は IE 11 では使えないので、ここでは v1.9.6 の使い方を解説します。

インストール

npm などでインストールします。v1 をインストールするので、@1 を付ける必要があります。

$ npm i -D tailwindcss@1

Laravel Mix を使う場合

まず、開発用の CSS ファイルを作成します。ここでは resources/css/app.css とします。

/* resources/css/app.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

次に、webpack.mix.js でこのファイルをコンパイルするよう指示します。Tailwind は PostCSS プラグインなので、.postCss() を使います。

// webpack.mix.js
const mix = require('laravel-mix')
mix
.postCss('resources/css/app.css', 'public/css', [
  require('tailwindcss'),
])
.options({
  processCssUrls: false,
  autoprefixer: {
    grid: 'autoplace', // グリッドレイアウトを使う場合は設定する
  },
})

最後に、Tailwind 自体の設定ファイル（tailwind.config.js）を生成します。

$ npx tailwindcss init

Nuxt.js を使う場合

こちらでは、コンパイルされていないファイルを置いておく assets フォルダが用意されているので、そこに開発用の CSS ファイルを作成します。

内容は Laravel Mix の場合と同じでも問題ありませんが、postcss-import が入っているので、以下のように書くこともできます。

/* assets/css/app.css */
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

次に、Tailwind の設定ファイル（tailwind.config.js）を作成します。

$ npx tailwindcss init

最後に、Nuxt.js の設定ファイル（nuxt.config.js）で CSS ファイルをコンパイルするよう指示します。

// nuxt.config.js
import { join } from 'path'
export default {
  // ...
  css: [
    '~/assets/css/app.css',
  ],
  build: {
    postcss: {
      plugins: {
        tailwindcss: join(__dirname, 'tailwind.config.js'),
      },
    },
  },
  preset: {
    autoprefixer: {
      grid: 'autoplace', // グリッドレイアウトを使う場合は設定する
    },
  },
  // ...
}

Tailwind の設定

Tailwind は v1 をインストールしても、デフォルトでは CSS 変数を使った CSS が書き出されるため、IE 11 で一部のクラスが機能しません。

IE 11 でも使える CSS を書き出すには、Tailwind の設定ファイルで target: 'ie11' を設定します。

// tailwind.config.js
module.exports = {
  // ...
  target: 'ie11',
  // ...
}

ターゲットを ie11 に設定した場合の注意点として、ドキュメントに載っているクラスのいくつかは出力されなくなります。

出力されないクラスには以下のようなものがあります。

Display の flow-root, grid, inline-grid, contents
Position の sticky
Object Fit と Object Position
Overscroll Behavior
Grid 関連と Gap
Place Content, Place Items, Place Self
Font Variant Numeric
Placeholder Opacity
Background Opacity
Gradient Color Stops
Divide Opacity

また、transform 系のクラス（Scale, Rotate, Translate, Skew）は出力されますが、重ねがけはできなくなります。

複雑な transform が必要な場合は、自分でクラスを作る必要があります。

グリッド用のクラスを追加する

IE 11 でも Autoprefixer の変換機能を使えば、制限付きですがグリッドレイアウトを使うことができます。

ターゲットを ie11 に設定した場合は grid, inline-grid クラスが消えてしまうので、自分で追加する必要があります。

/* resources/css/app.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities { /* utilities 層に追加する */
  @responsive { /* sm:grid や md:inline-grid といったレスポンシブ用のクラスも合わせて生成する */
    .grid {
      display: grid;
    }
    .inline-grid {
      display: inline-grid;
    }
  }
}

v2 に寄せる

v1.9.6 には、v2 への移行を円滑にするために、v2 の一部の機能を再現してくれる設定があります。

これらを有効にしておくと、今後の Tailwind に近い状態になるのでおすすめです。

// tailwind.config.js
module.exports = {
  // ...
  future: {
    removeDeprecatedGapUtilities: true, // ぶっちゃけ target: 'ie11' なら関係ない
    purgeLayersByDefault: true, // ユーティリティークラス以外もパージ（後述）の対象にする
    defaultLineHeights: true, // font-size 系のクラス（.text-xs, .text-lg 等）に line-height が設定される
    standardFontWeights: true, // font-weight: 100 が .font-thin、font-weight: 200 が .font-extralight クラスになる
  },
  // ...
}

また、実験用としてですが、以下の機能もあります。

設定したほうが v2 に近くなりますが、いちいち warn が出て鬱陶しいので、自分で設定したほうがいいかも知れません。

// tailwind.config.js
module.exports = {
  // ...
  experimental: {
    additionalBreakpoint: false, // 2xl: ブレイクポイントが増える（1536px 以上）
    extendedFontSizeScale: false, // text-7xl ～ text-9xl クラスが増える
    extendedSpacingScale: true, // width や margin, translate などのクラス群に 0.5 ～ 3.5 が増える
  },
  // ...
}

例えば、extendedSpacingScale を自分で設定する場合は、以下のようになります。負の値については勝手に生成されるので、気にする必要はありません。

// tailwind.config.js
module.exports = {
  // ...
  experimental: {
    extendedSpacingScale: false, // warn が出て鬱陶しいのでオフ
  },
  theme: {
    extend: {
      spacing: {
        '0.5': '.125rem',
        '1.5': '.375rem',
        '2.5': '.625rem',
        '3.5': '.875rem',
      },
    },
  },
  // ...
}

`transition` を付けるだけでトランジションが動くようにする

v2 では transition 系のクラスを付けると、デフォルトで transition-duration: 150ms と transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) が設定されます。

これらは Tailwind の duration-150, ease-in-out クラスにそれぞれあたるので、それらを transition 系のクラスに当てておきます。

開発用の CSS ファイルに Tailwind 用の @ ルールを使って記述します。

/* resources/css/app.css */
/* ... */
@layer components { /* components 層にクラスを増やす（ユーティリティークラスで上書きできる） */
  @responsive {
    .transition,
    .transition-all,
    .transition-colors,
    .transition-opacity,
    .transition-shadow,
    .transition-transform {
      @apply duration-150 ease-in-out;
    }
  }
}

これで、transition 系のクラスを付けるだけでトランジションが設定されます。トランジションの長さやイージングを変えたい場合は、Tailwind のユーティリティクラスを付けることで上書きできます。

<div class="transition">150ms かけて Tailwind の ease-in-out でトランジション</div>
<div class="transition duration-500 ease-out">500ms かけて Tailwind の ease-out でトランジション</div>

パージの設定

Tailwind はユーティリティークラスを大量に生成するため、圧縮をかけたとしても CSS ファイルサイズがかなり大きくなってしまいます。

purge 機能を設定することで、使っているクラスのみが入った CSS ファイルを生成することができます。

// tailwind.config.js
module.exports = {
  // ...
  purge: [
    './public/**/*.html', // public フォルダ内の全ての .html ファイルからクラスを抽出する
  ],
  // ...
}

Nuxt.js の場合は、@nuxtjs/tailwindcss というプラグインのデフォルト設定を拝借します。

// tailwind.config.js
module.exports = {
  // ...
  purge: [
    './components/**/*.{vue,js}',
    './layouts/**/*.vue',
    './pages/**/*.vue',
    './plugins/**/*.{js,ts}',
    './nuxt.config.{js,ts}',
  ],
  // ...
}

また、オブジェクトを渡すことで、PurgeCSS の設定を変更することもできます。purge 直下で使える設定については Tailwind のドキュメントを、options で使える設定については PurgeCSS のドキュメントを参照してください。

// tailwind.config.js
module.exports = {
  // ...
  purge: {
    content: [
      'public/**/*.html',
    ],
    // PurgeCSS に直接渡されるオプション
    options: {
      keyframes: true, // @keyframes もパージする
    },
  },
  // ...
}