Export High-Res PDF
Switch to Light Mode
SkillSnap Official GuideUpdated 7/24/2026
Tailwind CSS
The utility-first framework. Master 'group' and 'peer' states, JIT arbitrary values, and grid layouts to build rapid UIs.
Layout & Positioning
Core layout primitivesflex / grid
Add margin between childrenspace-x/y-4
Pin all sides (Absolute pos)inset-0
Center grid content instantlyplace-content-center
Maintain 16:9 ratioaspect-video
States & Modifiers
Element state modifiershover: / focus:
Trigger style when parent hoveredgroup-hover:
Style based on sibling (Custom inputs)peer-checked:
Dark mode toggledark:
Hide element when printingprint:hidden
Typography & Text
Sets size and line-heighttext-sm / lg
Single line overflow (...)truncate
Multi-line overflowline-clamp-3
Reduce letter spacingtracking-tight
Visual Effects
Color opacity modifierbg-blue-500/50
Glassmorphism effectbackdrop-blur-md
Box shadowshadow-lg
Focus ring (Doesn't affect layout)ring-2
Expert Snippets
Dynamic viewport height (Mobile fix)h-[100dvh]
Hide visually but keep for screen readerssr-only
Click-through elementpointer-events-none
Instant loading spinneranimate-spin