Copy CSS styles with Tailwind classes

Latest Version

Version
0.0.1.1
Update
October 1, 2023
Size
161KiB
Developer
Category
Users
22
Rating
4 ★
Manifest Version
3
Web Store Status
Languages Support
English (United States)
See more
Permissions
ContextMenus
Tabs
ClipboardWrite
See more

GD Styles Extension

This extension is still in beta. Send any feedback to [email protected]

GD Styles is a free extension that allows the user to get Tailwind class names from the CSS styles of any element while in the DevTools. Restart your browser after installing the extension for it to work. There is a sidebar pane in the DevTools called 'GD Styles', if you right click on an element on the page and click 'Get Styles' the styles will show up in the sidebar pane. From there you can use the 'Copy' button to copy the styles directly to your clipboard.

I'm working on improving the extension and adding more styles. As of now, these CSS attributes are supported:

- Color
- Background color
- Border
- Border radius
- Font size
- Font weight
- Padding
Read more

Source Manifest.json

{"update_url": "https://clients2.google.com/service/update2/crx", "name": "GD Styles", "description": "Copy CSS styles with Tailwind classes", "version": "0.0.1.1", "manifest_version": 3, "icons": { "128": "assets/icon.png" }, "permissions": ["contextMenus", "tabs", "clipboardWrite"], "host_permissions": [""], "content_scripts": [ { "matches": [""], "run_at": "document_start", "js": ["dist/content.js", "dist/conversions.js", "dist/utilities.js"] } ], "action": { "default_popup": "src/popup/popup.html" }, "background": { "service_worker": "dist/eventPage.js" }, "devtools_page": "src/devtools/devtools.html"}
Read more

Similar Extensions

icon

WindChat-ChatGPT Tailwind CSS React Previewer Extension · Developer Tools 22 4 ★ 483KiB

icon

Gimli Tailwind Extension · Developer Tools 22 33 ★ 151KiB

icon

Copy as Plain Text - Format Cleaner Extension · Productivity 22 5 ★ 59.93KiB

icon

CopyCss - Copy css scan from any website. Extension · Developer Tools 22 10 ★ 246KiB

icon

Tailscan Extension · Developer Tools 22 16 ★ 1.92MiB

icon

CSS Override Extension Extension · Developer Tools 22 3 ★ 6.17KiB

icon

CSS Scan Extension · Developer Tools 22 84 ★ 1.41MiB

icon

DivMagic - Copy Style from any website Extension · Developer Tools 22 55 ★ 1.3MiB

icon

cssPicker - copy css from website Extension · Developer Tools 22 6 ★ 1021KiB

icon

CSS Selector Extension · Productivity 22 2 ★ 73.43KiB

icon

Html Style Copier Extension · Developer Tools 22 0 ★ 2.95MiB

icon

CSS Stripper Extension · Developer Tools 22 0 ★ 15.23KiB

icon

Tailwind CSS Devtools Extension · Developer Tools 22 7 ★ 857KiB

icon

CSS Selector Capture Pro Extension · Developer Tools 22 11 ★ 116KiB

icon

CSS Peeper Extension · Developer Tools 22 363 ★ 279KiB

icon

Font Finder Extension · Developer Tools 22 185 ★ 159KiB

icon

Sniper CSS Extension · Developer Tools 22 5 ★ 68.29KiB

icon

Built with Tailwind CSS Extension · Developer Tools 22 0 ★ 33.29KiB

icon

StyleSnipe Extension · Developer Tools 22 2 ★ 409KiB

icon

CSS Scanly - Copy CSS | Tailwind & Bootstrap Extension · Productivity 22 5 ★ 35.52KiB

icon

Figma to Flutter Converter Extension · Developer Tools 22 1 ★ 39.33KiB

icon

Supertweak Extension · Developer Tools 22 4 ★ 75.3KiB

icon

Tailwind Inspector Extension · Developer Tools 22 1 ★ 956KiB

icon

Bootstrap Deprecated Classes Extension Extension · Developer Tools 22 1 ★ 20.23KiB