Tailwind CSS Lookup
Search any Tailwind class to see its CSS, browse by category, or reverse-lookup CSS properties.
What is Tailwind CSS Lookup?
Tailwind CSS lookup lets you search any Tailwind utility class to see its underlying CSS, or paste CSS to find the matching Tailwind class. With 500+ utility classes covering layout, spacing, typography, colors, and effects, this tool helps you quickly find the right class and understand what each one does.
Common Use Cases
- •Finding the Tailwind class for a specific CSS property
- •Understanding what a Tailwind class generates in CSS
- •Converting existing CSS to Tailwind utility classes
- •Learning Tailwind class naming conventions
- •Quickly referencing spacing, color, and typography scales
Frequently Asked Questions
How do I convert CSS to Tailwind?
Paste your CSS property (e.g., 'display: flex') and the tool will show the matching Tailwind class (flex). For values not in the default scale, use arbitrary values like w-[137px] or bg-[#1da1f2].
What are Tailwind arbitrary values?
Arbitrary values let you use any CSS value with Tailwind's utility syntax using square brackets: w-[200px], text-[#ff5733], grid-cols-[1fr_2fr]. They're useful when the default scale doesn't include the value you need.