Spaces:
No application file
No application file
File size: 1,543 Bytes
9e04227 886c53e f4b4200 9e04227 f4b4200 9e04227 886c53e 9e04227 f4b4200 886c53e 9e04227 886c53e 90d9bc6 886c53e 90d9bc6 886c53e f4b4200 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | ---
title: "Tailwind CSS Component Preview Extension"
emoji: "🤖"
colorFrom: blue
colorTo: indigo
sdk: gradio
sdk_version: "4.44.0"
app_file: app.py
pinned: false
license: mit
---
# Tailwind CSS Component Preview Extension
Analyzes any webpage for Tailwind CSS utility class usage. Detects Tailwind components, counts utility classes by category, and shows which design patterns are used on the page.
## Key Features
- Detects whether a page uses Tailwind CSS
- Counts utility classes by category: colors, spacing, layout, typography
- Shows the most frequently used Tailwind classes on any page
- Identifies how many elements use Tailwind utilities vs plain CSS
- Helps developers learn Tailwind patterns from live sites
## How It Works
Click the extension icon on any webpage. The extension scans all DOM elements, identifies Tailwind CSS utility classes, and categorizes them by function (color, spacing, layout, typography). Results display instantly in the popup — no page reload needed.
## What You Get
- One-click Tailwind CSS detection and analysis
- Class categorization by utility type
- Works on any website — inspect any site's Tailwind usage
- Privacy-first — all analysis runs locally in your browser
## Get the Full Version
- **Demo**: Free on Hugging Face Spaces
- **[Buy on Whop](https://whop.com/tailwind-css-component-preview-extension)** — Dashboard access
- **[Buy Now](https://buy.stripe.com/3cI8wPcLl5wgg889rKcZb1C)** — Secure checkout
---
*Built with [FORGE-X](https://github.com/WealthFromAI)*
|