Tailwind CSS Tools

Color Palette Generator

Generate a complete Tailwind CSS color palette (shades 50-950) from any hex color. Perfect for customizing your Tailwind theme.

Grid Generator

Generate and preview Tailwind CSS grids visually. Customize columns, rows, and gaps with a live DOM preview.

Shadow Generator

Generate custom Tailwind CSS box-shadow presets visually. Adjust offset, blur, spread, and color with a live preview.

Gradient Generator

Create beautiful Tailwind CSS gradients visually. Choose linear, radial, or conic gradients with custom color stops.

Component Builder

Build Tailwind CSS components visually: buttons, cards, badges, alerts, navbars, modals, tables, and forms with live preview.

Class Explorer

Search and filter all Tailwind CSS utility classes by category, color, size, responsive prefix, and state variant.

Typography Scale

Generate a consistent typography scale for Tailwind CSS. Define base size and ratio to create font-size utilities.

Color Contrast

Check WCAG contrast ratios between Tailwind CSS colors. Test foreground/background combinations for AA and AAA compliance.

Spacing Reference

Complete reference for Tailwind CSS spacing utilities. Search and convert between class names, pixels, and rem.

To CSS Converter

Convert Tailwind CSS utility classes to equivalent vanilla CSS rules. Paste any Tailwind class and get instant CSS output.

Responsive Breakpoints

Preview your HTML side-by-side across all Tailwind breakpoints: sm, md, lg, xl, and 2xl with live updates.

Animation Generator

Pick and customize Tailwind CSS animations visually. Choose from built-in animations or create custom keyframes with live preview.

Config Generator

Generate tailwind.config.js visually. Add custom colors, fonts, spacing, screens, and plugins through a simple form interface.

Flexbox Layout Builder

Build Tailwind CSS flexbox and grid layouts visually. Configure direction, wrap, justify, align, gap, and columns.

Transition & Transform

Generate Tailwind CSS transitions and transforms visually. Configure scale, rotate, translate with duration, easing, and hover states.

Filter & Backdrop

Generate Tailwind CSS filter and backdrop-filter utilities visually. Configure blur, brightness, contrast, grayscale, and drop-shadow.

To React/Vue Converter

Convert HTML with Tailwind classes to React JSX (className) or Vue template syntax. Handles class, for, style, and self-closing tags.

Typography Plugin Preview

Preview and customize @tailwindcss/typography prose classes. Compare prose-sm, prose-lg, prose-xl, and color modifiers live.

Icon Picker & Styler

Browse and customize SVG icons with Tailwind CSS classes. Pick icons, adjust size, color, and stroke width, then copy SVG or HTML code.