---
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)*