LESS to Tailwind Converter

Runs in browser

Compile LESS and map to Tailwind utility classes instantly.

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

Loading LESS compiler...
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

🔒 Runs in your browser · No uploads · Your data never leaves your device

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.

Common use cases

  • Migrating LESS components to Tailwind — Convert individual LESS rule blocks to Tailwind utility classes when refactoring a legacy stylesheet.
  • Understanding Tailwind equivalents for LESS rules — Paste a LESS snippet to see which Tailwind utilities correspond to your variables and declarations.

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.

Key concepts

LESS variable
A named value in LESS defined with @ — e.g. @primary-color: #3B82F6 — compiled to a literal value in the CSS output.
Migration
The process of converting a codebase from one technology (LESS, SCSS) to another (Tailwind, plain CSS) incrementally.

Related tools

You might find these useful too.

More css tools