CSS Colors to Tailwind
Known palette hex values map to tokens like text-gray-900. Unknown colors become bg-[#1a2b3c].
Brand colors
If your brand hex is not in the default palette, an arbitrary color class is better than the nearest-but-wrong blue.
Opacity
Separate color and opacity utilities carefully. A semi-transparent overlay that becomes fully opaque after conversion is a common visual bug.
Theme modes
Dark mode strategies (class vs media) are product decisions. Conversion does not choose your strategy — it only maps the declarations you paste.
Try it
.example { display: flex; gap: 1rem; padding: 1rem; }Trust note: verify output visually. The converter is a draft helper for developers.