Tailwind CSS 邊框顏色

邊框顏色

用于控制元素邊框顏色的功能類(lèi)。

使用

使用 ?border-{color}? 功能類(lèi)控制元素的邊框顏色。

<input class="border-2 border-red-500 ...">

改變不透明度值

使用 ?border-opacity-{amount}? 功能類(lèi)控制元素邊框顏色的不透明度值。

<div class="border-4 border-light-blue-500 border-opacity-100 ..."></div>
<div class="border-4 border-light-blue-500 border-opacity-75 ..."></div>
<div class="border-4 border-light-blue-500 border-opacity-50 ..."></div>
<div class="border-4 border-light-blue-500 border-opacity-25 ..."></div>
<div class="border-4 border-light-blue-500 border-opacity-0 ..."></div>

響應(yīng)式

要在特定的斷點(diǎn)處控制元素的邊框顏色，請(qǐng)?jiān)谌魏维F(xiàn)有的邊框顏色功能類(lèi)中添加 ?{screen}:? 前綴。例如，使用 ?md:border-green-500? 來(lái)應(yīng)用 ?border-green-500? 功能類(lèi)在中等尺寸以上的屏幕上。

<button class="border-blue-500 md:border-green-500 ...">
  Button
</button>

關(guān)于 Tailwind 的響應(yīng)式設(shè)計(jì)功能的更多信息，請(qǐng)查看響應(yīng)式設(shè)計(jì)文檔。

懸停

要在懸停時(shí)控制元素的邊框顏色，請(qǐng)?jiān)谌魏维F(xiàn)有的邊框顏色功能類(lèi)中添加 ?hover:? 前綴。例如，使用 ?hover:border-blue-500? 在懸停時(shí)應(yīng)用 ?border-blue-500? 功能類(lèi)。

<button class="border-2 border-purple-500 hover:border-gray-500 ...">
  Button
</button>

懸停功能類(lèi)也可以通過(guò)在 hover: 前綴前添加響應(yīng)的 {screen}: 前綴來(lái)與響應(yīng)的功能類(lèi)相結(jié)合使用。

<button class="... md:border-blue-500 md:hover:border-blue-700 ...">Button</button>

焦點(diǎn)

要控制焦點(diǎn)元素的邊框顏色，請(qǐng)?jiān)谌魏维F(xiàn)有的邊框顏色功能類(lèi)中添加 ?focus:? 前綴。例如，使用 ?focus:border-blue-500? 在焦點(diǎn)上應(yīng)用 ?border-blue-500? 功能類(lèi)。

<input class="border border-red-500 focus:border-blue-500 ...">

通過(guò)在 ?focus:? 前綴之前添加響應(yīng)的 ?{screen}:? 前綴，焦點(diǎn)功能類(lèi)也可以與響應(yīng)的功能類(lèi)相結(jié)合使用。

<input class="... md:border-gray-200 md:focus:border-white ...">

自定義

邊框顏色

默認(rèn)情況下，Tailwind 將整個(gè)默認(rèn)調(diào)色板用作邊框顏色。

您可以通過(guò)編輯 ?tailwind.config.js? 文件中的 ?theme.colors? 部分來(lái)定制您的調(diào)色板，或者使用 ?theme.borderColor? 部分來(lái)定制您的邊框顏色。

  // tailwind.config.js
  module.exports = {
    theme: {
      borderColor: theme => ({
       ...theme('colors'),
        DEFAULT: theme('colors.gray.300', 'currentColor'),
       'primary': '#3490dc',
       'secondary': '#ffed4a',
       'danger': '#e3342f',
      })
    }
  }

變體

默認(rèn)情況下， 針對(duì) border color 功能類(lèi)，只生成 responsive, dark mode (如果啟用), group-hover, focus-within, hover and focus 變體。

您可以通過(guò)修改您的 ?tailwind.config.js? 文件中的 ?variants ?部分中的 ?borderColor ?屬性來(lái)控制為 border color 功能生成哪些變體。

例如，這個(gè)配置也將生成 active 變體:

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

禁用

如果您不打算在您的項(xiàng)目中使用 border color 功能，您可以通過(guò)在配置文件的 ?corePlugins ?部分將 ?borderColor ?屬性設(shè)置為 ?false ?來(lái)完全禁用它們：

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