Madogiwa Blog

主に技術系の学習メモに使っていきます。

TailwindCSSでデザイントークンのユーティリティクラスのみを含んだcssをビルドする方法MEMO📝

CSS 開発 フロントエンド

TailwindCSSを使うとtailwind.config.jsを使ってデザイントークンに即したユーティリティクラスを生成することができます。

tailwindcss.com

TailwindCSSのようなユーティリティクラスベースでのスタイリングにすることはページ間の一貫性を守りやすいというメリットはありますが、 リセットCSSやデザイントークン以外のユーティリティクラス等まで導入するとなると、影響範囲が大きくなり既存プロジェクトに導入するとなると色々と大変になってしまうこともあるかと思います。

TailwindCSSを導入していなくても、TailwindCSSで生成したデザイントークンを含んだCSSを利用することで一定のメリットを享受できそうに思ったので、TailwindCSSで全てのデザイントークンのユーティリティクラスのみを含んだcssをビルドする方法をメモしておきます📝

TailwindCSSで全てのデザイントークンのユーティリティクラスのみを含んだcssをビルドする方法

サンプルのconfigファイル

以下のようなtailwind.config.jsがあったケースで考えていきます。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    colors: {
      blue: "#1fb6ff",
      red: "#ff4949",
    },
    fontFamily: {
      sans: ["Graphik", "sans-serif"],
      serif: ["Merriweather", "serif"],
    },
    extend: {},
  },
  plugins: [],
};

デザイントークンのユーティリティクラスのみを含んだcssをビルドする

デザイントークンとして定義されたtextColorのスタイルを行うユーティリティクラスを利用したいときには以下のように設定を修正します。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{html,js}'],,
+ safelist: [{ pattern: /./ }], // 利用有無に限らず全て出力する
+ corePlugins: ["textColor"], // textColorのみを出力流う。
  theme: {
    colors: {
      blue: "#1fb6ff",
      red: "#ff4949",
    },
    fontFamily: {
      sans: ["Graphik", "sans-serif"],
      serif: ["Merriweather", "serif"],
    },
    extend: {},
  },
  plugins: [],
};

safelistを全てマッチする正規表現を入れることで全てのユーティリティクラスを出力対象とし、 corePluginsでtextColorを指定することでデザイントークンとして定義されたtextColorのスタイルを行うユーティリティクラスのみを出力するようにしています。

※ corePluginsで指定できる値は以下に記載されています。

Here’s a list of every core plugin for reference: https://tailwindcss.com/docs/configuration#core-plugins

以下のようなコマンドでビルドすると、

$ npx tailwindcss -i ./tailwind.css -o ./main.css

以下のようなtextColor系のユーティリティクラスに対するCSSだけが生成されます。

.text-blue {
  color: #1fb6ff
}

.text-blue\/0 {
  color: rgb(31 182 255 / 0)
}

.text-blue\/10 {
  color: rgb(31 182 255 / 0.1)
}

.text-blue\/100 {
  color: rgb(31 182 255 / 1)
}

.text-blue\/15 {
  color: rgb(31 182 255 / 0.15)
}

.text-blue\/20 {
  color: rgb(31 182 255 / 0.2)
}

.text-blue\/25 {
  color: rgb(31 182 255 / 0.25)
}

.text-blue\/30 {
  color: rgb(31 182 255 / 0.3)
}

.text-blue\/35 {
  color: rgb(31 182 255 / 0.35)
}

.text-blue\/40 {
  color: rgb(31 182 255 / 0.4)
}

.text-blue\/45 {
  color: rgb(31 182 255 / 0.45)
}

.text-blue\/5 {
  color: rgb(31 182 255 / 0.05)
}

.text-blue\/50 {
  color: rgb(31 182 255 / 0.5)
}

.text-blue\/55 {
  color: rgb(31 182 255 / 0.55)
}

.text-blue\/60 {
  color: rgb(31 182 255 / 0.6)
}

.text-blue\/65 {
  color: rgb(31 182 255 / 0.65)
}

.text-blue\/70 {
  color: rgb(31 182 255 / 0.7)
}

.text-blue\/75 {
  color: rgb(31 182 255 / 0.75)
}

.text-blue\/80 {
  color: rgb(31 182 255 / 0.8)
}

.text-blue\/85 {
  color: rgb(31 182 255 / 0.85)
}

.text-blue\/90 {
  color: rgb(31 182 255 / 0.9)
}

.text-blue\/95 {
  color: rgb(31 182 255 / 0.95)
}

.text-red {
  color: #ff4949
}

.text-red\/0 {
  color: rgb(255 73 73 / 0)
}

.text-red\/10 {
  color: rgb(255 73 73 / 0.1)
}

.text-red\/100 {
  color: rgb(255 73 73 / 1)
}

.text-red\/15 {
  color: rgb(255 73 73 / 0.15)
}

.text-red\/20 {
  color: rgb(255 73 73 / 0.2)
}

.text-red\/25 {
  color: rgb(255 73 73 / 0.25)
}

.text-red\/30 {
  color: rgb(255 73 73 / 0.3)
}

.text-red\/35 {
  color: rgb(255 73 73 / 0.35)
}

.text-red\/40 {
  color: rgb(255 73 73 / 0.4)
}

.text-red\/45 {
  color: rgb(255 73 73 / 0.45)
}

.text-red\/5 {
  color: rgb(255 73 73 / 0.05)
}

.text-red\/50 {
  color: rgb(255 73 73 / 0.5)
}

.text-red\/55 {
  color: rgb(255 73 73 / 0.55)
}

.text-red\/60 {
  color: rgb(255 73 73 / 0.6)
}

.text-red\/65 {
  color: rgb(255 73 73 / 0.65)
}

.text-red\/70 {
  color: rgb(255 73 73 / 0.7)
}

.text-red\/75 {
  color: rgb(255 73 73 / 0.75)
}

.text-red\/80 {
  color: rgb(255 73 73 / 0.8)
}

.text-red\/85 {
  color: rgb(255 73 73 / 0.85)
}

.text-red\/90 {
  color: rgb(255 73 73 / 0.9)
}

.text-red\/95 {
  color: rgb(255 73 73 / 0.95)
}

デザイントークンのユーティリティクラスのみを含んだcssをビルド設定を別ファイルに書く

以下のようにしてデザイントークンのユーティリティクラスのみを含んだcssをビルド設定を分けることもできます。

const defaultConfig = require("./tailwind.config.js");

/** @type {import('tailwindcss').Config} */
module.exports = {
  ...defaultConfig,
  safelist: [{ pattern: /./ }],
  corePlugins: ["textColor", "fontFamily"],
};

その場合のビルドコマンドは以下です。

$ npx tailwindcss -i ./tailwind.css -o ./main.css -c ./tailwind.build.config.js

参考

github.com

tailwindcss.com