Skip to content We're live on Product Hunt today Upvote
install

TWO BUILDS 9 browsers

Chrome from the Chrome Web Store Firefox from addons.mozilla.org Edge from Microsoft Edge Add-ons Brave takes the Chrome build Opera takes the Chrome build 4 more Chromium browsers: Arc, Vivaldi, Chromium, Opera GX the Chrome build

diagnostic · one of 36 free, no counter

Tailwind theme

Can I get the Tailwind config back out of a built site?

A built Tailwind site ships utility classes and no config. This reads what the page paints - not what a stylesheet declares - groups the values into scales, and writes the result out as a theme. Values that appear once are left out: one use is a one-off, not a scale.

Reach it Press ⌘ + K on any tab and type tailwind theme. Ctrl + K on Windows and Linux

Recovers a Tailwind theme from a site you did not build
reads class names + computed values
writes nothing
sends nothing
infers scale, palette, breakpoints
exports theme file
plan free
Add   LoupeKit - opens the list of browsers it can be installed in

TWO BUILDS 9 browsers

Chrome from the Chrome Web Store Firefox from addons.mozilla.org Edge from Microsoft Edge Add-ons Brave takes the Chrome build Opera takes the Chrome build 4 more Chromium browsers: Arc, Vivaldi, Chromium, Opera GX the Chrome build

in the panel · free, no counter

section#about

What this actually is

When you are rebuilding something, matching a brand you were handed as a URL, or auditing your own site for values that escaped the config. Nothing is rounded and no missing rung is filled in - a system that tidies up the page it came from stops describing it.

section#asked

Asked about this diagnostic

Does it work on a site that does not use Tailwind?

The theme reconstruction does not, and says so rather than producing a config from nothing. The token extraction underneath it works on any page, because that reads computed values instead of class names.

Will the config be identical to theirs?

No, and it cannot be. What is recovered is the part of the theme this page uses; a token defined in their config and never applied leaves no trace in the rendered document.

Is this legal to do?

You are reading the CSS the site sent to your browser, which is the same thing your browser does. What you then build with it is the same question it always was, and no tool answers that one for you.

Which Tailwind version does it assume?

It matches the class names, which are stable across 3 and 4, and exports in the newer @theme form. The older tailwind.config.js shape is available in the same menu.

how to use tailwind theme

  1. Open Tailwind theme on the built site, where there is no config left to read.
  2. It reads the class names beside what the page actually paints.
  3. Read the scales it inferred - spacing, palette, breakpoints. A value used once is left out.
  4. Export the theme file. Nothing is rounded and no missing value is invented.

written about at length

Add   LoupeKit - opens the list of browsers it can be installed in

TWO BUILDS 9 browsers

Chrome from the Chrome Web Store Firefox from addons.mozilla.org Edge from Microsoft Edge Add-ons Brave takes the Chrome build Opera takes the Chrome build 4 more Chromium browsers: Arc, Vivaldi, Chromium, Opera GX the Chrome build

70 of these · no host permissions · three free audits