Tailwind CSS
/Beginner
Inset Utilities
Definition
Utilities for controlling the placement of positioned elements (mapping to `top`, `right`, `bottom`, and `left`).
Explain Like I'm New
Once you make an element `absolute` or `fixed`, you have to tell it exactly where to go. You use coordinates like `top-0` (0px from the top) or `left-4` (1rem from the left).
Real World Example
Pinning a 'Chat with Support' floating action button to the bottom right of the screen using `fixed bottom-4 right-4`.
Common Use Cases
- •Pinning elements
- •Centering absolute elements
Interactive Example
Interview Questions
basic
- What Tailwind class applies `top: 0; right: 0; bottom: 0; left: 0;` all at once?
intermediate
- If you apply `top-4` to an element with a `static` position, what happens?