Documentation

Everything you need to get up and running with Twift — from installation to generating your first Tailwind v4 @theme block.

Quick Start

1
Pin the extension
After installing from the Chrome Web Store, click the puzzle-piece icon in your toolbar and pin Twift so it's always one click away.
2
Open any site
Navigate to any live website — a design reference, a competitor's site, or your own project running locally.
3
Toggle the side panel
Click the Twift icon in your toolbar. Chrome's side panel will slide open alongside the page without disrupting your browsing.
4
Click "Scan Variables"
Hit the Scan Variables button. Twift reads the page's stylesheets and computed styles, extracts every CSS custom property, and instantly renders your @theme block.
5
Copy and paste
Use the Copy button to copy the generated block directly to your clipboard, then paste it into your project's CSS entry file.

Tailwind v4 @theme Export

Tailwind CSS v4 replaces the JavaScript config file with a purely CSS-native design-token system. Instead of editing tailwind.config.js, you declare your tokens directly inside a @theme block in your stylesheet:

styles.css

@import "tailwindcss";

@theme {
  --color-brand: oklch(0.85 0.15 200);
  --color-brand-foreground: oklch(0.16 0.03 260);
  --font-display: "Inter", system-ui, sans-serif;
  --radius-lg: 0.75rem;
}

Twift targets this new engine specifically. Every CSS custom property scanned from a page is mapped to the correct @theme namespace (--color-*, --font-*, --radius-*, etc.), giving you a clean, spec-compliant token file you can drop straight into any Tailwind v4 project.

This means no post-processing, no manual renaming — the output is valid Tailwind v4 on the first paste.

Troubleshooting

If you hit the Scan Variables button and the results look empty or incomplete, one of the following is usually the cause.

No variables appear at all

The site may not use CSS custom properties. Older frameworks (Bootstrap 4 and below, Foundation) rely on pre-compiled Sass variables which are baked into plain values at build time and are invisible to the scanner.

Variables are present but look obfuscated (e.g. --a1b2, --x3)

Some production bundles run CSS through minifiers or obfuscators (common in Next.js App Router sites using CSS Modules). The token values are still correct — you may just need to rename the keys manually after pasting.

Only a handful of variables appear

Styles loaded inside <iframe> elements, Shadow DOM trees, or lazy-loaded stylesheets may not be accessible. Try scrolling the page to trigger lazy loads, then scan again.

The side panel opens but "Scan Variables" does nothing

Check that the extension has permission for the current tab. Chrome may require you to click Allow on this site in the extension pop-up for sites you haven't visited before.

FAQ

Does Twift send my data anywhere?

No. All scanning happens entirely within your browser. The extension reads document.styleSheets and computed styles locally — nothing is uploaded to our servers or any third party. See our Privacy Policy for full details.

Is Twift free?

Yes, Twift is completely free to install and use. There is no paid tier, no trial limit, and no feature gating. If you find it valuable, you can support development through a voluntary donation via the button inside the extension — but it is entirely optional.

Which browsers are supported?

Twift is built as a Chrome Extension using the Side Panel API, which requires Chrome 114 or later (or any Chromium-based browser that supports chrome.sidePanel — e.g. Edge, Brave, Arc).

Does it work with Tailwind v3?

The generated output uses the @theme syntax introduced in Tailwind CSS v4. It is not compatible with tailwind.config.js-based v3 projects out of the box, though the CSS variable values can be copied manually into a v3 config.

Can I use it on localhost?

Absolutely. Twift works on any tab Chrome can access, including http://localhost and file:// URLs (you may need to enable "Allow access to file URLs" in the extension settings).