Zenn
🔲

【Tailwind和訳】BORDERS/Ring Offset Color

2021/10/24に公開
Tailwind CSS
tech

この記事について

この記事は、BORDERS/RIng Offset Colorの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Ring Offset Color

アウトラインリングのオフセットの色を設定するためのユーティリティーです。

クラスとプロパティの対応表
Class Properties
ring-offset-transparent --tw-ring-offset-color: transparent;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-current --tw-ring-offset-color: currentColor;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-black --tw-ring-offset-color: #000;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-white --tw-ring-offset-color: #fff;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-gray-50 --tw-ring-offset-color: #f9fafb;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-gray-100 --tw-ring-offset-color: #f3f4f6;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-gray-200 --tw-ring-offset-color: #e5e7eb;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-gray-300 --tw-ring-offset-color: #d1d5db;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-gray-400 --tw-ring-offset-color: #9ca3af;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-gray-500 --tw-ring-offset-color: #6b7280;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-gray-600 --tw-ring-offset-color: #4b5563;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-gray-700 --tw-ring-offset-color: #374151;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-gray-800 --tw-ring-offset-color: #1f2937;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-gray-900 --tw-ring-offset-color: #111827;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-red-50 --tw-ring-offset-color: #fef2f2;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-red-100 --tw-ring-offset-color: #fee2e2;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-red-200 --tw-ring-offset-color: #fecaca;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-red-300 --tw-ring-offset-color: #fca5a5;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-red-400 --tw-ring-offset-color: #f87171;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-red-500 --tw-ring-offset-color: #ef4444;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-red-600 --tw-ring-offset-color: #dc2626;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-red-700 --tw-ring-offset-color: #b91c1c;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-red-800 --tw-ring-offset-color: #991b1b;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-red-900 --tw-ring-offset-color: #7f1d1d;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-yellow-50 --tw-ring-offset-color: #fffbeb;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-yellow-100 --tw-ring-offset-color: #fef3c7;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-yellow-200 --tw-ring-offset-color: #fde68a;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-yellow-300 --tw-ring-offset-color: #fcd34d;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-yellow-400 --tw-ring-offset-color: #fbbf24;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-yellow-500 --tw-ring-offset-color: #f59e0b;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-yellow-600 --tw-ring-offset-color: #d97706;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-yellow-700 --tw-ring-offset-color: #b45309;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-yellow-800 --tw-ring-offset-color: #92400e;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-yellow-900 --tw-ring-offset-color: #78350f;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-green-50 --tw-ring-offset-color: #ecfdf5;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-green-100 --tw-ring-offset-color: #d1fae5;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-green-200 --tw-ring-offset-color: #a7f3d0;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-green-300 --tw-ring-offset-color: #6ee7b7;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-green-400 --tw-ring-offset-color: #34d399;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-green-500 --tw-ring-offset-color: #10b981;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-green-600 --tw-ring-offset-color: #059669;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-green-700 --tw-ring-offset-color: #047857;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-green-800 --tw-ring-offset-color: #065f46;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-green-900 --tw-ring-offset-color: #064e3b;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-blue-50 --tw-ring-offset-color: #eff6ff;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-blue-100 --tw-ring-offset-color: #dbeafe;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-blue-200 --tw-ring-offset-color: #bfdbfe;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-blue-300 --tw-ring-offset-color: #93c5fd;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-blue-400 --tw-ring-offset-color: #60a5fa;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-blue-500 --tw-ring-offset-color: #3b82f6;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-blue-600 --tw-ring-offset-color: #2563eb;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-blue-700 --tw-ring-offset-color: #1d4ed8;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-blue-800 --tw-ring-offset-color: #1e40af;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-blue-900 --tw-ring-offset-color: #1e3a8a;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-indigo-50 --tw-ring-offset-color: #eef2ff;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-indigo-100 --tw-ring-offset-color: #e0e7ff;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-indigo-200 --tw-ring-offset-color: #c7d2fe;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-indigo-300 --tw-ring-offset-color: #a5b4fc;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-indigo-400 --tw-ring-offset-color: #818cf8;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-indigo-500 --tw-ring-offset-color: #6366f1;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-indigo-600 --tw-ring-offset-color: #4f46e5;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-indigo-700 --tw-ring-offset-color: #4338ca;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-indigo-800 --tw-ring-offset-color: #3730a3;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-indigo-900 --tw-ring-offset-color: #312e81;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-purple-50 --tw-ring-offset-color: #f5f3ff;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-purple-100 --tw-ring-offset-color: #ede9fe;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-purple-200 --tw-ring-offset-color: #ddd6fe;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-purple-300 --tw-ring-offset-color: #c4b5fd;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-purple-400 --tw-ring-offset-color: #a78bfa;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-purple-500 --tw-ring-offset-color: #8b5cf6;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-purple-600 --tw-ring-offset-color: #7c3aed;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-purple-700 --tw-ring-offset-color: #6d28d9;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-purple-800 --tw-ring-offset-color: #5b21b6;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-purple-900 --tw-ring-offset-color: #4c1d95;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-pink-50 --tw-ring-offset-color: #fdf2f8;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-pink-100 --tw-ring-offset-color: #fce7f3;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-pink-200 --tw-ring-offset-color: #fbcfe8;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-pink-300 --tw-ring-offset-color: #f9a8d4;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-pink-400 --tw-ring-offset-color: #f472b6;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-pink-500 --tw-ring-offset-color: #ec4899;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-pink-600 --tw-ring-offset-color: #db2777;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-pink-700 --tw-ring-offset-color: #be185d;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-pink-800 --tw-ring-offset-color: #9d174d;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);
ring-offset-pink-900 --tw-ring-offset-color: #831843;
box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-shadow);

使い方

リングオフセットの色を変更するには、ring-offset-{color}ユーティリティを使用します。本物のボックスシャドウオフセットは CSS では実際には使えないので、通常これはオフセットを親の背景色に合わせるために行われます。

<div class="... bg-purple-100">
  <button class="... ring ring-purple-600 ring-offset-4 ring-offset-purple-100">
    ring-offset-purple-100
  </button>
</div>

レスポンシブ

特定のブレークポイントでリングオフセットカラーを制御するには、既存のリングオフセットカラーユーティリティーに{screen}:というプレフィックスを追加します。例えば、md:ring-offset-blue-500を使用すると、medium スクリーンサイズ以上でのみring-offset-blue-500ユーティリティを適用することができます。

<button class="ring-2 ring-offset-2 ring-offset-blue-300 md:ring-offset-blue-500">
  <!-- ... -->
</button>

Tailwind のレスポンシブデザイン機能の詳細については、レスポンシブデザインのドキュメントをご覧ください。

カスタマイズ

tailwind.config.jsファイルのthemeセクションにあるcolorsキーでカラーパレットをカスタマイズすることで、どのリングオフセットカラーユーティリティが生成されるかをカスタマイズすることができます。

tailwind.config.js
const colors = require('tailwindcss/colors')
module.exports = {
  theme: {
    colors: {
      gray: colors.blueGray,
      indigo: colors.indigo,
      red: colors.rose,
      yellow: colors.yellow,
    }
  }
}

グローバルカラーパレットに影響を与えずに、リングオフセットのカラーユーティリティだけをカスタマイズしたい場合は、代わりに ringOffsetColorキーを使用してください。

tailwind.config.js
const colors = require('tailwindcss/colors')
module.exports = {
  theme: {
    ringOffsetColor: {
      white: colors.white,
      pink: colors.fuchsia,
    }
  }
}

デフォルトのテーマのカスタマイズについては、テーマのカスタマイズに関するドキュメントをご覧ください。

バリアント

デフォルトでは、レスポンシブ、ダークモード（有効な場合）、focus-within、focusの各バリアントのみがリングオフセットカラーユーティリティ用に生成されます。

tailwind.config.jsファイルのvariantsセクションにあるringOffsetColorプロパティを変更することで、リングオフセットカラーユーティリティのために生成されるバリアントをコントロールすることができます。

例えば、この設定では、hoverとactiveのバリアントも生成されます。

tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
+       ringOffsetColor: ['hover', 'active'],
      }
    }
  }

無効化

リングオフセットカラーユーティリティーをプロジェクトで使用しない場合は、設定ファイルのcorePluginsセクションでringOffsetColorプロパティをfalseに設定することで、完全に無効にすることができます。

tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     ringOffsetColor: false,
    }
  }

Discussion

ログインするとコメントできます