Tailwind CSSの使用メモ

2023.3.7

テーマの設定

Reactなどで使う場合でメモしています。静的な構成でもclassNameの属性名を変えるくらいで同じ使用感です。

テーマを拡張する

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      screens: {
        // ブレイクポイントを追加する
        'tablet': '600px',
      },
      colors: {
        // カラーを追加する
        primary: '#000000', // text-primaryなどとして呼び出せる
        sub: {
          DEFAULT: '#666666', // text-sub
          light: '#999999', // text-sub-light
          dark: '#333333' // text-sub-dark
        }
      }
    }
  }
}

デフォルトテーマを変更する

tailwind.config.js

module.exports = {
  theme: {
    screens: {
      // ブレイクポイントを変更する
      // 上書きになるので以下の場合、screensはsmのみになる
      'sm': '600px',
    }
  }
}

使用法メモ

擬似要素、隣接セレクタ

<ul className='[&_li:last-of-type]:text-blue-500 [&_li+li]:mt-2'>
  <li>a</li>
  <li>a</li>
  <li>a</li>
</ul>

アニメーションの作成

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      // 独自のアニメーションを追加する
      animation: {
        'slow-fade': 'slow-fade 2s';
      },
      // アニメーションに使うkeyframesを追加する
      keyframes: {
        'slow-fade': {
          '0%': {
            opacity: 0
          },
          to: {
            opacity: 1
          }
        }
      }
    }
  }
}

設置例

<div className='animate-slow-fade'>hoge</div>

注意して利用する

下記の使用は自由度が高くなり便利ですが、多用するとデメリットもあります。

変更しにくくなり、DRYに保てなくなる
チームで認識を合わせないと不要な設定が増える

デザインフレームワークを入れる場合、ルールに沿って処理したいことが多いので基本的には多用しない方がベターです。独自ルールを追加していく対応でまずは検討します。

独自クラスの作成

global.css

@layer components {
  .title {
    @apply font-bold text-2xl;
  }
  .btn {
    @apply p-2 border border-gray-400 bg-gray-100;
  }
}

設置例

<h2 className='title'></h2>
<button className='btn'>ボタン</button>

直接単位を指定する

<p className='text-[15px] sm:text-[21px] md:text-[25px]'>ピクセル決め打ちのタグ</p>

Tailwind CSSの導入について

Tailwind CSSの導入と設定