Twift

Inspect components, edit styles, and generate responsive Tailwind CSS v4 @theme configurations from any active tab.

Twift is a high-speed design-to-token scanner, live element editor, and responsive playground built specifically for Tailwind CSS v4. Extract, tweak, and generate production-ready configuration code from any website instantly. Stop jumping back and forth through complex DevTools cascades. Twift brings design inspection and code generation directly into a streamlined sidebar workspace. Key Features: Interactive Element Picker: Hover and click specific DOM components (buttons, cards, headers) to isolate their exact computed styles. Live Style Playground: Add, remove, or edit style properties directly within the side panel to fine-tune layout variables before exporting. Multi-Screen Breakpoint Support: Tweak styles across multiple responsive screens (Mobile, Tablet, Desktop) to automatically compile multi-viewport Tailwind code. Global Style Scan: Instantly read an entire webpage's root stylesheets to map out global design tokens. Side Panel UX: A dedicated side-by-side workspace that keeps your design reference visible alongside your generated code.