Tailwind CSS - 強制顏色調整

Tailwind CSS 強制顏色調整是一個實用程式類，用於選擇加入和退出強制顏色。有兩個類，因此分配的內容將是。

Tailwind CSS 強制顏色調整類

以下是提供了一種有效處理元素可訪問性的 **Tailwind CSS 強制顏色調整** 類的列表。

類	CSS 屬性
forced-color-adjust-auto	forced-color-adjust: auto;
forced-color-adjust-none	forced-color-adjust: none;

Tailwind CSS 強制顏色調整類的功能

**forced-color-adjust-auto:** 此類用於選擇一個元素以撤消 forced-color-adjust-none 類的效果。
**forced-color-adjust-none:** 此類用於選擇一個元素退出強制顏色模式強制執行的顏色。

Tailwind CSS 強制顏色調整類示例

以下示例將說明 Tailwind CSS 顏色調整類實用程式。

**注意：**嘗試在您的開發者工具中模擬 `forced-colors: active` 以檢視更改。

退出強制顏色

在此示例中，我們已使用 **`forced-color-adjust-none`** 選擇退出強制顏色模式強制執行的顏色。

示例

<!DOCTYPE html>
<html>

<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-xl mb-3">
        Tailwind CSS Forced Color Adjust Class
    </h2>
    <div class="flex">
        <p class="forced-color-adjust-none 
                  border-black bg-green-500">
            No forced color adjust here
        </p>
        
    </div>

</html>

恢復強制顏色

這裡我們使用了 **`forced-color-adjust-auto`** 來撤消 **`forced-color-adjust-none`**，使元素遵守強制顏色模式強制執行的顏色

示例

<!DOCTYPE html>
<html>

<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-xl mb-3">
        Tailwind CSS Forced Color Adjust Class
    </h2>
    <div class="flex">
        <p class="forced-color-adjust-none 
                  lg:forced-color-adjust-auto 
                  border-black bg-green-500">
            No forced color adjust here, until you 
            hit a large viewport size, and then
            re-implement.
        </p>
        
    </div>

</html>

列印頁面