Smooth Shadow Plugin for Tailwind CSS
shadow.floriankiem.com · 597 words · saved by 1 readers
A simple Tailwind plugin that makes your shadows finally look good.
.claude/skills/smooth-shadow-ring/SKILL.md --- name: smooth-shadow-ring description: Use when styling any elevated surface (card, dialog, popover, dropdown, menu, tooltip, sheet, toast) in a Tailwind project that has shadow-plugin installed. Prevents the double-border artifact caused by pairing a border/ring with a shadow, by routing elevation through the smooth-shadow-ring-* utilities. --- # Elevated surfaces: use smooth-shadow-ring, never border + shadow ## When this applies Any element that floats above the page surface: cards, dialogs, modals, popovers, dropdowns, menus, tooltips,…
saved by
related reading
- Dia Browser's gradientarlan.me
- MetalForge — Beautiful Metal shaders for SwiftUImetalforge.xyz
- Components | Canvas UIcanvasui.dev
- Details That Make Interfaces Feel Betterinterfaces.dev
- JAPANESE GRADIENTS [FOR UI]™japanesegradientsforui.com
- Create a Palette - Coolorscoolors.co
- Paper Shaders – Ultra-fast zero-dependency shadersshaders.paper.design
- Details That Make Interfaces Feel Betterjakub.kr
- Shadersshaders.com
- Using Shadows Instead of Bordersjakub.kr
- Tailwind CSS Colors - All colors + Custom color generatoruicolors.app
- Liquid metal — Animated metal shader effectmetal.jakubantalik.com