Pastaable

GET A FREE TRIAL LICENSE KEY WHEN YOU SIGN UP!

Pastaable 🍝 – Copy, Paste & Design with Ease
Pastaable (pronounced PASTE-able, as in copy and paste, and able to make your coding life easier. Also, a tribute to delicious pasta 🍝 and spaghetti code jokes).

Supercharge your frontend workflow with Pastaable! Convert any element to Tailwind CSS with a single click and streamline your development process.

New! Design Toolbar for Developers & Designers
Pastaable now includes a powerful design toolbar packed with essential tools:
✅ Font ID – Instantly identify fonts on any webpage
🎨 Color Picker – Extract colors effortlessly
📏 Measurement Tool – Measure elements & distances between them
📐 Show Grids – Display layout grids for better alignment

Easily copy any element from any website, including iframes, and convert it into usable code in seconds.

Recent Updates:
* v3.2.2: Fix extension not showing up on websites
* v3.2.1: Fix dark mode in shadow root affecting host's default theme
* v3.2.0: Upgrade to handle TailwindV4 (2xs, xs, padding-inline, padding-block, text-shadow, etc)
* v3.1.3: Update color package to handle convert TailwindV4 OKLCH colors
* v3.1.2: UI related fixes
* v3.1.1: Support for JFIF image conversion
* v3.1.0: Rewrite UI to ensure consistent display and interactivity on different sites
* v3.0.5: Update font files download and UI prevent propagation
* v3.0.4: ContextMenu for image conversion
* v3.0.3: Update DesignToolbar behavior
* v3.0.2: Improved media query
* v3.0.1: Adjust overly aggressive media query optimizations
* v3.0.0: Launched Design Toolbar
* v2.0.9: Enable export to CodePen button
* v2.0.8: Implemented HTML element and attribute filters to reduced output
* v2.0.7: Add var and calc resolver for better css values accuracy
* v2.0.6: Convert to nearest Tailwind responsive breakpoints
* v2.0.5: Outer width height media query adjustments
* v2.0.4: Clear stylesheets memory, display stylesheet size
* v2.0.3: Optimized cached stylesheets memory
* v2.0.2: Update responsive media query
* v2.0.1: Fix stylesheets loading loop
* v2.0.0: Rewrite converter to output HTML, CSS, JS separately ready for playground
* v1.0.19: Fix overly aggressive optimization
* v1.0.18: Add copy element CSS Styles box
* v1.0.17: Fix media query
* v1.0.16: Optimized output and media Query
* v1.0.15: Add recursive conversion option
* v1.0.14: UI copy selector, secure and validate license
* v1.0.13: Enabled media query
* v1.0.12: Enabled menu dragging for easier navigation
* v1.0.11: Enhanced CSS conversion by converting longhands to shorthands
* v1.0.10: New menu implementation for a more seamless experience
* v1.0.9: Reduce Tailwind Classes lengths and added tests for improved conversion
* v1.0.0: Finalized migration to new stack and published Firefox addon

How to Use?
1. Click the extension icon. Enter your license key to login. (Refresh the page if highlight is not visible)
2. Click on any element and select.
3. Use arrow keys to navigate selection between parent, child element.
4. Press "Enter" or click "Copy" button to copy.