()

Blog


  • BlogsCSS
  • Tailwindcss Properties Part-6 – Transforms, Interactivity, Accessibility

Tailwindcss Properties Part-6 – Transforms, Interactivity, Accessibility

By Aspire Softserv 22 Oct 2021

TailwindCSS-Properties-Part-6-–-TRANSFORMS,-INTERACTIVITY,-ACCESSIBILITY.webp

Hello Leaders, Welcome to Aspire SoftServ Pvt. Ltd. This is the last part of the Tailwind CSS series. In this article, we’ll look into spacing, sizing, and typography in detail with examples.

Introduction 

In this article, we will look into spacing, sizing and typography in tailwind CSS in detail, with examples.

Let’s start with the prerequisites.

Prerequisites

If you are a beginner in Tailwind CSS, please follow our ‘Aspire Tailwind CSS’ series as below:

The Complete Guide of TailwindCSS [ COMPLETE SERIES ]

What is Tailwind CSS 

TailwindCSS is a utility-first CSS framework that makes it easy to implement popular design patterns. It is also the only framework that follows the Utility-First CSS methodology, which means your code can be more organized, reusable and extensible. 

TRANSFORMS 

Transforms in Tailwind CSS is a front-end utility for animations and effects. It applies and transforms web elements like div, images.

Transform

To create an animation or have any kind of effect, a property called “Transform” is critical. It can be used on things like divs and images to specify the origin of the transformation. This property is a Utility in Tailwind CSS

Tailwind CSS Transform

Code:

<img class="transform rotate- 45 ...">
    <img class="transform skew-y-12 ...">
    <img class="transform scale-50 ...">
    <img class="transform translate-x-4 translate-y-4 ...">

Example:

Tailwind CSS Transform Example

Transform Origin

Transform Origin is a utility for specifying the origin of an element’s transformations.

Tailwind CSS Transform Origin

Use:

Specify an element’s transform-origin using the origin-{keyword} utilities.

Code

<img class="origin-center transform rotate-45 ...">
    <img class="origin-top-left transform rotate-45 ...">
    <img class="origin-bottom-right transform rotate-45 ...">
    <img class="origin-left transform rotate-45 ...">

Example:

Tailwind CSS Transform Origin Example

Scale

Scale is a utility in tailwind CSS for scaling elements with transform.

Tailwind CSS Scale

Snippet:

<img class="transform scale-75 ...">
    <img class="transform scale-100 ...">
    <img class="transform scale-125 ...">
    <img class="transform scale-150 ...">

Code:

<div class="container flex flex-row my-20 space-x-12">
     <div class="flex flex-col justify-around space-y-12 md:flex-row md:space-y-0 md:space-x-12">
       <div class="w-16 h-16 bg-blue-900 bg-stripes bg-stripes-white">
         <img class="h-16 w-16 scale-75 transform"                  src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80">
        </div>
        <div class="w-16 h-16 bg-blue-900 bg-stripes bg-stripes-white">
          <img class="h-16 w-16 scale-100 transform"      src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80">
         </div>
         <div class="w-16 h-16 bg-blue-900 bg-stripes bg-stripes-white">
           <img class="h-16 w-16 scale-125 transform" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80">
          </div>
         <div class="w-16 h-16 bg-blue-900 bg-stripes bg-stripes-white">
           <img class="h-16 w-16 scale-150 transform"                    src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80">
         </div>
      </div>
    </div>

Example:

Tailwind CSS Scale Example

Rotate

Utilities for rotating elements with transform.

Tailwind CSS Rotate

Snippet:

<img class="transform rotate-0 ...">
    <img class="transform rotate-45 ...">
    <img class="transform rotate-90 ...">
    <img class="transform rotate-180 ...">

Example:

<div class="container flex flex-row my-20 space-x-12">
           <div class="flex flex-col justify-around space-y-12 md:flex-row md:space-y-0 md:space-x-12">
               <div class="w-16 h-16 bg-blue-900 bg-stripes bg-stripes-red">
                       <img class="h-16 w-16 transform rotate-0"
    src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80">
               </div>
               <div class="w-16 h-16 bg-blue-900 bg-stripes bg-stripes-red">
    <div class="container flex flex-row my-20 space-x-12">
           <div class="flex flex-col justify-around space-y-12 md:flex-row md:space-y-0 md:space-x-12">
               <div class="w-16 h-16 bg-blue-900 bg-stripes bg-stripes-red">
                       <img class="h-16 w-16 transform rotate-0"
    src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80">
               </div>
               <div class="w-16 h-16 bg-blue-900 bg-stripes bg-stripes-red">
    <img class="h-16 w-16 transform rotate-45"
    src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80">
               </div>
               <div class="w-16 h-16 bg-blue-900 bg-stripes bg-stripes-red">
                  <img class="h-16 w-16 transform rotate-90" 
    src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80">
               </div>
               <div class="w-16 h-16 bg-blue-900 bg-stripes bg-stripes-red">
    <img class="h-16 w-16 transform rotate-180" 
    src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80">
               </div>
           </div>
    </div>
    </div>

Output:

Tailwind CSS Rotate Example

Translate

Utilities for translating elements with transform.

Tailwind CSS Translate

Snippet:

<div class="container flex flex-row my-20 space-x-12">
           <div class="flex flex-col justify-around space-y-12 md:flex-row md:space-y-0 md:space-x-12">
               <div class="w-16 h-16 bg-blue-900 bg-stripes bg-stripes-white">
                   <img class="h-16 w-16 transform translate-y-6"              src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80">
               </div>
               <div class="w-16 h-16 bg-blue-900 bg-stripes bg-stripes-white">
                   <img class="h-16 w-16 transform -translate-y-6"                   src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80">
               </div>
               <div class="w-16 h-16 bg-blue-900 bg-stripes bg-stripes-white">
                   <img class="h-16 w-16 transform translate-y-0"                  src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80">
               </div>
           </div>
    </div>

Example:

<img class="transform translate-y-6 ...">
    <img class="transform -translate-y-6 ...">
    <img class="transform translate-y-0 ...">

Output:

Tailwind CSS Translate Example

Skew

Skew is a utility in tailwind CSS for skewing elements with transform.

Tailwind CSS Skew

Snippet:

<img class="transform skew-y-0 ...">
    <img class="transform skew-y-3 ...">
    <img class="transform skew-y-6 ...">
    <img class="transform skew-y-12 ...">

Code:

<div class="container flex flex-row my-20 space-x-12">
         <div class="flex flex-col justify-around space-y-12 md:flex-row md:space-y-0 md:space-x-12">
             <div class="w-16 h-16 bg-blue-900 bg-stripes bg-stripes-white">
               <img class="h-16 w-16 skew-y-0 transform" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80">
             </div>
             <div class="w-16 h-16 bg-blue-900 bg-stripes bg-stripes-white">
               <img class="h-16 w-16 skew-y-3 transform" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80">
             </div>
             <div class="w-16 h-16 bg-blue-900 bg-stripes bg-stripes-white">
               <img class="h-16 w-16 skew-y-6 transform" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80">
             </div>
             <div class="w-16 h-16 bg-blue-900 bg-stripes bg-stripes-white">
               <img class="h-16 w-16 skew-y-12 transform" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80">
             </div>
         </div>
    </div>

Output:

Tailwind CSS Skew Example

INTERACTIVITY

Interactivity in tailwind CSS is a great feature that is helpful and less complicated than traditional CSS.

TailwindCSS interactivity includes the following properties 

  • Appearance
  • Cursor
  • Outline
  • Pointer Events
  • Resize
  • User Select

Appearance

Appearance in tailwind CSS is a utility for suppressing native form control styling.

Tailwind CSS Appearance

Code

<div class="container flex flex-row my-20 space-x-2">
      <div class="flex flex-col justify-around space-y-12 md:flex-row md:space-y-0 md:space-x-12">
        <p class="p-2 font-bold"> Default browser styles applied </p>
        <select>
            <option>Yes</option>
            <option>No</option>
            <option>Maybe</option>
        </select>
        <p class="p-2 font-bold"> Default browser styles applied </p>
        <select class="appearance-none">
           <option>Yes</option>
             <option>No</option>
             <option>Maybe</option>
        </select>
      </div>
    </div>

Example

Tailwind CSS Appearance Example

Cursor

A cursor is a utility in tailwind CSS for controlling the cursor style when hovering over an element.

Tailwind CSS Cursor

Codepen Example:

See the Pen Tailwind by Aspire Softserv by Vinn Malvia (@VinnMalvia) on CodePen.

Outline

Outline in tailwind CSS is a utility for controlling an element’s outline.

Tailwind CSS Outline

Code

<input type="text"
     placeholder="Default focus style"
     class="..." />
    <input type="text"
     placeholder="Custom focus style"
     class="focus:outline-none focus:ring focus:border-blue-300 ..." />

Example

Tailwind CSS Outline Example

Pointer Events

Pointer Events is a utility for managing whether an element responds to pointer events.

Tailwind CSS Pointer Events
  • Pointer-events-auto is used to revert to the default browser behaviour for pointer-events (like:hover & click).
  • Pointer-events-none is used to make an element ignore pointer events. The pointer-events will execute on child elements and pass through to elements that are “beneath” the target.

Code

<div class="relative">
       <select class="...">
          <option>Indiana</option>
          <option>Michigan</option>
          <option>Ohio</option>
       </select>
       <div class="pointer-events-auto ...">
          <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
             <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"></path>
          </svg>
       </div>
    </div>
    <div class="relative">
       <select class="...">
          <option>Indiana</option>
          <option>Michigan</option>
          <option>Ohio</option>
       </select>
       <div class="pointer-events-none ...">
          <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
             <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"></path>
          </svg>
       </div>
    </div>
    

Example

Tailwind CSS Pointer Events Example

Resize

Resize is a utility for regulating if the user can select text in an element.

Tailwind CSS Resize
  • Resize in all directions

Use resize to make an element horizontally and vertically resizable.

<textarea class="resize border rounded-md"></textarea>
Tailwind CSS Resize All
  • Resize vertically

Use resize-y to make an element vertically resizable.

Code:

<textarea class="resize-y border rounded-md"></textarea>

Example:

Tailwind CSS Resize Vertically
  • Resize horizontally

Use resize-x to make an element horizontally resizable.

Code:

<textarea class="resize-x border rounded-md"></textarea>

Example:

Tailwind CSS Resize Horizontally
  • Prevent resizing

To prevent resizing an element occurs using resize-none in tailwind CSS.

Code:

<textarea class="resize-none border rounded-md"></textarea>

Example:

Tailwind CSS Prevent Resize

User Select

User select is a utility class used for managing whether the user can select text in an element.

Tailwind CSS User Select
  • Disable selecting text

Use select-none to prevent selecting text in an element and its children.

Code:

<div class="select-none ...">
     This text is not selectable
    </div>

Example:

Tailwind CSS disable User Select
  • Allow selecting text

Select-text class is used to provide selecting text in an element & its children.

Code:

<div class="select-text ...">
     This text is selectable
    </div>

Example:

Tailwind CSS Allow User Select
  • Select all text in one click

Select-all class is used to select all the text automatically in an element when some user clicks.

Code:

<div class="select-all ...">
     Click anywhere in this text to select it all
    </div>

Example:

Tailwind CSS Select All User Select

Auto

Use select-auto to use the default browser behaviour for selecting text. Useful for undoing other classes like .select-none at different breakpoints.

Code:

<div class="select-auto ...">
     This text is selectable
    </div>

Example:

Tailwind CSS User Select Auto

ACCESSIBILITY

Screen Readers

Screen readers are a utility class used for improving accessibility with screen readers.

Use: sr-only to hide an element visually without hiding it from screen readers:

Tailwind CSS Screen Readers

Snippet:

<svg class="sr-only|not-sr-only">...</svg>

Code:

<div class="container flex space-y-4 items-center">
     <div class="bg-blue-300 p-4 mx-16 ">
       <span class="sr-only">sr-only</span>
       <span class="not-sr-only">not-sr-only</span>
    </div>
    </div>

Example:

Tailwind CSS Screen Readers Example

SVG

As per Wikipedia, Scalable Vector Graphics is an Extensible Markup Language-based vector image format for two-dimensional graphics with support for interactivity and animation.

SVG in tailwind CSS has three utility classes to create svg icons which are as below:

  1. Fill
  2. Stroke
  3. Stroke width

NOTE: In the below examples, you can copy svg as per your requirements from https://heroicons.com/ 

Fill

SVG is a utility used for styling the fill of SVG elements.

Snippet:

<svg class="fill-current text-green-600 ..."></svg>

Code:

<div class="container flex items-center">
    <svg class="fill-current text-blue-600 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
      <path d="M4 3a2 2 0 100 4h12a2 2 0 100-4H4z" />
     <path fill-rule="evenodd" d="M3 8h14v7a2 2 0 01-2 2H5a2 2 0 01-2-2V8zm5 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z" clip-rule="evenodd" />
    </svg>
      <span>HOME</span>
    </div>

Example:

Tailwind CSS Fill Example

Stroke

Stroke is a utility class for styling the stroke of SVG elements.

Tailwind CSS Stroke

Snippet:

<svg class="stroke-current text-purple-600 ..."></svg>

Code:

<div class="container flex items-center">
     <svg class="stroke-current text-blue-600  h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
        <path d="M4 3a2 2 0 100 4h12a2 2 0 100-4H4z" />
        <path fill-rule="evenodd" d="M3 8h14v7a2 2 0 01-2 2H5a2 2 0 01-2-2V8zm5 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z" clip-rule="evenodd" />
       </svg>
        <span>HOME</span>
    </div>

Example:

Tailwind CSS Stroke Example

Stroke Width

‘Stroke width’ is a utility class used for styling the stroke width of SVG elements. The stroke-{width} utilities are helpful to set the stroke width of an SVG.

Tailwind CSS Stroke Width

Snippet:

<svg class="stroke-current stroke-1 text-green-600 ..."></svg>
    <svg class="stroke-current stroke-2 text-green-600 ..."></svg>

Code:

<div class="container flex items-center">
     <svg class="stroke-current stroke-1 text-blue-600 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
       <path d="M4 3a2 2 0 100 4h12a2 2 0 100-4H4z" />
       <path fill-rule="evenodd" d="M3 8h14v7a2 2 0 01-2 2H5a2 2 0 01-2-2V8zm5 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z" clip-rule="evenodd" />
     </svg>
     <span>Stroke Width 1</span> 
     <svg class="stroke-current stroke-2 text-blue-600 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
       <path d="M4 3a2 2 0 100 4h12a2 2 0 100-4H4z" />
       <path fill-rule="evenodd" d="M3 8h14v7a2 2 0 01-2 2H5a2 2 0 01-2-2V8zm5 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z" clip-rule="evenodd" />
     </svg>
     <span>Stroke Width 2</span>
    </div>

Example

Tailwind CSS Stroke Width Example

Conclusion

Hurray, This is the last blog of the Tailwind CSS series. This post covered all the Tailwind CSS features like effects, filters, transition, and animation. We recommended following the entire series in sequential order for better perception.

It is recommended to go through each section practically, do the practical and bookmark tab. Also, don’t forget to share with friends, colleagues on social media.

Ready to dive into Tailwind CSS or have questions? Feel free to Contact us for personalized guidance and assistance!


Tags

CSS

Share Blog

+

YEARS EXPERIENCE

+

CLIENT TELE ACROSS THE GLOBE

+

OVERALL PROJECTS

+

YEARS OF PARTNERSHIP LENGTH

+

Countries served

REACH OUT

Ready to Build Something Great ?

Experience. Expertise. Know-How
80+

Tech Experts

13+

Years Of Developing

90%

Referral Business

Trust. Reputation. Standards
mail-image
mail-image
mail-image