16
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Last updated at Posted at 2022-03-28

はじめに

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

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

目次

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 に指定したいサイズでheightwidthに追加します。

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>

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

スクリーンショット 2022-03-28 23.07.39.png
プラグインが適用されて三行目で3点リーダーになっています。

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

フォーム

三点リーダー

リント

最後に

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

16
11
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
16
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?