Tailwind CSS のカスタマイズのオススメ

10971 ワード
CSS tailwindcss CSS テキストリンク

はじめに

こんにちは、スタートアップでフロントエンドエンジニアをしているひろです。

今回はフロントエンドの開発でよく使われている　Tailwind CSS について自分がよくするカスタマイズをまとめてみました。
なにかの参考にして頂けたら幸いです。
（久しぶりの投稿なので優しい目で見てもらえたら幸いです〜！！）

目次

1.カラーパレットの追加
2.コンテンツの高さ、幅の指定したい時
3.クラスのまとめ、設定
4.プラグインの設定と個人的によく使うもの

1. カラーパレットの追加

プロジェクトによってスタイルガイドやデザインなどにあるベースカラーとなるものを指定する時は、
下記のようにtailwind.config.js に追加したいカラーコードなどを追加します。

tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        navy: {
          50: '#EFF6FF',
          100: '#D5DFF0',
          200: '#B4C8EA',
        },
        yellow: '#EAAC2F',
      }
    },
  }
}

追加したカラーコードは下記のように背景色、テキストカラーなどを指定するときに使用できます。

html
<div class="bg-navy-100">
  <p class="text-yellow">yellow text</p>
</div>

2. コンテンツの高さ、幅の指定したい時

ヘッダーやナビゲーションを固定値にして表示させたいときなどに使用します
こちらもtailwind.config.js に指定したいサイズでheightやwidthに追加します。

tailwind.config.js
module.exports = {
  theme: {
    extend: {
      height: {
        'header': '4rem'
        'main': 'calc(100vh - 4rem)'
      },
      width: {
        'side': '8rem'
        'main': 'calc(100vw - 8rem)'
      }
    },
  }
}
html
   <div class="h-header"></div>
   <div class="h-main">
     <div class="w-side"></div>
     <div class="w-main"></div>
   </div>

3. クラスのまとめ、設定

よく使うボタンや外部ライブラリーで追加したものにスタイルを追加したい時などに使用します。（下記はreact-mentionsをカスタムした際の一部です。）
@applyでtailwindのクラスをまとめて使うことができます。

button.css
@layer base {
  .btn-default {
    @apply inline-flex items-center px-4 py-2 text-base font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50;
  }
  .btn-primary {
    @apply inline-flex items-center px-4 py-2 text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700;
  }
}
mention.css
@layer base {
  .mentions {
    @apply my-1 mx-0;
  }

  .mentions__mention {
    @apply text-sm text-navy-800 bg-navy-800 underline rounded border-2 border-navy-800;
  }

}
html
   <button class="btn-default">btn-default</button>
   <button class="btn-primary">btn-primary</button>

4. プラグインの設定と個人的によく使うもの

プラグインの設定では下記のようにpluginsに設定します。

tailwind.config.js
module.exports = {
  plugins: [
    require('@tailwindcss/line-clamp'),
  ],
}
html
<p className="line-clamp-3 w-20 texy-base">
  1行目 テキストテキストテキスト
  2行目 テキストテキストテキスト
  3行目 テキストテキストテキスト
  4行目 テキストテキストテキスト
</p>

実際の表示のキャプチャー


プラグインが適用されて三行目で3点リーダーになっています。

個人的によく使うプラグイン

フォーム

三点リーダー

リント

最後に

以上です。最後まで読んでいただきありがとうございます。
不明点や間違っている点があればコメントでおしらせください。