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.
Table of Contents
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
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:
Transform Origin
Transform Origin is a utility for specifying the origin of an element’s transformations.
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:
Scale
Scale is a utility in tailwind CSS for scaling elements with transform.
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&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&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&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&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&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&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&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80">
</div>
</div>
</div>Example:
Rotate
Utilities for rotating elements with transform.
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&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&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&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&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&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&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&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&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&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80">
</div>
</div>
</div>
</div>Output:
Translate
Utilities for translating elements with transform.
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&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&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&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&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&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&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:
Skew
Skew is a utility in tailwind CSS for skewing elements with transform.
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&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&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&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&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&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&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&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80">
</div>
</div>
</div>Output:
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.
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
Cursor
A cursor is a utility in tailwind CSS for controlling the cursor style when hovering over an element.
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.
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
Pointer Events
Pointer Events is a utility for managing whether an element responds to 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
Resize
Resize is a utility for regulating if the user can select text in an element.
- Resize in all directions
Use resize to make an element horizontally and vertically resizable.
<textarea class="resize border rounded-md"></textarea>
- Resize vertically
Use resize-y to make an element vertically resizable.
Code:
<textarea class="resize-y border rounded-md"></textarea>Example:
- Resize horizontally
Use resize-x to make an element horizontally resizable.
Code:
<textarea class="resize-x border rounded-md"></textarea>Example:
- Prevent resizing
To prevent resizing an element occurs using resize-none in tailwind CSS.
Code:
<textarea class="resize-none border rounded-md"></textarea>Example:
User Select
User select is a utility class used for managing whether the user can select text in an element.
- 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:
- 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:
- 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:
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:
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:
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:
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:
- Fill
- Stroke
- 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:
Stroke
Stroke is a utility class for styling the stroke of SVG elements.
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:
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.
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
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!
