How to use CSS to Tailwind Reference
- Choose declaration conversion or utility lookup.
- Enter a supported declaration list or reference query.
- Read mappings and unsupported entries, then verify them in your own theme.
Example: CSS to Tailwind Reference
display: flex; padding: 1rem;
Options
- Operation
- Conversion maps supported declarations to the pinned default utilities. Reference lookup searches that finite mapping instead of converting a whole stylesheet.
- Theme assumptions
- Check the default theme and rem basis before using a utility. A custom theme, plugin or conflicting shorthand can change its actual effect.
Supported inputs and limits
Where your input is processed
This tool processes your input in this browser. Your text and files are not uploaded to UseFreeTools. Check this tool's limits for anything it may save on your device.
Review unmapped declarations explicitly
Keep an unsupported declaration in the review list instead of assuming it has been represented by another class. Selectors, media rules and important modifiers require a separate conversion decision. Compare the final element in your own Tailwind project; a matching default mapping does not guarantee the same cascade or dimensions there.
Questions about CSS to Tailwind Reference
Will these classes match a customized theme?
Not necessarily. The mappings use the pinned default theme.
Can a complete stylesheet be converted?
No. Selectors, nested rules and unsupported declarations require manual work.
Is the reference always current?
No. It identifies its pinned Tailwind version rather than claiming to track new releases.