PickCodeWork component by component: for each element, find the rules that actually apply, map them to Tailwind utilities, and put the classes on the element. Drop declarations that just repeat browser defaults. Then delete the old stylesheet rules as you go.
Why automatic conversion often goes wrong
A converter that copies every computed property onto every element produces markup nobody can maintain. One Reddit user described the result: "a simple div ends up being thousands of line of code." The fix is to convert only what differs from the defaults and what the design actually needs.
A good conversion leaves out values the browser already sets (display: block on a div, font-style: normal), skips inherited values on children when the parent sets them, and uses shorthands (px-6 rather than pl-6 pr-6).
A worked example
<!-- Before -->
<style>
.feature { display: flex; gap: 16px; padding: 24px; border: 1px solid #e5e7eb; border-radius: 12px; }
.feature h3 { font-size: 18px; font-weight: 600; color: #111827; }
.feature p { margin-top: 4px; font-size: 14px; color: #6b7280; }
@media (min-width: 768px) { .feature { padding: 32px; } }
</style>
<div class="feature">
<div><h3>Fast setup</h3><p>Ready in two minutes.</p></div>
</div>
<!-- After -->
<div class="flex gap-4 rounded-xl border border-gray-200 p-6 md:p-8">
<div>
<h3 class="text-lg font-semibold text-gray-900">Fast setup</h3>
<p class="mt-1 text-sm text-gray-500">Ready in two minutes.</p>
</div>
</div>Each rule moves onto the element it styled, the media query becomes md:, and the descendant selectors disappear because the classes now sit on the h3 and p directly.
A conversion checklist
- Start from the outermost wrapper and work inward, one component at a time.
- Add Tailwind's base (Preflight) early. It resets margins on headings and paragraphs, so you can see which spacing the old CSS really set.
- Map colors to palette names when they are close, and add brand colors to
@themeonce rather than repeating hex codes. - Turn
@media (min-width: ...)blocks intosm:,md:,lg:prefixes. Tailwind is mobile-first, so styles without a prefix apply to all widths. - Keep complex animations and third-party widget styles in a small CSS file. Not everything needs to be a utility.
Convert straight from the page with PickCode
- Open the page. Your own localhost works too, so you can convert a legacy template in place.
- Pick a component. Press Alt Shift C, hover the component, and use ↑ to reach its wrapper.
- Copy as Tailwind. Press 1 in the code panel. Classes use the default scale where values fit, with readable breakpoint and hover prefixes.
- Replace the old markup. Paste over the original component and delete the stylesheet rules it no longer needs.
Converting markup from a live site
If the HTML is on a site you don't control, you don't have its source CSS in a neat file. You have the rendered page. That is where reading computed styles from the browser helps: the values are already resolved, whatever framework produced them. For pasting single rules, the free CSS to Tailwind converter works too.
Questions
Can I convert a full HTML template in one go?
You can try, but component by component is more reliable. It keeps each paste small enough to check against the original.
What about CSS frameworks like Bootstrap?
Those need a mapping of the framework classes as well. See Bootstrap to Tailwind.
Do I need Tailwind v4 for this?
No. The class names in this guide work in v3 and v4. Theme variables in @theme are v4; v3 uses tailwind.config.js instead.
Should I keep any custom CSS?
Yes, for keyframes, complex selectors and third-party widgets. A short CSS file next to Tailwind is normal.