Tailwind CSS - Bonus
Tailwind CSS - Using with Preprocessors
Tailwind CSS - Optimizing for Production

Tailwind CSS - Forced Color Adjust

Quiz

Tailwind CSS Forced Color Adjust is a utility class, and used for opting in and out of forced colors. There are two class so the assgined content will be .

Tailwind CSS Forced Color Adjust Classes

The following is the list of Tailwind CSS Forced Color Adjust Classes that provides an effective way of handling elements accessibility.

Class	CSS Properties
forced-color-adjust-auto	forced-color-adjust: auto;
forced-color-adjust-none	forced-color-adjust: none;

Functionality of Tailwind CSS Forced Color Adjust Classes

forced-color-adjust-auto: This class is used to opt an element to revoke the effect of forced-color-adjust-none class.
forced-color-adjust-none: This class is used to opt an element out the colors enforced by forced colors mode.

Tailwind CSS Forced Color Adjust Class Examples

The following examples will illustrate the Tailwind CSS Color Adjust Class utility.

Note: Try emulating `forced-colors: active` in your developer tools to see the changes.

Opting Out of Forced Colors

In this example we have used `forced-color-adjust-none` to opt an element out the colors enforced by forced colors mode.

Example

<!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>

Restoring Forced Colors

Here we have used `forced-color-adjust-auto` to undo `forced-color-adjust-none`, making an element adhere to colors enforced by forced colors mode

Example

<!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>

Print Page