jggapkmopfnbcolaeiigmammeiodbglc
Enhance Tailwind CSS workflow: Easily add, modify, remove, and copy classes with built-in Tailwind IntelliSense Introducing Toolwind: Tailwind CSS DevTool Chrome Extension π¨ Elevate your Tailwind CSS development experience to new heights with Toolwind, the ultimate Chrome extension designed for seamless class management. π Toolwind empowers developers and designers to streamline their workflow, effortlessly adding, editing, deleting, copying Tailwind classes, and even incorporating their own custom Tailwind configurations right from their browser. Say goodbye to the hassle of switching between your code editor and documentation β Toolwind brings the power of Tailwind CSS directly to your fingertips. β¨ Effortless Class Management π: Toolwind simplifies the process of working with Tailwind CSS classes. Browse a comprehensive library of classes, and add them to your code with just a click. Forget about the manual search and typing β Toolwind accelerates your development by reducing repetitive tasks. β© Real-time Class Editing βοΈ: Tailoring your designs has never been easier. Modify existing classes directly within the extension. Adjust attributes, values, and variations to achieve the perfect styling without the need to navigate back and forth between your code and documentation. π― Quick Class Deletion ποΈ: Cleaning up your code is a breeze with Toolwind. Delete unwanted or unused classes from your HTML or CSS effortlessly, maintaining a clean and organized project structure. π§Ή Copy to Clipboard π: Copying classes should be as simple as it sounds. Toolwind allows you to swiftly copy classes to your clipboard, ready to be pasted into your codebase. Say goodbye to manual copying and pasting β Toolwind improves accuracy and efficiency. βοΈ Customization with Custom Tailwind Configuration βοΈ: Tailwind CSS offers an array of customization possibilities, and Toolwind ensures you make the most of them. Adjust breakpoints, spacing, colors, and more, all while previewing the changes in real time. Integrate your own personalized Tailwind CSS configuration to perfectly align with your project's design requirements. π οΈ Intuitive UI πΌοΈ: Toolwind's user interface is designed with simplicity and functionality in mind. Navigating and utilizing the extension is a seamless experience, whether you're a seasoned developer or new to Tailwind CSS. π€ Search and Filtering π: With a vast collection of Tailwind classes, finding the right one can be daunting. Toolwindβs search and filtering capabilities let you quickly locate specific classes, components, or utilities. π Say hello to an extension that revolutionizes the way you work with Tailwind CSS. Toolwind saves you time, enhances your efficiency, and enables you to create stunning designs with ease. Embrace the future of Tailwind development β install Toolwind and take control of your CSS workflow directly from your Chrome browser. π
Live editor for CSS, Less & Sass - Magic CSS
Run this extension and start writing your CSS/Less/Sass code which gets applied immediately. The code you write will be saved in the browser extension's storage space or the site's local storage. β Live editor for CSS/Less/Sass code - Preview changes as you write code β Autocomplete β Live edit CSS files and auto-save on file system β Open code editor in external window β CSS reloader β Option to reapply styles automatically β Syntax Highlighting β Auto-generate CSS selectors with point-and-click β Emmet support β Color picker β Convert code from Less/Sass to CSS β Beautify / Format code β Minify code β Highlight DOM elements matching the CSS selectors β Option to load this extension in iframes as well β Get SVG icons β Lint CSS code This extension is available for: You might want to use it for: β€ No need to refresh pages to test your CSS/Less/Sass code β€ Auto-save your changes to filesystem as you write the code β€ Reload CSS resources without refreshing the page β€ Speed-up development by writing code directly on your page β€ Develop and test your code before finalizing your changes β€ Apply some temporary styles (like hiding some components) β€ Do CSS changes on any website β€ The CSS/Less/Sass code you write gets applied as you write it β€ The CSS reloader watches CSS files and live updates them immediately β€ You can develop the code and see the output at the same time β€ The code is saved in file/browser as soon as you write it β€ The code editor is draggable and resizable β€ Use code editor in external window for developing responsive pages β€ The code you write is auto-saved for the site β€ You can use "TAB" key to indent your code β€ Running Magic CSS again, while it is already loaded, disables the code β€ Press "Esc" or click on close to hide it β€ The code is added at the bottom of the tag β€ It includes CSS/Less/Sass beautifier β€ It includes CSS minifier β€ It highlights the DOM elements matching the CSS selectors β€ Use it along with Chrome/Edge/Firefox/Opera Developer tools β€ You might find it useful in creating your custom themes for websites based on Stylish / Stylist β€ This extension was previously known as "MagiCSS - Live CSS Editor" Security and privacy: β No permissions approval is required for installing the extension β For advanced features, like "Apply styles automatically", permissions are requested on-demand β Mixpanel is used to get anonymized stats for improving UX β Browser extension's storage, localStorage etc are utilized for the extension's core features. Visit https://webextensions.org/ for further details. Connect with us:
Tailwind CSS Devtools
All-in-one browser extension for Tailwind CSS Developer. Features π₯ π Quickly inspect edit and filter HTML elements with TailwindCSS utility classes. β¨ Support Tailwindcss Intellisense autocompletion for JIT mode. βοΈ Custom config support. Personal data π Tailwind CSS Devtools had never collected and will never collect any personal data, browsing history, etc. Tailwind CSS Devtools also doesn't share/care about your data at all.
CSS Scanly - Copy CSS | Tailwind & Bootstrap
Copy CSS properties from any web element with CSS Scanly. Supports Tailwind & Bootstrap, Helpful for developers and designers CSS Scanly: Inspect, Analyze, and Edit CSS in Real-Time Discover the power of advanced CSS inspection and editing with CSS Scanly, the must-have tool for web developers, designers, and CSS enthusiasts. This Chrome extension transforms how you interact with web page styles, providing an intuitive and feature-rich environment for exploring and manipulating CSS on any website. Hover over any element to instantly view its applied styles See computed styles, including those from stylesheets and inline CSS Explore pseudo-class styles etc. without leaving the page Edit CSS properties on-the-fly and see changes immediately Experiment with styles without affecting the original page Perfect for prototyping and troubleshooting design issues Automatically detects and highlights Bootstrap and Tailwind CSS classes Gain insights into how popular frameworks are used on different websites Pin multiple CSS information boxes for easy comparison Ideal for analyzing styles across different elements simultaneously 5. Copy-to-Clipboard Functionality Quickly copy any CSS styles with a single click Streamline your workflow by easily transferring styles to your projects View applied media queries for responsive design analysis Understand how styles change across different screen sizes Intuitive control bar for easy navigation and tool management Keyboard shortcuts for enhanced productivity Pause and resume the scanner as needed Move the control bar to your preferred location on the screen Perfect For: Web Developers seeking to debug CSS issues Designers looking to analyze and draw inspiration from other websites Students learning web design and CSS QA testers verifying style implementations Anyone curious about the styles behind their favorite websites Elevate your web development and design process with CSS Scanly. Download now and start scanning the world of CSS like never before!
Gimli Tailwind
A DevTools extension enabling smart tools for Tailwind CSS. The professional Devtools extension for Tailwind CSS developers. It lets you view and intuitively edit utility classes. Please note: Gimli Tailwind requires a $49 one-time lifetime license. No subscriptions. You can purchase your license via the extension (includes a 14-day money-back guarantee). βοΈ Autocomplete: Intelligent suggestions for class names. It also supports searching for CSS property names. βοΈ Quickly toggle utility values with Cmd/Ctrl + Click. βοΈ Intuitive UI We don't want to overwhelm developers with options and inputs. Hereβs a list of features that enable developers to find relevant utilities quickly: β€ Variant override: Displays what variant is active. β€ Inputs are grouped the same way as in the official docs. β€ Some sections like Grid and Flex will only be visible when relevant. β€ Active inputs are always shown. β€ Customizable UI.
