TailwindCSS設定ファイルの共有手法

2021-09-29 　日報。

tailwind.config.js の共有方法

TailwindCSS はデザイントークンを規定することでデザインシステム構築を現実的なものにしてくれる。tailwind.config.js を共有するだけで、どのプロジェクトでも同じトークンを用いて UI を再現できる。

プロジェクト初期段階ではコピペによる共有を行なっていたが、参加プロダクトが増えたりアップデートが活発になってくるとちゃんとしたバージョニングによる管理がされていてほしくなる。ということで tailwind.config.js を export しただけのライブラリを作った。

index.js

module.exports = require('./tailwind.config');

GitHub Packages を用いて Organization に所属する人しかインストールできなくしている（仕事用なのでそれはそう）。publish の方法は別途会社ブログとかに書くかもしれない。

tailwind.config.js を利用側の tailwind.config.js 内で読み込み、設定をマージするとちゃんと反映される。また VSCode 拡張などの Intelisense もちゃんと効く。これは TailwindCSS が require で依存しているモジュールを再帰的に探索する detective というライブラリを用いているからと思われる。

https://github.com/browserify/detective

バンドルを作らずそのままパッケージにしていて、config 内で defaultTheme に依存していても利用側はどうせ TailwindCSS 本体を持っているので問題ない。バンドルするにしても external 行きではある。

せっかくなので package.json の一部も載せておく。TailwindCSS のバージョンは一応利用側で想定される最も低いバージョンに合わせておくとよさそう。2.0.0 を指定しておけば間違いはない。

{
  "name": "xxx",
  "repository": "xxx",
  "version": "0.0.0",
  "license": "UNLICENSED",
  "publishConfig": {
    "access": "restricted",
    "registry": "https://npm.pkg.github.com/"
  },
  "files": ["tailwind.config.js"],
  "main": "index.js",
  "peerDependencies": {
    "tailwindcss": "^2.0.0"
  },
  "devDependencies": {
    "tailwindcss": "2.0.0"
  }
}