Seb-GRAF / tailwind-helper

Tailwindhelper | A Tailwind css multitool for visualizing classes, converting units, and finding colors

A Tailwindcss multi-tool
Visit the website »

Report Bug · Request Feature

What is it?

Tailwindhelper assists you in styling with tailwindcss. You can visualize different settings, convert values into tailwind classes, figure out the closest colors with hex values and more.

Example case:

You have a figma design and want to know what the Tailwind class of a 26px font size is?

Simply use the Font size helper and then copy and paste the class into your html element.

✅ Current helpers

Text

• Font size
• Font weight
• Letter spacing
• Text color

Layout

• Margin
• Padding
• Border radius
• Box shadow

Positions

• Positioning
• Placement
• Translate (x/y)

Grid

• Grid template columns
• Gris template rows
• Gap

Images

• Object Fit
• Object Position
• Filters

Colors

• Tailwind color list
• Color picker

License

Licensed under the MIT License.