Spaces:
No application file
No application file
| 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 | |
| ## Pricing | |
| - **Demo**: Free on Hugging Face Spaces | |
| - **Full Source Code**: $14.99 | |
| --- | |
| *Built with [FORGE-X](https://github.com/WealthFromAI)* | |