Any Available Functions for Converting Styles to Tailwind CSS Classes?

[atdilshan]

Hi Tailwind team,

I’m working on a utility to convert various CSS properties (e.g., fontSize, fontWeight, textAlign, display, borderRadius, padding, margin, etc.) into their corresponding Tailwind CSS classes.

I have already written a function to handle the conversion, but it requires me to manually write all possible mappings for each CSS property (e.g., font-size: 14px to text-sm, padding: 16px to p-4, etc.). This approach works but becomes cumbersome as the number of properties increases.

I wanted to ask if Tailwind provides any functions or utility methods to automatically convert or map common CSS properties to Tailwind class equivalents, preferably matching pre-defined classes where applicable. For example:

• Converting font-size: 14px and line-height: 21px to text-sm
• Converting padding: 16px to p-4
• Converting text-align: center to text-center
• Converting box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1) to shadow-[0px_4px_6px_rgba(0, 0, 0, 0.1)]

I’m looking for an efficient way to handle these conversions where:

• Tailwind automatically maps to pre-defined classes if possible (e.g., text-sm for font-size: 14px or p-4 for padding: 16px).
• If there is no match, it falls back to using the custom value in brackets (e.g., text-[14px] or p-[16px]).

Any built-in solutions, utility functions, or best practices from Tailwind would be greatly appreciated!