Tailwind CSS

Other Apperance Things


In addition to transformations (translate, rotate, scale, skew) covered earlier, In Tailwind CSS offers other utility classes under the "Appearance" category to style various visual aspects of your elements.

 

1. Cursor:

Customizing the cursor that appears when hovering over an element.
Classes like cursor-pointer, cursor-default, cursor-move, etc., define different cursor types.

 

Visibility:

Controls whether an element is visible or hidden.
Classes like visible, invisible, and hidden provide control over visibility.

 

Opacity:

Sets the transparency level of an element.
Classes like opacity-100 (fully opaque) to opacity-0 (fully transparent) and percentages in between adjust opacity.

 

Filters:

Apply visual effects like blur, grayscale, hue-rotate, and more.
Classes like filter, filter-blur, filter-grayscale, etc., combined with value modifiers, enable various filters.

 

Backgrounds:

While not strictly under "Appearance", it significantly affects the visual look.


Tailwind provides utilities for background color, image, size, position, and blend mode.
Classes like bg-gray-200 (background color), bg-cover (background image size), etc., style backgrounds.