TailWinks by NVDreamspace

About this plugin

Build design systems faster with production-ready color scales. One of NVDreamspace productivity tool line up: https://nvdreamspace.com/

TailWinks generates complete Tailwind CSS v4 color scales (50-950) from any single color input—giving you instantly usable, perceptually balanced color palettes that match Tailwind's exact methodology.

WHAT IT DOES

Drop in your brand color, and TailWinks intelligently analyzes its lightness and saturation to place it exactly where it belongs in the scale. No guesswork. No manual adjustments. Just 11 perfectly calibrated shades that work harmoniously together.

THE SCIENCE BEHIND IT

Powered by OKLCH color space calculations that replicate Tailwind v4's color system, ensuring your scales have the same perceptual uniformity and vibrancy as Tailwind's official palette.

SEAMLESS WORKFLOW

1. Auto-generates complete 11-shade scales (50, 100, 200...950)
2. Intelligent shade placement based on your input color's properties
3. One-click conversion to Figma variables
4. Organized collections ready for your design tokens
5. Export to CSS custom properties

BUILT FOR DESIGN SYSTEMS

Building brand new design system or extending an existing one, Tailwinks bridges the gap between design and development. Your color scales are immediately ready to connect to semantic tokens, ensuring perfect consistency from Figma to production code.