New

LESS to Tailwind Converter

Runs in browser

Compile LESS to CSS, then map the first rule to Tailwind utilities or an @apply block. Helpful when migrating LESS projects toward Tailwind.

LESS to Tailwind Converter tool

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
1

Files never leave your browser.

Drag and drop a file here, or tap to select

Chain to another tool

Send this output to another tool instantly — no copy-paste needed.

Produce output above to enable chaining.

How to use

  1. Paste LESS

    Edit the left panel or upload a .less file.

  2. Review Tailwind

    Choose Utility classes or @apply on the right. Toggle unmapped comments if needed.

  3. Fix LESS errors

    Compile errors appear in red below the panels with line numbers when available.

Examples

  • Variables

    LESS variables compile before Tailwind mapping.

    Input
    @c: red;
.a { color: @c; }
    Output
    text-red-500 or text-[…]

Frequently asked questions

Is LESS compiled locally?
Yes. The less package runs in your browser; nothing is uploaded.
Why only the first rule?
Phase A maps one block at a time for predictable output.

Related tools

You might find these useful too.