色を分ける

Tailwind CSS version
v1.3.0+

要素間の境界線の色を制御するためのユーティリティ。

Class reference

Class
Preview 
.divide-transparent > * + *
.divide-current > * + *
.divide-black > * + *
.divide-white > * + *
.divide-gray-100 > * + *
.divide-gray-200 > * + *
.divide-gray-300 > * + *
.divide-gray-400 > * + *
.divide-gray-500 > * + *
.divide-gray-600 > * + *
.divide-gray-700 > * + *
.divide-gray-800 > * + *
.divide-gray-900 > * + *
.divide-red-100 > * + *
.divide-red-200 > * + *
.divide-red-300 > * + *
.divide-red-400 > * + *
.divide-red-500 > * + *
.divide-red-600 > * + *
.divide-red-700 > * + *
.divide-red-800 > * + *
.divide-red-900 > * + *
.divide-orange-100 > * + *
.divide-orange-200 > * + *
.divide-orange-300 > * + *
.divide-orange-400 > * + *
.divide-orange-500 > * + *
.divide-orange-600 > * + *
.divide-orange-700 > * + *
.divide-orange-800 > * + *
.divide-orange-900 > * + *
.divide-yellow-100 > * + *
.divide-yellow-200 > * + *
.divide-yellow-300 > * + *
.divide-yellow-400 > * + *
.divide-yellow-500 > * + *
.divide-yellow-600 > * + *
.divide-yellow-700 > * + *
.divide-yellow-800 > * + *
.divide-yellow-900 > * + *
.divide-green-100 > * + *
.divide-green-200 > * + *
.divide-green-300 > * + *
.divide-green-400 > * + *
.divide-green-500 > * + *
.divide-green-600 > * + *
.divide-green-700 > * + *
.divide-green-800 > * + *
.divide-green-900 > * + *
.divide-teal-100 > * + *
.divide-teal-200 > * + *
.divide-teal-300 > * + *
.divide-teal-400 > * + *
.divide-teal-500 > * + *
.divide-teal-600 > * + *
.divide-teal-700 > * + *
.divide-teal-800 > * + *
.divide-teal-900 > * + *
.divide-blue-100 > * + *
.divide-blue-200 > * + *
.divide-blue-300 > * + *
.divide-blue-400 > * + *
.divide-blue-500 > * + *
.divide-blue-600 > * + *
.divide-blue-700 > * + *
.divide-blue-800 > * + *
.divide-blue-900 > * + *
.divide-indigo-100 > * + *
.divide-indigo-200 > * + *
.divide-indigo-300 > * + *
.divide-indigo-400 > * + *
.divide-indigo-500 > * + *
.divide-indigo-600 > * + *
.divide-indigo-700 > * + *
.divide-indigo-800 > * + *
.divide-indigo-900 > * + *
.divide-purple-100 > * + *
.divide-purple-200 > * + *
.divide-purple-300 > * + *
.divide-purple-400 > * + *
.divide-purple-500 > * + *
.divide-purple-600 > * + *
.divide-purple-700 > * + *
.divide-purple-800 > * + *
.divide-purple-900 > * + *
.divide-pink-100 > * + *
.divide-pink-200 > * + *
.divide-pink-300 > * + *
.divide-pink-400 > * + *
.divide-pink-500 > * + *
.divide-pink-600 > * + *
.divide-pink-700 > * + *
.divide-pink-800 > * + *
.divide-pink-900 > * + *

使用方法

divide-{color}ユーティリティを使用して、要素間の境界線の色を制御します。

1
2
3
<div class="divide-y divide-blue-300">
  <div class="text-center py-2">1</div>
  <div class="text-center py-2">2</div>
  <div class="text-center py-2">3</div>
</div>

不透明度の変更v1.4.0+

.divide-opacity-{amount}ユーティリティを使用して、要素間の境界線の不透明度を制御します。

1
2
3
<div class="divide-y-4 divide-black divide-opacity-25">
  <div class="text-center py-2">1</div>
  <div class="text-center py-2">2</div>
  <div class="text-center py-2">3</div>
</div>

詳細はdivide opacity documentationをご覧ください。


Responsive

特定のブレークポイントで要素間の境界を制御するには、既存の除算ユーティリティに{screen}:プレフィックスを追加します。 たとえば、クラスmd:divide-x-8を要素に追加すると、中程度の画面サイズ以上でdivide-x-8ユーティリティが適用されます。

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

<div class="divide-teal-400 sm:divide-pink-400 md:divide-orange-400 lg:divide-green-400 xl:divide-red-400 divide-y">
  <div class="text-center py-2">1</div>
  <div class="text-center py-2">2</div>
  <div class="text-center py-2">3</div>
</div>
1
2
3

Customizing

Border Colors

デフォルトでは、Tailwindはdefault color palette全体を分割色として使用できるようにします。

tailwind.config.jsファイルのtheme.colorsセクションを編集し、境界線だけをカスタマイズし、theme.borderColorを使用して色を分割することで、customize your color paletteできます。または theme.divideColorセクションを使用して分割色のみをカスタマイズします。

  // tailwind.config.js
  module.exports = {
    theme: {
      divideColor: theme => ({
-       ...theme('borderColors'),
+       'primary': '#3490dc',
+       'secondary': '#ffed4a',
+       'danger': '#e3342f',
      })
    }
  }

レスポンシブと疑似バリアントクラス

デフォルトでonly responsive バリアントはdivide color utilitiesのために作られます。

あなたはどのバリアントがdivide color utilitiesのために作られるかを tailwind.config.jsファイル内のvariantsセクションのdivideColorプロパティを修正することによってコントロールできます。

例として、この設定は also hover and focus バリアントを作ります。

  // tailwind.config.js
  module.exports = {
    variants: {
      // ...
-     divideColor: ['responsive'],
+     divideColor: ['responsive', 'hover', 'focus'],
    }
  }

無効にする

もしdivide color utilitiesを使う予定がないなら、configファイルのcorePluginsセクションのdivideColor propertyfalseに設定することで完全に無効にすることができます。

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

Translated by T.Arai @ Entap,Inc. / スマホアプリ開発会社

Tailwind UI is now in early access!