Home

Welcome to the csstotailwind.com, a fast & free tool to convert your CSS classes to Tailwind classes.

• Simple to use: Just input your css classes & html (optional) and get the results.
• Supports over 7500 Tailwind classes, arbitrary classes, breakpoints and media query, Pseudo-classes (like :hover, :focus, :first-child, :required) and Pseudo-elements (like ::before, ::after, ::placeholder, ::selection) (See details below).
• Multiple suggestes results: If your class can be converted into different Tailwind classes.
• Replace your classes with Tailwind classes in your html.
• Fast conversion: Because all Tailwind classes are indexed, the tool searches and responds to you immediately.
• Free forever. If you'd like to support me, please donate via Buy Me A Coffee, thank you.

Classes

Class	Normal	Arbitrary
*****	Layout	*****
Aspect Ratio	$${\color{green}✔}$$	$${\color{green}✔}$$
Container	$${\color{red}✖}$$
Columns	$${\color{green}✔}$$	$${\color{green}✔}$$
Break After	$${\color{green}✔}$$
Break Before	$${\color{green}✔}$$
Break Inside	$${\color{green}✔}$$
Box Decoration Break	$${\color{green}✔}$$
Box Sizing	$${\color{green}✔}$$
Display	$${\color{green}✔}$$
Floats	$${\color{green}✔}$$
Clear	$${\color{green}✔}$$
Isolation	$${\color{green}✔}$$
Object Fit	$${\color{green}✔}$$
Object Position	$${\color{green}✔}$$	$${\color{green}✔}$$
Overflow	$${\color{green}✔}$$
Overscroll Behavior	$${\color{green}✔}$$
Position	$${\color{green}✔}$$
Top / Right / Bottom / Left	$${\color{green}✔}$$	$${\color{green}✔}$$
Visibility	$${\color{green}✔}$$
Z-Index	$${\color{green}✔}$$	$${\color{green}✔}$$
*****	Place Self	*****
Flex Basis	$${\color{green}✔}$$	$${\color{green}✔}$$
Flex Direction	$${\color{green}✔}$$
Flex Wrap	$${\color{green}✔}$$
Flex	$${\color{green}✔}$$	$${\color{green}✔}$$
Flex Grow	$${\color{green}✔}$$	$${\color{green}✔}$$
Flex Shrink	$${\color{green}✔}$$	$${\color{green}✔}$$
Order	$${\color{green}✔}$$	$${\color{green}✔}$$
Grid Template Columns	$${\color{green}✔}$$	$${\color{green}✔}$$
Grid Column Start / End	$${\color{green}✔}$$	$${\color{green}✔}$$
Grid Template Rows	$${\color{green}✔}$$	$${\color{green}✔}$$
Grid Row Start / End	$${\color{green}✔}$$	$${\color{green}✔}$$
Grid Auto Flow	$${\color{green}✔}$$
Grid Auto Columns	$${\color{green}✔}$$	$${\color{green}✔}$$
Grid Auto Rows	$${\color{green}✔}$$	$${\color{green}✔}$$
Gap	$${\color{green}✓}$$	$${\color{green}✔}$$
Justify Content	$${\color{green}✔}$$
Justify Items	$${\color{green}✔}$$
Justify Self	$${\color{green}✔}$$
Align Content	$${\color{green}✔}$$
Align Items	$${\color{green}✔}$$
Align Self	$${\color{green}✔}$$
Place Content	$${\color{green}✔}$$
Place Items	$${\color{green}✔}$$
Place Self	$${\color{green}✔}$$
*****	Spacing	*****
Padding	$${\color{green}✔}$$	$${\color{green}✔}$$
Margin	$${\color{green}✔}$$	$${\color{green}✔}$$
Space Between	$${\color{red}✖}$$	$${\color{red}✖}$$
*****	Sizing	*****
Width	$${\color{green}✔}$$	$${\color{green}✔}$$
Min-Width	$${\color{green}✔}$$	$${\color{green}✔}$$
Max-Width	$${\color{green}✔}$$	$${\color{green}✔}$$
Height	$${\color{green}✔}$$	$${\color{green}✔}$$
Min-Height	$${\color{green}✔}$$	$${\color{green}✔}$$
Max-Height	$${\color{green}✔}$$	$${\color{green}✔}$$
Size	$${\color{green}✔}$$	$${\color{green}✔}$$
*****	Typography	*****
Font Family	$${\color{green}✔}$$	$${\color{green}✔}$$
Font Size	$${\color{green}✔}$$	$${\color{green}✔}$$
Font Smoothing	$${\color{green}✔}$$
Font Style	$${\color{green}✔}$$
Font Weight	$${\color{green}✔}$$	$${\color{green}✔}$$
Font Variant Numeric	$${\color{green}✔}$$
Letter Spacing	$${\color{green}✔}$$	$${\color{green}✔}$$
Line Clamp	$${\color{red}✖}$$	$${\color{red}✖}$$
Line Height	$${\color{green}✔}$$	$${\color{green}✔}$$
List Style Image	$${\color{green}✔}$$	$${\color{green}✔}$$
List Style Position	$${\color{green}✔}$$
List Style Type	$${\color{green}✔}$$	$${\color{green}✔}$$
Text Align	$${\color{green}✔}$$	$${\color{green}✔}$$
Text Color	$${\color{green}✔}$$	$${\color{green}✔}$$
Text Decoration	$${\color{green}✔}$$
Text Decoration Color	$${\color{green}✔}$$	$${\color{green}✔}$$
Text Decoration Style	$${\color{green}✔}$$
Text Decoration Thickness	$${\color{green}✔}$$	$${\color{green}✔}$$
Text Underline Offset	$${\color{green}✔}$$	$${\color{green}✔}$$
Text Transform	$${\color{green}✔}$$
Text Overflow	$${\color{green}✔}$$ (Excluded: truncate)
Text Wrap	$${\color{green}✔}$$
Text Indent	$${\color{green}✔}$$	$${\color{green}✔}$$
Vertical Align	$${\color{green}✔}$$	$${\color{green}✔}$$
Whitespace	$${\color{green}✔}$$
Word Break	$${\color{green}✔}$$
Hyphens	$${\color{green}✔}$$
Content	$${\color{green}✔}$$	$${\color{green}✔}$$
*****	Backgrounds	*****
Background Attachment	$${\color{green}✔}$$
Background Clip	$${\color{green}✔}$$
Background Color	$${\color{green}✔}$$	$${\color{green}✔}$$
Background Origin	$${\color{green}✔}$$
Background Position	$${\color{green}✔}$$	$${\color{green}✔}$$
Background Repeat	$${\color{green}✔}$$
Background Size	$${\color{green}✔}$$	$${\color{red}✖}$$
Background Image	$${\color{green}✔}$$ (Only bg-none)	$${\color{green}✔}$$
Gradient Color Stops	$${\color{green}✔}$$	$${\color{green}✔}$$
*****	Borders	*****
Border Radius	$${\color{green}✔}$$	$${\color{green}✔}$$
Border Width	$${\color{green}✔}$$	$${\color{green}✔}$$
Border Color	$${\color{green}✔}$$	$${\color{green}✔}$$
Border Style	$${\color{green}✔}$$
Divide Width	$${\color{red}✖}$$	$${\color{red}✖}$$
Divide Color	$${\color{red}✖}$$	$${\color{red}✖}$$
Divide Style	$${\color{red}✖}$$
Outline Width	$${\color{green}✔}$$	$${\color{green}✔}$$
Outline Color	$${\color{green}✔}$$	$${\color{green}✔}$$
Outline Style	$${\color{green}✔}$$
Outline Offset	$${\color{green}✔}$$
Ring Width	$${\color{red}✖}$$	$${\color{red}✖}$$
Ring Color	$${\color{red}✖}$$	$${\color{red}✖}$$
Ring Offset Width	$${\color{red}✖}$$	$${\color{red}✖}$$
Ring Offset Color	$${\color{red}✖}$$	$${\color{red}✖}$$
*****	Effects	*****
Box Shadow	$${\color{red}✖}$$	$${\color{red}✖}$$
Box Shadow Color	$${\color{red}✖}$$	$${\color{red}✖}$$
Opacity	$${\color{green}✔}$$	$${\color{green}✔}$$
Mix Blend Mode	$${\color{green}✔}$$
Background Blend Mode	$${\color{green}✔}$$
*****	Filters	*****
Blur	$${\color{green}✔}$$	$${\color{green}✔}$$
Brightness	$${\color{green}✔}$$	$${\color{green}✔}$$
Contrast	$${\color{green}✔}$$	$${\color{green}✔}$$
Drop Shadow	$${\color{red}✖}$$	$${\color{red}✖}$$
Grayscale	$${\color{green}✔}$$	$${\color{green}✔}$$
Hue Rotate	$${\color{green}✔}$$	$${\color{green}✔}$$
Invert	$${\color{green}✔}$$	$${\color{green}✔}$$
Saturate	$${\color{green}✔}$$	$${\color{green}✔}$$
Sepia	$${\color{green}✔}$$	$${\color{green}✔}$$
Backdrop Blur	$${\color{green}✔}$$	$${\color{green}✔}$$
Backdrop Brightness	$${\color{green}✔}$$	$${\color{green}✔}$$
Backdrop Contrast	$${\color{green}✔}$$	$${\color{green}✔}$$
Backdrop Grayscale	$${\color{green}✔}$$	$${\color{green}✔}$$
Backdrop Hue Rotate	$${\color{green}✔}$$	$${\color{green}✔}$$
Backdrop Invert	$${\color{green}✔}$$	$${\color{green}✔}$$
Backdrop Opacity	$${\color{green}✔}$$	$${\color{green}✔}$$
Backdrop Saturate	$${\color{green}✔}$$	$${\color{green}✔}$$
Backdrop Sepia	$${\color{green}✔}$$	$${\color{green}✔}$$
*****	Tables	*****
Border Collapse	$${\color{green}✔}$$
Border Spacing	$${\color{green}✔}$$ (Excluded: border-spacing-x-…, border-spacing-y-...)	$${\color{green}✔}$$
Table Layout	$${\color{green}✔}$$
Caption Side	$${\color{green}✔}$$
*****	Transitions & Animation	*****
Transition Property	$${\color{red}✖}$$	$${\color{red}✖}$$
Transition Duration	$${\color{green}✔}$$	$${\color{green}✔}$$
Transition Timing Function	$${\color{green}✔}$$	$${\color{green}✔}$$
Transition Delay	$${\color{green}✔}$$	$${\color{green}✔}$$
Animation	$${\color{red}✖}$$	$${\color{red}✖}$$
*****	Transforms	*****
Scale	$${\color{green}✔}$$	$${\color{green}✔}$$
Rotate	$${\color{green}✔}$$	$${\color{green}✔}$$
Translate	$${\color{green}✔}$$	$${\color{green}✔}$$
Skew	$${\color{green}✔}$$	$${\color{green}✔}$$
Transform Origin	$${\color{green}✔}$$	$${\color{green}✔}$$
*****	Interactivity	*****
Accent Color	$${\color{green}✔}$$	$${\color{green}✔}$$
Appearance	$${\color{green}✔}$$
Cursor	$${\color{green}✔}$$	$${\color{red}✖}$$
Caret Color	$${\color{green}✔}$$	$${\color{green}✔}$$
Pointer Events	$${\color{green}✔}$$
Resize	$${\color{green}✔}$$
Scroll Behavior	$${\color{green}✔}$$
Scroll Margin	$${\color{green}✔}$$	$${\color{green}✔}$$
Scroll Padding	$${\color{green}✔}$$	$${\color{green}✔}$$
Scroll Snap Align	$${\color{green}✔}$$	$${\color{green}✔}$$
Scroll Snap Stop	$${\color{green}✔}$$	$${\color{green}✔}$$
Scroll Snap Type	$${\color{red}✖}$$
Touch Action	$${\color{green}✔}$$
User Select	$${\color{green}✔}$$
Will Change	$${\color{green}✔}$$	$${\color{green}✔}$$
*****	SVG	*****
Fill	$${\color{green}✔}$$	$${\color{green}✔}$$
Stroke	$${\color{green}✔}$$	$${\color{green}✔}$$
Stroke Width	$${\color{green}✔}$$	$${\color{green}✔}$$
*****	Accessibility	*****
Screen Readers	$${\color{red}✖}$$
Forced Color Adjust	$${\color{green}✔}$$

Modifier

Modifier	Support	Arbitrary
*****	Pseudo-class reference	*****
hover	$${\color{green}✔}$$
focus	$${\color{green}✔}$$
focus-within	$${\color{green}✔}$$
focus-visible	$${\color{green}✔}$$
active	$${\color{green}✔}$$
target	$${\color{green}✔}$$
first	$${\color{green}✔}$$
last	$${\color{green}✔}$$
only	$${\color{green}✔}$$
odd	$${\color{green}✔}$$
even	$${\color{green}✔}$$
first-of-type	$${\color{green}✔}$$
last-of-type	$${\color{green}✔}$$
only-of-type	$${\color{green}✔}$$
empty	$${\color{green}✔}$$
disabled	$${\color{green}✔}$$
enabled	$${\color{green}✔}$$
checked	$${\color{green}✔}$$
indeterminate	$${\color{green}✔}$$
default	$${\color{green}✔}$$
required	$${\color{green}✔}$$
valid	$${\color{green}✔}$$
invalid	$${\color{green}✔}$$
in-range	$${\color{green}✔}$$
out-of-range	$${\color{green}✔}$$
placeholder-shown	$${\color{green}✔}$$
autofill	$${\color{green}✔}$$
read-only	$${\color{green}✔}$$
group-{modifier}	$${\color{red}✖}$$	$${\color{red}✖}$$
peer-{modifier}	$${\color{red}✖}$$	$${\color{red}✖}$$
*-{modifier}	$${\color{red}✖}$$	$${\color{red}✖}$$
has-{modifier}	$${\color{red}✖}$$	$${\color{red}✖}$$
*****	Pseudo-elements	*****
before	$${\color{green}✔}$$	$${\color{red}✖}$$
after	$${\color{green}✔}$$	$${\color{red}✖}$$
placeholder	$${\color{green}✔}$$
file	$${\color{green}✔}$$
marker	$${\color{green}✔}$$
selection	$${\color{green}✔}$$
first-line	$${\color{green}✔}$$
first-letter	$${\color{green}✔}$$
backdrop	$${\color{green}✔}$$
*****	Media and feature queries	*****
sm	$${\color{green}✔}$$	$${\color{red}✖}$$
md	$${\color{green}✔}$$	$${\color{red}✖}$$
lg	$${\color{green}✔}$$	$${\color{red}✖}$$
xl	$${\color{green}✔}$$	$${\color{red}✖}$$
2xl	$${\color{green}✔}$$	$${\color{red}✖}$$
max-sm	$${\color{green}✔}$$	$${\color{red}✖}$$
max-md	$${\color{green}✔}$$	$${\color{red}✖}$$
max-lg	$${\color{green}✔}$$	$${\color{red}✖}$$
max-xl	$${\color{green}✔}$$	$${\color{red}✖}$$
max-2xl	$${\color{green}✔}$$	$${\color{red}✖}$$
dark	$${\color{red}✖}$$
motion-reduce	$${\color{red}✖}$$
contrast-more	$${\color{green}✔}$$
contrast-less	$${\color{green}✔}$$
forced-colors	$${\color{red}✖}$$
portrait	$${\color{green}✔}$$
landscape	$${\color{green}✔}$$
print	$${\color{red}✖}$$
supports-[...]	$${\color{red}✖}$$
aria-*	$${\color{red}✖}$$
data-*	$${\color{red}✖}$$
rtl and ltr	$${\color{red}✖}$$
open	$${\color{red}✖}$$
close	$${\color{red}✖}$$