Changelog

All the latest updates, improvements, and fixes.

UI Rewrite & Image Conversion

Okay, here are a few bullet points summarizing the updates for a non-technical audience, suitable for a changelog or blog post:

  • Now Supports the Latest Tailwind CSS V4 & V4.1! Our converter tool is now fully up-to-date, understanding the newest class names and features introduced in Tailwind V4 and the recent V4.1 release.
  • Choose Your Version: You now have the flexibility to convert your existing styles to either the classic Tailwind CSS V3 syntax or the modern V4/V4.1 syntax, making it perfect for any project.
  • Accurate V3 vs. V4 Conversion: We've carefully updated the tool to recognize the differences between V3 and V4 (like changes to shadows, outlines, and more), ensuring the generated Tailwind classes are correct for the version you select.
  • Includes New V4.1 Features: When converting to V4, the tool now supports exciting new design capabilities from V4.1, including text shadows, element masking, colored drop shadows, and new options for different screen types.
  • Smoother Workflow for All Tailwind Users: Whether you're maintaining an older project or starting fresh with the latest Tailwind, this tool provides a more accurate and flexible way to translate your styles into utility classes.
  • Tailwind Cheatsheet now supports Tailwind V3 measure

UI Rewrite & Image Conversion

  • JFIF image conversion (better lossless compression)
  • Added URL conversion for background-image & media query
  • Rewrite UI to ensure consistent display and interactivity on different sites measure ** before -> after (UI was appearing differently on different sites)

Export To CodePen & Improvements

🎨 New Design Toolbar Features

FeatureDescription
🔍 Font IDIdentify fonts on any webpage instantly.
🎨 Color PickerGrab any color from the screen with ease.
📏 Measurement ToolMeasure elements & spacing precisely.
📐 Show GridsDisplay layout grids for better UI analysis.

Perfect for frontend devs, designers & anyone working with UI! fontid colorpicker grid measure

  • Implement CodePen export and update Clipboard export options.
  • Add export options for Clipboard or CodePen in conversion settings.
  • Improve HTML tag and attribute filtering for unknown tags.
  • Implement HTML tag and attribute filtering for optimize reduced output.
  • Enhance logical property conversion for converting longhand css to shorthand to reduce output.
  • Improved stylesheets filtering for extracing accurate styles relating to element.
  • Right click on Webp images and conver to PNG or JPG measure

Support for Tailwind 4 & Resolving Stylesheets

  • Incrementally adding support such as 'padding-inline' conversion to Tailwind V4 rem units.
  • Utility to convert values to the nearest Tailwind rem units. reletive path
  • Convert to nearest Tailwind color (available as UI option soon) reletive path
  • Improve media query parsing and simplify media condition output.
  • Add oklch color conversion for Tailwind V4 Color support.
  • Add Calc resolver for resolving stylesheet calc values in the output
  • Add Var resolver for resolving styleseet var values in the output
  • Improve media query to support flex and grid styles.

Extension Memory & Tools

  • Extension - Update responsive media query
  • Extension - Remove cached stylesheets memory after conversion
  • Extension - Display stylesheet file size when large file is detected and display conversion time
  • Tools - Updated Tailwind Grid Generator
  • Tools - New Tailwind Cheat Sheet

Playground & Rewrite

  • Launched Code Playground 🎉
  • Rewrite converter to ouptut HTML, CSS, JS separately for Playground
  • Optimize converter for better performance
  • Fix toast notification during processing
  • Enable Code Playground CDN libraries
  • Designer Toolbar WIP
  • Fix Code Playground split pane issue reletive path

Meida Query & Optimizations

  • Complete Media Query Conversion

  • Fully Implemented the new UI along with all the planned features! 🎉

  • From old UI 🡆 new UI

    reletive path 🡆 reletive path
  • Implement purging of styles to reduce uncessary css styles

  • 30%+ reduced conversion output from optimizations of the same code block without change in rendered styles reletive path

  • Include srcset and poster attributes when converting "video" and "img" elements

  • Improved popup loading screen when clicked on the browser icon

Beta & New Menu

  • Released Firefox extension! 🎉
  • Add additional styles conversions
  • More improvements on shortening conversion
  • Update JSX & CSS formatter for better readability
  • New UI Draft 🤩 reletive path
  • Add Beta licensing generation in Dashboard
  • Previously you need to message the Admin for a Beta License Key. You can now generate your own in the Dashboard reletive path

V1 Release and WebApp

  • V1 release! 🎉🎉🎉🎉
  • Create and Deploy WebApp
  • Implemented Licensing Server
  • Bind "Try" Button with Browser Extension on Home page
  • Migrated Extension to new setup for better cross browser compilation
  • HTML to JSX conversion
  • Local CSS style conversion
  • Convert to short hand CSS styles
  • WIP: Updated Media Queries
  • WIP: Other conversion options
  • WIP: Auth & Dashboard

Better Converter and React

  • Completed: TailwindCSS Converter V2
  • Format and prettify output
  • Copy result to clipboard
  • UI rewrite from DOM to React for better maintainability
  • Update iframe handling when working in React
  • Update UI Design
  • Add Toaster for notifications

Handling Nested Elements and Iframes

  • Completed: Recursive Functionality to convert nested elements
  • Iframe handling for when elements are inside of iframes
  • Update iframe handling for different iframe cases
  • Disallow highlight when mouseover Extension UI elements
  • WIP: TailwindCSS Converter V2 iteration

Convert Images and Other Improvements

  • Convert Images with correct path when copied to external sources

  • Other additional Development Improvements and Bug Fixes

    • Resolve Extension importing library issues
    • semantic-release, changelog and commit linting
  • Design logo and branding

  • Implemented UI

  • WIP: Recursive Functionality to convert nested elements

Added Testing and Media Queries

  • Add testing to ensure conversion accuracy
  • Updated the module path for TypeScript
  • Implemented media queries
  • Reset highlighted element when browser icon clicked

Introducing Pastaable

  • Port over existing implementation to TypeScript
  • Use different highlight colors when clicked and selected
  • Enable keyboard movements for selection
  • Filtered more accurate element CSS styles for conversion
  • Implemented CSS to Tailwind converter