Zenn
💊

【TailwindCSS】デザインシステムとtailwind.configを使い効率的に開発を行う

2024/04/28に公開
Figma
Tailwind CSS
デザインパターン
デザインシステム
tech

はじめに

普段はCSSフレームワークはTailwindCSS、デザインツールはFigmaを使って開発を行っています。
TailwindCSSを使って効率的に開発を行うにはtailwind.configファイルを活用することが重要だと思います。

具体的には以下を行い開発効率を向上させています。

  • VSCodeの拡張機能やeslintの導入
  • デザインシステムを作成し、プロジェクト固有のスタイリング設定
  • デザインシステムからtailwind.configファイルを設定

それぞれ紹介していきます。

拡張機能とeslintプラグインの紹介

先に開発に必須な拡張機能の紹介をします。以下はTailwindCSSを使う上で必須だと思っています。未導入の方は是非導入してみてください。

  • VSCodeのTailwind自動補完の拡張機能です。導入することで、tailwind.configに定義したものも補完されるようになります。
  • Tailwindにサポートされていないクラスを使用するとwarningを出してくれたりします。
  • クラスの順序を自動的に並べ替えてくれます。

デザインシステムの作成

次にデザインシステムの作成です。

tailwind.configを運用するにはデザインシステムが不可欠だと思います。

なので、まずは小さくでも良いのでデザインシステムを作成しましょう。

とはいうものの、私はFigmaを扱いデザインを作成することができないので、デザイナーと連携しつつ作成してもらいました。

具体的には以下のような内容をデザイナーと連携し作成しました。

  • どの項目をデザインシステムとして定義してもらうか(カラーやフォントなど)
  • 命名規則など

デザインシステムを作成する際は、エンジニアも介入していくと、開発側の都合も考慮しながら作り上げることができるのでオススメです。

参考程度ですが、以下のようなデザインシステムを運用しています。

デザインシステム作成後は、figmaのライブラリ機能を使ってデザインを作成してもらいます。

実装時にテキストカラーを見たい時に、どのカラーが適応されているかが一目で確認できて便利です。

上記の準備が整ったところで、tailwind.configを設定してきます。

tailwind.configの設定

config内で定義するものの命名についてはデザインシステム側の命名と合わせます。

以下のような汎用性あるものを定義しました。(内容は一部省略してます)

  • フォント
  • テキストサイズ
  • カラー
  • シャドー
  • 角丸
  • zindex

上記の説明は後ほどしていきます。

tailwind.config.js
* 一部実際に運用しているconfigファイルから省略して記載しています。

module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {
      fontFamily: {
        body: ['Noto Sans JP', 'sans-serif'],
      },
      fontSize: {
        'title-20': ['20px', { fontWeight: '700' }],
      },
      colors: {
        transparent: 'transparent',
        current: 'currentColor',
        black: '#000000',
        white: '#ffffff',
        gray: {
          1: '#4a5f62',
          2: '#677d7f',
        },
        red: { 1: '#fc4c4c' },
      },
      boxShadow: {
        sheet: '0px 3px 10px rgba(48, 72, 83, 0.15)',
        overlay: '0px -11px 15px rgba(24, 75, 89, 0.1)',
      },
      borderRadius: {
        card: '8px',
        input: '6px',
      },
      zIndex: {
        menu: 1000,
        sticky: 1010,
        fixed: 1020,
        modalBack: 1030,
        modal: 1040,
        tooltip: 1050,
      },
    },
  },
};

具体例としては以下のテキストを実装する時に、どのようなスタイルかを確認するかと思います。

Figmaのライブラリ機能で設定してもらえれば、一目でデザインシステムで定義したものが確認できるようになっているので、そのままTailwindCSSのクラスとして書きます。
拡張機能で補完もされるのでこれで開発効率が向上します。eslintも導入済みなのでタイポの心配もありません。

最後に、configファイルで設定したものを説明していきます。

fontFamily

まずはfontFamilyです。

fontFamily: {
  body: ['Noto Sans JP', 'sans-serif'],
},

基本は設定したものを以下のようにindex.cssでbodyに指定しているだけで使用機会はそんなにないですが、特殊なフォントを個別で使用したい場合定義すると便利かと思います。

以下のように、index.cssでbodyのスタイルを設定

index.css
<!-- 実際のurlはGoogleFontを参考に設定 -->
@import url('');
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  body {
    @apply font-body font-normal text-gray-1 leading-normal;
  }
}

fontSize

次にfontSizeです。

キー名はfontSize指定ですが、fontWeightなども指定することができます。
テキストは全てパターン化してこちらに定義しておけば、運用がしやすいのでかなりオススメです。

fontSize: {
    'title-20': ['20px', { fontWeight: '700' }],
},

colors

次にカラーです。

カラーはTailwind側でデフォルトでいくつか用意されています。(gray-100など)
それとややこしいので、gray-1のような命名で管理しています

colors: {
    transparent: 'transparent',
    current: 'currentColor',
    black: '#000000',
    white: '#ffffff',
    gray: {
      1: '#4a5f62',
      2: '#677d7f',
    },
    red: { 1: '#fc4c4c' },
},

shadow

次にシャドーです。

シャドーはTailwind側で書くと、シンプルにクラスが長くなります。
なのでconfig側で定義しておくのがオススメです。

  boxShadow: {
    sheet: '0px 3px 10px rgba(48, 72, 83, 0.15)',
    overlay: '0px -11px 15px rgba(24, 75, 89, 0.1)',
  },

あとはクラス名としてそのまま書く場合、空白無しで書く必要があるなどのルールが毎回面倒なのでこちらもconfigに定義することを強くお勧めします。

以下のような空白があるとダメ。

borderRadius

次に角丸です。

こちらはシンプルに定義しておくと便利です。

zIndex

最後にzIndexです。

こちらは定義しておくとかなり便利です。

zIndexを定義せず(ルール化)せずに運用していくと必ずどこかで躓きます。
そしてその修正するのがかなりコストがかかる場合もあります。

必要とするUIコンポーネントのレイアー順を一度整理し、定義することをオススメします。

  zIndex: {
    menu: 1000,
    sticky: 1010,
    fixed: 1020,
    modalBack: 1030,
    modal: 1040,
    tooltip: 1050,
  },

是非こちらは取り入れてみてください。

最後に

tailwind.configを運用していく上で、コーディング規約に「configで定義したものはベタ書きを禁止」を記載してます。(せっかく定義したのに別のものを使われたら意味がないので)
チーム全体でconfigファイルのメリットを共有して運用/開発していけると良いかと思います。

Discussion