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

Tailwind CSS - Interactivity

Quiz

Tailwind CSS Interactivity covers a wide range of predefined classes for adding interactive features to your elements, such as hover effects, focus states, transitions, and more.

Tailwind CSS Interactivity Reference

Below topics cover how to apply various interactive styles to elements, including hover and focus effects, transitions, animations, and more.

Kindly

Topic	Description	Example
Tailwind CSS - Accent Color	Accent color defines the highlight color used for elements like buttons and links	Try It
Tailwind CSS - Appearance	Appearance controls how elements look, including hover, focus, and active states.	Try It
Tailwind CSS - Cursor	Cursor sets the type of cursor displayed over elements, like pointer, text and more.	Try It
Tailwind CSS - Caret Color	Caret color sets the color of the text cursor in input fields.	Try It
Tailwind CSS - Pointer Events	Pointer events control which mouse interactions are enabled or disabled on an element.	Try It
Tailwind CSS - Resize	Resize controls whether and how elements can be resized by the user.	Try It
Tailwind CSS - Scroll Behavior	Scroll behavior controls the smoothness and style of scrolling within an element.	Try It
Tailwind CSS - Scroll Margin	Scroll margin sets the space around an element when scrolling.	Try It
Tailwind CSS - Scroll Padding	Scroll padding sets the space inside an element, creating a buffer for scrolling content.	Try It
Tailwind CSS - Scroll Snap Align	Scroll snap align controls how an element aligns automatically when you scroll.	Try It
Tailwind CSS - Scroll Snap Stop	Scroll snap stop decides if and where an element should stop while scrolling.	Try It
Tailwind CSS - Scroll Snap Type	Scroll snap type defines how scrolling snaps, either to a specific point or to the nearest item.	Try It
Tailwind CSS - Touch Action	Touch action controls how touch interactions are handled, like scrolling, zooming and more.	Try It
Tailwind CSS - User Select	User select controls whether users can select or highlight text in an element.	Try It
Tailwind CSS - Will Change	Will change tells the browser which properties of an element may change to improve performance.	Try It

Example of Tailwind CSS Interactivity

In the following example, we use Tailwind CSS classes to style radio buttons, range inputs, cursor types, and control how elements respond to mouse actions.

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl font-bold mb-4">
        Tailwind CSS Interactivity
    </h2>

    <h3 class="underline font-bold mb-2">
        Accent Color Classes
    </h3>
    <div class="grid grid-cols-2 gap-4 mb-4">
        <div>
            <label>Default Radio Button</label>
            <label class="flex items-center space-x-2">
                <input type="radio" name="option">
                <span>Default</span>
            </label>
        </div>
        <div>
            <label>Accent Radio Button</label>
            <label class="flex items-center space-x-2">
                <input type="radio" name="option" class="accent-green-500">
                <span>Green Accent</span>
            </label>
        </div>
    </div>

    <h3 class="underline font-bold mb-2">
        Appearance Classes on Range Inputs
    </h3>
    <div class="grid grid-cols-2 gap-4 mb-6">
        <div>
            <h4 class="font-bold mb-1">Auto Appearance</h4>
            <input type="range" class="appearance-auto">
        </div>
        <div>
            <h4 class="font-bold mb-1">Custom Appearance</h4>
            <input type="range" class="appearance-none bg-gray-300 accent-teal-500">
        </div>
    </div>

    <h3 class="underline font-bold mb-2">
        Cursor Classes
    </h3>
    <div class="grid grid-cols-5 gap-2 mb-6">
        <div class="p-2 border border-teal-500 cursor-none">
            <p>None</p>
        </div>
        <div class="p-2 border border-pink-400 cursor-pointer">
            <p>Pointer</p>
        </div>
        <div class="p-2 border border-teal-500 cursor-text">
            <p>Text</p>
        </div>
        <div class="p-2 border border-pink-400 cursor-move">
            <p>Move</p>
        </div>
        <div class="p-2 border border-teal-500 cursor-wait">
            <p>Wait</p>
        </div>
    </div>

    <h3 class="underline font-bold mb-2">
        Pointer Events Classes
    </h3>
    <div class="grid grid-cols-2 gap-4">
        <div>
            <h4 class="font-semibold underline">pointer-events-none</h4>
            <p class="bg-teal-100 p-2 pointer-events-none">
                Ignores mouse actions.
            </p>
        </div>
        <div>
            <h4 class="font-semibold underline">pointer-events-auto</h4>
            <p class="bg-teal-100 p-2 pointer-events-auto">
                Responds to mouse actions.
            </p>
        </div>
    </div>
</body>

</html>

Example

In this example, we show Tailwind CSS classes for resizing elements, managing scroll behavior, and controlling text selection. We show how to apply vertical and horizontal resizing, handle scrolling with performance optimizations, and control whether text can be selected or not.

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl font-bold mb-4">
        Tailwind CSS Interactivity Example 
    </h2>
    <h2 class="underline font-bold mb-1">
         Resize Classes
    </h2>
    <div class="grid grid-cols-2 gap-4 mb-6"> 
        <div>
            <h3 class="underline font-semibold">resize-y</h3>
            <textarea class="resize-y w-32 h-16 p-2 border 
                border-gray-300" placeholder="Resize vertically"></textarea>
            <p class="text-sm">Vertical resizing only.</p>
        </div> 
        <div>
            <h3 class="underline font-semibold">resize-x</h3>
            <textarea class="resize-x w-32 h-16 p-2 border 
                border-gray-300" placeholder="Resize horizontally"></textarea>
             <p class="text-sm">Horizontal resizing only.</p>
        </div>
    </div>
    <h3 class="underline font-bold mb-3">
        Will Change Scroll Class
    </h3>
    <div class="grid grid-cols-2 mb-8">
        <div class="will-change-scroll bg-blue-200 p-2 
                    max-h-20 overflow-y-auto">
            Scroll inside to see the scroll effect...
            <br>Learning<br>is a<br>lifelong journey
            <br>that 
            <br>opens doors to new<br>opportunities
            <br>and<br>personal growth.
        </div>
    </div>
     <h2 class="underline font-bold mb-2">
        User Select Classes
    </h2> 
    <div class="grid grid-cols-2 gap-6 mb-4">
        <div>
            <h3 class="underline font-semibold">
              select-none
            </h3>
            <div class="select-none border border-pink-500 bg-pink-200 p-3 mb-4">
                Text cannot be selected.
            </div>
        </div>
        <div>
            <h3 class="underline font-semibold">
              select-all
            </h3>
            <div class="select-all bg-green-200 border border-green-600 p-2 mb-4">
                Selecting any part highlights all text.
            </div>
        </div>
    </div>
</body>

</html>

Print Page