Other Helper Classes
There are a lot of CSS classes that you can use while writing your Vue templates. Very handy to ease the complexity of your VueModels and templates.
The list below is not complete. Also check the other TailwindCSS documentation pages like Typography, Visibility, Shadows, Positioning.
Mouse Related
| Class Name | Description |
|---|---|
pointer-events-none | DOM element does not become a target of mouse events - clicks, hover and so on |
pointer-events-auto | The opposite of pointer-events-none |
cursor-pointer | Change mouse pointer on DOM element to look as if on a clickable link |
cursor-not-allowed | Change mouse pointer on DOM element to look as if action will not be carried out |
cursor-none | No mouse cursor is rendered |
Scroll Related
| Class Name | Description |
|---|---|
scroll-auto | Enable regular scrolling within an element |
scroll-smooth | Enable smooth scrolling within an element |
overflow-auto | Sets overflow to auto |
overflow-hidden | Sets overflow to hidden |
Size Related
| Class Name | Description |
|---|---|
h-full | Height is set to 100% |
h-screen | Height is set to 100vh |
w-full | Width is set to 100% |
w-screen | Width is set to 100vh |
block | Sets display property set to block |
hidden | Sets display property set to hidden |
Border Related
| Class Name | Description |
|---|---|
border-0 | Removes any border |
rounded-none | Removes any radius the border might have |
shadow-none | Removes any applied box-shadow |
outline-0 | Removes any outline applied on the border |
rounded | Applies a generic border radius |
See all helper classes available on TailwindCSS docs.