Convert a website's styles to Tailwind CSS classes

Latest Version

Version

2.2.1

Update

September 23, 2023

Size

182KiB

Developer

CSS To Tailwind Extension

Automatically convert a website's CSS into TailwindCSS classes. Missing styles are added as arbitrary values.

Easy as:
1. Click the extension icon
2. Hover on the element you want to convert
3. Right click to copy the class names to clipboard

Features:
1. Hover an element to view its converted TailwindCSS Classes
2. Shows you which styles are missing from TailwindCSS
3. Copy just the class names or grab the entire element CSS styles

Short-comings:
1. Uses Document.styleSheets behind the scenes and stylesheets on different domains will not be taken into account

Source Manifest.json

{
"update_url": "https://clients2.google.com/service/update2/crx",
"icons":{"16":"icon16.plasmo.6c567d50.png",
"32":"icon32.plasmo.76b92899.png",
"48":"icon48.plasmo.aced7582.png",
"64":"icon64.plasmo.8bb5e6e0.png",
"128":"icon128.plasmo.3c1ed2d2.png"},
"manifest_version":3,
"action":{"default_icon":{"16":"icon16.plasmo.6c567d50.png",
"32":"icon32.plasmo.76b92899.png",
"48":"icon48.plasmo.aced7582.png",
"64":"icon64.plasmo.8bb5e6e0.png",
"128":"icon128.plasmo.3c1ed2d2.png"}},
"version":"2.2.1",
"author":"Richard Kaseke. ",
"name":"CSS To Tailwind",
"description":"Convert a website's styles to Tailwind CSS classes",
"background":{"service_worker":"static/background/index.js"},
"permissions":["storage"],
"content_scripts":[{"matches":[""],
"js":["content.06af5f40.js"],
"css":[]}],
"host_permissions":["https://*/*"],
"web_accessible_resources":[{"matches":[""],
"resources":["content.e2b1d2ad.css"]}]}

Download CRX(182KiB)

Similar Extensions

Windy Extension · Developer Tools 3,000+ 21 ★ 2.31MiB

Tailwind Devtools Extension · Developer Tools 3,000+ 8 ★ 103KiB

Devtools for Tailwind CSS Extension · Developer Tools 3,000+ 18 ★ 49.64MiB

Tailscan Extension · Developer Tools 3,000+ 16 ★ 1.92MiB

Tailwind Color Picker Extension · Developer Tools 3,000+ 6 ★ 345KiB

DivMagic - Copy Style from any website Extension · Developer Tools 3,000+ 55 ★ 1.3MiB

Tailwind UI React Extension · Developer Tools 3,000+ 7 ★ 376KiB

HTML to React Extension · Developer Tools 3,000+ 4 ★ 342KiB

Tailwind Cheat Sheet Extension Extension · Developer Tools 3,000+ 5 ★ 224KiB

Alpine.js devtools Extension · Developer Tools 3,000+ 34 ★ 67.78KiB

Tailwind CSS Devtools Extension · Developer Tools 3,000+ 7 ★ 857KiB

Gimli Tailwind Extension · Developer Tools 3,000+ 33 ★ 151KiB

Inspect Flow Extension · Developer Tools 3,000+ 5 ★ 900KiB

Tailwind CSS Media Query Inspector Extension · Developer Tools 3,000+ 4 ★ 631KiB

CSS Used Extension · Developer Tools 3,000+ 184 ★ 164KiB

Supertweak Extension · Developer Tools 3,000+ 4 ★ 75.3KiB

SnipCSS Extension · Developer Tools 3,000+ 32 ★ 13.12MiB

CSS Scan Extension · Developer Tools 3,000+ 84 ★ 1.41MiB

CSS Peeper Extension · Developer Tools 3,000+ 363 ★ 279KiB

Livewire devtools Extension · Developer Tools 3,000+ 16 ★ 1014KiB

Hoverify Extension · Developer Tools 3,000+ 145 ★ 14.54MiB

Jinno: code any React component with AI Extension · Developer Tools 3,000+ 38 ★ 18.37MiB

Laravel TestTools Extension · Developer Tools 3,000+ 67 ★ 449KiB

VisBug Extension · Developer Tools 3,000+ 252 ★ 5.38MiB

User reviews

James Singleton (ID: 0000008d3654402b) Voted 3 ★ - Updated 07/11/2023 It "works" to a degree... Clicking the extension to try and enable it doesn't seem to always work. For some reason I can't copy the styles, just open a codesandbox. However, it seems to only get a single element at a time. For example, I can't click on a ul, I can only get the individual li elements within it. But I mean the extension is free... so there's that.

Jeff Williams (ID: 000000c88aa12216) Voted 1 ★ - Updated 05/24/2023 You can use an extension called DivMagic instead of this one. DivMagic works perfectly.