👼

TailwindCSSのconfigをnpm管理する

2021/03/16に公開

CSS

npm

Tailwind CSS

tech

tailwind.config.js

tailwindを使用したprojectが複数あって、統一したconfigでstylingをしていきたい時、各々へファイルをコピペをしてくのは不便、かつその後徐々に差分が生まれてしまう危険性があります。そこで、一つのレポジトリで管理し、npmでその他のレポジトリへ配信します。

publish

基本的にトランスパイルのいらない形でconfigを書くので、用意しpackage.jsonの以下の部分をよしなにし、npm publishするだけです。

// package.json
{
  "name": "package名",
  "version": "1.0.0",
  "main": "tailwind.config.js",
}

使用する側では、presetに設定するだけです

// tailwind.config.js
presets: [require("package名")],

tailwind-config-viewer

presetの内容として、どのような設定がされているかの参照点として、視覚的に把握できると共有がしやすいのでGitHub Pagesにdeployしておくと便利です。
毎回deployするのも面倒なのでGitHub Actionsでします。

// package.json
  "scripts": {
    "tailwind-config-viewer": "tailwind-config-viewer"
  },
  "devDependencies": {
    "tailwind-config-viewer": "^1.5.0",
  }

// gh-pages.yml
name: github pages

on:
  push:
    branches:
      - master

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: "14"
      - uses: actions/cache@v2
        with:
          path: ~/.cache/yarn
          key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}
      - name: install
        run: yarn --frozen-lockfile
      - name: Build
        run: yarn tailwind-config-viewer export ./output-dir

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./output-dir

tailwind.config.js

publish

tailwind-config-viewer

Discussion