最近よく見かけるCSSのフレームワークであるTaliwindCSSはスタイルのプロパティや値をclass名で指定するという、一見変わった手法をとるのですが、Reactでコンポーネントベースで開発をする際にはとても便利だったりします。そこで今回はwebpack＋Reactの環境でTailwindCSSを導入する流れをまとめてみたいと思います。TailwindCSSの使い方などについてはまた別記事にてまとめてみたいと思います。   webpack＋Reactの環境構築については過去記事「webpack ＋ TypeScript／Babel（JavaScript）の環境でReactを導入する」で詳しくまとめておりますのでご参考に。   まずは、TaliwindCSSのパッケージ本体をインストールしていきます。npmでインストールする以外にもCDNで利用できるようです、ただしCDNの場合には使用されていないスタイルも全て読み込むことになるので、あまりお勧めされないようですね。ビルドのプロセスを経ることでHTML側で使用しているclassに対応しているスタイルのみインクルードできます。

$ npm install -D tailwindcss

  このようにパッケージがインストールできました、これで準備が完了ですが、カスタマイズ用の設定ファイルも用意しておきます。 【package.json】※一部抜粋

{
  .....
  "devDependencies": {
    .....
    "tailwindcss": "^3.1.6",
    .....
  },
  .....
}

  下記のコマンドを実行することで、TaliwindCSSの設定ファイルを作成できます。

$ npx tailwindcss init

  設定ファイルには拡張機能としていろんな設定が追加できますが、とりあえずは用途に応じてで良いでしょう。ただ「content」のオプションだけは設定しておきたいですね。このオプションに指定したファイルを対象とした使用されているclassのみにビルド内容を限定することができます。そうすることでファイルサイズを最適化しておきましょう。 【tailwind.config.js】

module.exports = {
  content: [
    './src/es/**/*.{js,jsx}',
    './src/ts/**/*.{ts,tsx}',
    './src/pug/**/*.pug'
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

  続いてwebpackの設定になります。TailwindCSSを使うにあたっては「PostCSS」のローダーが必要となりますので、あらかじめ用意しておきます。（参考記事：webpackでPostCSSを使ったベンダープレフィックスの追加やCSSのminifyを行う）TailwindCSSのライブラリ本体を読み込み、PostCSSのローダーのオプションにプラグインとして指定します。 【webpack.config.js】※一部抜粋

const TailwindCSS = require('tailwindcss');
......
module.exports {
  ......
  module: {
    rules: [
      ......
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader
          },
          {
            loader: 'css-loader',
            options: {
              url: false,
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  TailwindCSS
                ]
              }
            }
          }
        ]
      },
      {
        test: /\.(sass|scss)$/,
        use: [
          styleLoader,
          {
            loader: 'css-loader',
            options: {
              url: false,
              sourceMap: true,
              importLoaders: 2
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  TailwindCSS,
                  [ 'autoprefixer', { grid: true } ],
                  [ 'cssnano', { preset: 'default' } ]
                ]
              },
            }
          },
          {
            loader: 'sass-loader',
            options: { sourceMap: true }
          }
        ]
      },
      ......
    ]
  },
  ......
}

  TailwindCSSを使う際には基本的にSassなどのプリプロフェッサーは使わないことを推奨されているようですが、もし使う場合にはSassのローダー側でも同じようにプラグインのオプションを指定しておきましょう。   webpackの設定が終われば実際にCSS側でTailwindCSSをインポートしていきます。「@tailwind」の記述に続けて各種読み込むコードを指定します。 【main.css】

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

  【main.sass】

@tailwind base
@tailwind components
@tailwind utilities

  ただし、SCSS記法のファイルではこのルールがエラーとなるようです。

Unexpected unknown at-rule "@tailwind"

  ですので、下記のように「@use」を使ってパスを指定して読み込む形になります。 【main.scss】

@use "tailwindcss/base"; //@tailwind base;
@use "tailwindcss/components"; //@tailwind components;
@use "tailwindcss/utilities"; //@tailwind utilities;

  あとは実際にHTMLやJSX内のテンプレートで要素に対してスタイルに対応したclass名を付けていきます。TailwindCSSのclass名はたくさんあるので公式のリファレンスhttps://tailwindcss.com/docs/reusing-stylesなどを参考にしましょう。 【example.tsx】

import React from 'react';
export const ExampleComponent: React.VFC = () => { 
  return (
    <>
      <h1 className='text-red-700 text-4xl'>Title text</h1>
    </>
  );
}

  これでビルドをすると実際にTailwindCSSのスタイルが適用されCSSが出力されていることが確認できますね。先述の通り設定ファイル内のcontentオプションに指定したファイル内で使用しているclassに限定されているのが確認できますね。 【main.css】

/*! tailwindcss v3.1.6 | MIT License | https://tailwindcss.com*/
*,:after,:before {
  border: 0 solid #e5e7eb;
  -webkit-box-sizing: border-box;
  box-sizing: border-box
}
......
.block {
  display: block
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem
}
.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem
}
.text-red-700 {
  --tw-text-opacity: 1;
  color: rgb(185 28 28/var(--tw-text-opacity))
}

 

---

  過去にはBootstrapなどのCSSフレームワークを使用したこともありますが、TailwindCSSはまた違った設計で開発されたフレームワークのような印象を受けます。慣れるまでは少し違和感があるものの、ユーティリティクラスの延長でclassで直感的にスタイルを記述していくのはとても便利ですね。TailwindCSSにはいろんな機能も用意されているようですので、また改めて記事にまとめてみたいと思います。   （参考にさせていただいたサイト） TailwindCSS 公式サイト（日本語版）