storybookでtailwindUI風にテンプレ管理

はじめに

チームで開発をしている中で、プロジェクトを跨いでテンプレ的に使うページ要素がでてくるも、実装者によってアウトプットの品質にブレが起きてしまうことがあります。
tailwindでデザイントークンの管理をしてtokenレベルでの制約をかけたとしても、それを組み合わせたmolecules, organismsになるとブレも大きくなってきます。
そこで、見た目とコードを横に並べてテンプレ管理することで、これを少しでも減らせないでしょうか

tailwindUI

tailwindの開発チームで開発中の有料(一部無料)のテンプレート集です。
https://tailwindui.com/components

以下のようにPreviewとCodeを切り替えて、どのようなCSSが当たっているのかを確認でき、見た目から必要なものを選んでコードをコピペで使用することができます。

Storybook

ただし、管理のためにtailwindUIのようなおしゃれなwebサイトを作成するのはコストも高く現実的ではありません。そこで、storybookにpluginを入れてそれ風に作りましょう。

1. storybookの設定

npx sb init
yarn add -D @storybook/addon-storysource

@storybook/addon-storysourceを導入して、ソースコードの見える化をします。

.storybook/main.js

  module.exports = {
    "stories": [
      "../stories/**/*.stories.mdx",
      "../stories/**/*.stories.@(js|jsx|ts|tsx)"
    ],
    "addons": [
      "@storybook/addon-storysource",
      "@storybook/addon-essentials"
    ]
  }

tailwindを反映するようにstyles/globals.css をimportします。

./storybook/preview.js

   import "../styles/globals.css"

2. tailwindの設定

yarn add -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

tailwind.config.jsを生成します

npx tailwindcss init --full

cssの設定

./styles/globals.css

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

結果

ソースコードはこちら

終わりに

共通のコンポーネントやUIを作成しても、人に使い方がうまく伝わらずに間違った使い方をされてしまったりするケースが多々あります。
実現したいUIとそのコードを同一のViewでとてもわかりやすく確認できます。Figmaや、snapshotとコードのコピペをしたドキュメントを作成するなどより、少なくとも実装者視点では間違いが減ると思います。