Tailwind CSS - Interactivity


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

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>