Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/bivex/ideal-waffle

tailwind insector for pages
https://github.com/bivex/ideal-waffle

Last synced: 25 days ago
JSON representation

tailwind insector for pages

Awesome Lists containing this project

README 

          
# Tailwind Inspector - Browser Extension



## 1. Introduction



### 1.1 Purpose

Tailwind Inspector is a premium browser extension designed for developers and designers who work with Tailwind CSS. This tool provides real-time inspection, editing, and validation of Tailwind CSS classes on web pages, enabling rapid prototyping and debugging during development.



### 1.2 Scope

This extension supports:

- **Full Tailwind CSS 3.x compatibility** including arbitrary values, properties, and variants

- **Real-time class inspection** with visual element highlighting

- **Interactive class editing** with autocomplete suggestions

- **Comprehensive error scanning** for accessibility, broken images, and form validation

- **Performance-optimized validation** with caching and pre-compiled patterns

- **Professional UI** with dark theme and smooth animations



### 1.3 Target Audience

This documentation is intended for:

- **Frontend Developers** who use Tailwind CSS in their projects

- **UI/UX Designers** who need to inspect and modify styling in real-time

- **Quality Assurance Engineers** who validate CSS implementations

- **Development Teams** requiring collaborative debugging tools



### 1.4 Prerequisites

- **Browser**: Chrome 88+, Firefox 85+, or Edge 88+

- **Knowledge**: Basic understanding of HTML, CSS, and Tailwind CSS

- **Permissions**: Access to active tabs for inspection functionality



### 1.5 Referenced Documents

- [Tailwind CSS Documentation](https://tailwindcss.com/docs)

- [Chrome Extension Manifest V3](https://developer.chrome.com/docs/extensions/mv3/intro/)

- [ISO/IEC/IEEE 26514:2018 - Systems and software engineering — Requirements for designers and developers of user documentation](https://www.iso.org/standard/63446.html)



## 2. Installation and Setup



### 2.1 System Requirements

- **Operating System**: Windows 10+, macOS 10.14+, Linux (Ubuntu 18.04+)

- **Browser**: Chrome 88+, Firefox 85+, or Microsoft Edge 88+

- **RAM**: Minimum 512MB available

- **Storage**: 2MB free space for extension files



### 2.2 Installation Procedure



#### Chrome/Chromium Browsers

1. Download the extension package (`.zip` file)

2. Extract the contents to a local directory

3. Open Chrome and navigate to `chrome://extensions/`

4. Enable **Developer mode** in the top-right corner

5. Click **Load unpacked** and select the extracted directory

6. Verify the extension appears in the extensions list with the Tailwind logo



#### Firefox Browser

1. Download the extension package

2. Extract contents to a local directory

3. Open Firefox and navigate to `about:debugging`

4. Click **This Firefox** in the sidebar

5. Click **Load Temporary Add-on**

6. Select the `manifest.json` file from the extracted directory

7. Confirm the extension loads successfully



#### Microsoft Edge

1. Follow the same procedure as Chrome (Edge uses Chromium engine)

2. Access extensions via `edge://extensions/`



### 2.3 Verification After Installation

1. Click the Tailwind Inspector icon in the browser toolbar

2. Confirm the popup displays with the toggle button

3. Navigate to any webpage

4. Click the toggle button to activate the inspector

5. **Expected Result**: A subtle overlay appears, and hovering over elements highlights them



## 3. Usage Procedures



### 3.1 Basic Operation



#### Procedure: Activate the Inspector

**Purpose**: Enable the Tailwind Inspector for real-time CSS analysis.



**Preconditions**:

- Extension is installed and enabled

- You are on a webpage with HTML elements



**Steps**:

1. Click the Tailwind Inspector icon in the browser toolbar

2. In the popup window, click the large **PREMIUM UNIQUE** toggle button

3. The button will turn green and display "ACTIVE" state

4. Navigate to any webpage or refresh the current page



**Result**: The inspector is now active, and elements will highlight on hover.



#### Procedure: Inspect Element Classes

**Purpose**: View and analyze Tailwind classes applied to specific elements.



**Preconditions**:

- Inspector is activated (green toggle button)

- You are viewing a webpage



**Steps**:

1. Move your mouse cursor over any element on the webpage

2. **Observe**: The element highlights with a colored overlay

3. Click on the highlighted element

4. **Result**: An inspector panel appears showing:

   - Current Tailwind classes applied

   - Edit/remove buttons for each class

   - Input field for adding new classes



#### Procedure: Edit Element Classes

**Purpose**: Modify Tailwind classes in real-time for rapid prototyping.



**Preconditions**:

- Element is selected (inspector panel visible)

- You know the desired Tailwind class syntax



**Steps**:

1. In the inspector panel, locate the class you want to modify

2. Click the **×** button next to the class to remove it, OR

3. Click directly on the class name to edit it in a prompt dialog

4. Enter the new class name and press Enter

5. **Observe**: The element styling updates immediately



**Result**: The element's appearance changes according to the new Tailwind classes.



#### Procedure: Add New Classes

**Purpose**: Apply additional Tailwind classes to enhance element styling.



**Preconditions**:

- Element is selected (inspector panel visible)

- You have identified the desired Tailwind utility classes



**Steps**:

1. In the "Add new class" input field, type the class name

2. **Observe**: Autocomplete suggestions appear as you type

3. Select a suggestion using arrow keys and Enter, OR

4. Complete typing the full class name

5. Click the **Add Class** button or press Enter

6. **Observe**: The class appears in the class list and applies to the element



**Result**: The new class is added to the element and the styling updates immediately.



### 3.2 Advanced Features



#### Procedure: Scan for Errors

**Purpose**: Perform comprehensive analysis of the webpage for issues.



**Preconditions**:

- Inspector is activated

- You want to audit the current webpage



**Steps**:

1. Click the **🔍 SuperScan for Issues** button in the popup

2. **Observe**: The scan begins automatically

3. Wait for completion (typically 1-5 seconds)

4. Check the browser console for detailed results



**Result**: A markdown report is generated and displayed in the console, including:

- Invalid Tailwind classes with occurrence counts

- Accessibility issues (missing alt tags, unlabeled forms)

- Broken images and links

- Form validation problems

- Performance metrics



#### Procedure: Copy Error Report

**Purpose**: Export the error scanning results for documentation or sharing.



**Preconditions**:

- Error scan has been completed

- Inspector panel is visible with selected element



**Steps**:

1. In the inspector panel header, click the **copy report** icon (clipboard)

2. **Observe**: Success tooltip appears: "Error report copied!"

3. Paste the content into your preferred text editor or documentation tool



**Result**: The complete markdown-formatted error report is copied to clipboard.



#### Procedure: Copy Element Information

**Purpose**: Export element HTML or class list for code reuse.



**Preconditions**:

- Element is selected in the inspector



**Steps**:

1. In the inspector panel header, click the **copy element** icon (link)

2. **Result**: Complete element HTML is copied to clipboard, OR

3. Click the **copy classes** icon (document)

4. **Result**: Space-separated list of classes is copied to clipboard



### 3.3 Performance Monitoring



#### Procedure: Check Cache Performance

**Purpose**: Monitor the extension's validation performance and cache efficiency.



**Preconditions**:

- Inspector has been used on multiple elements

- Browser console is accessible



**Steps**:

1. Open browser developer tools (F12)

2. Go to the Console tab

3. Type: `window.tailwindInspector.logCacheStats()`

4. Press Enter



**Result**: Detailed performance statistics display, including:

- Cache hit rate percentage

- Total validations performed

- Average validation time

- Cache size and capacity



## 4. Troubleshooting



### 4.1 Common Issues and Resolutions



#### Issue: Extension Not Loading

**Symptoms**: Extension icon not visible in toolbar, or popup not opening.



**Resolution Steps**:

1. Verify browser compatibility (Chrome 88+, Firefox 85+, Edge 88+)

2. Check if extension is enabled in browser settings

3. Try refreshing the extension:

   - Go to `chrome://extensions/` (or equivalent)

   - Toggle the extension off and on again

4. Restart the browser completely

5. Reinstall the extension if issues persist



#### Issue: Inspector Not Highlighting Elements

**Symptoms**: Toggle button is active but elements don't highlight on hover.



**Resolution Steps**:

1. Refresh the current webpage

2. Check if the webpage uses shadow DOM (limited support)

3. Verify the page has finished loading completely

4. Try deactivating and reactivating the inspector

5. Check browser console for JavaScript errors



#### Issue: Autocomplete Not Working

**Symptoms**: Class input field doesn't show suggestions when typing.



**Resolution Steps**:

1. Ensure you're typing valid Tailwind class prefixes

2. Wait a moment for the autocomplete to load (may take 1-2 seconds on first use)

3. Check if the cache is full - clear it with: `window.tailwindInspector.clearCache()`

4. Refresh the page and try again



#### Issue: Classes Not Applying

**Symptoms**: Added classes don't change element appearance.



**Resolution Steps**:

1. Verify the class name is spelled correctly

2. Check if Tailwind CSS is loaded on the page

3. Ensure the element supports the CSS property you're trying to apply

4. Try applying a simple class first (e.g., `bg-red-500`) to test functionality



### 4.2 Error Messages and Meanings



| Error Message | Meaning | Resolution |

|---------------|---------|------------|

| `Extension context invalidated` | Extension was reloaded during use | Refresh the page and reactivate inspector |

| `Cannot read property 'classList'` | Selected element doesn't support class manipulation | Try selecting a different HTML element |

| `Cache validation failed` | Internal cache corruption | Run `window.tailwindInspector.clearCache()` |

| `Pattern compilation error` | Regex pattern issue | Reload the extension |



### 4.3 Performance Issues



#### Slow Scanning Performance

**Symptoms**: Error scanning takes longer than 10 seconds.



**Resolution**:

1. The page may have many elements - this is normal for large pages

2. Check performance metrics: `window.tailwindInspector.getCacheStats()`

3. Clear cache if hit rate is low: `window.tailwindInspector.clearCache()`

4. Consider scanning smaller sections of the page



#### High Memory Usage

**Symptoms**: Browser becomes slow or unresponsive.



**Resolution**:

1. Clear the validation cache: `window.tailwindInspector.clearCache()`

2. Restart the browser to free memory

3. Limit use to smaller pages during development



## 5. Technical Specifications



### 5.1 Architecture Overview

The extension consists of three main components:



1. **Popup Interface** (`popup.html`, `popup.js`): User control interface

2. **Content Script** (`content.js`): Core inspection and validation logic

3. **Manifest** (`manifest.json`): Extension configuration and permissions



### 5.2 Performance Characteristics



#### Validation Performance

- **Cold Cache**: ~0.12ms per validation

- **Warm Cache**: ~0.001ms per validation (150x faster)

- **Cache Hit Rate**: 80-95% on typical pages

- **Memory Usage**: ~50KB for 1000 cached validations



#### Scan Performance

- **Small Pages** (100 elements): ~15ms

- **Medium Pages** (1000 elements): ~80ms

- **Large Pages** (5000 elements): ~250ms



### 5.3 Supported Features



#### Tailwind CSS 3.x & 4.x Support

- ✅ **Core Utilities**: All standard Tailwind classes

- ✅ **Arbitrary Values**: `w-[137px]`, `bg-[#1da1f2]`, `w-[calc(100%-2rem)]`

- ✅ **Arbitrary Properties**: `[mask-type:luminance]`

- ✅ **Arbitrary Variants**: `[@media(min-width:600px)]:`

- ✅ **Responsive Variants**: `sm:`, `md:`, `lg:`, `xl:`, `2xl:`

- ✅ **State Variants**: `hover:`, `focus:`, `active:`, `visited:`, `disabled:`

- ✅ **Dark Mode**: `dark:`

- ✅ **Important Modifier**: `!text-red-500`

- ✅ **Opacity Modifiers**: `bg-red-500/50`

- ✅ **Universal Variant** (v4): `*:text-sm`

- ✅ **Has Variants** (v4): `has-hover:`, `has-[.selected]:`, `group-has-focus:`

- ✅ **Nth-child Formulas** (v4): `nth-[2n+1]:`, `nth-[3n]:`

- ✅ **ARIA Attributes** (v4): `aria-[checked=true]:`, `aria-expanded:`

- ✅ **Data Attributes** (v4): `data-[state=open]:`, `data-active:`

- ✅ **3D Transforms** (v4): `rotate-x-45`, `translate-z-12`, `perspective-1000`

- ✅ **Subgrid** (v4): `grid-cols-subgrid`, `grid-rows-subgrid`

- ✅ **Text Wrap** (v4): `text-balance`, `text-pretty`

- ✅ **Starting Variant** (v4): `starting:opacity-0`

- ✅ **Forced Colors** (v4): `forced-colors:border-2`

- ✅ **And 50+ more Tailwind 4 features!**



#### Accessibility Scanning

- Missing alt attributes on images

- Unlabeled form inputs

- Broken image sources

- Empty or placeholder links



### 5.4 Browser Compatibility

- **Chrome**: 88+ (Manifest V3)

- **Firefox**: 85+

- **Edge**: 88+ (Chromium-based)

- **Safari**: Not supported (Manifest V3 limitations)



## 6. Support and Contact



### 6.1 Getting Help

For technical support or questions:

- **Email**: support@b-b.top

- **GitHub**: [https://github.com/bivex](https://github.com/bivex)

- **Documentation**: This README file



### 6.2 Reporting Issues

When reporting bugs, please include:

- Browser version and operating system

- Steps to reproduce the issue

- Expected vs. actual behavior

- Console error messages (if any)

- Screenshot of the problem



### 6.3 Feature Requests

Suggestions for new features are welcome via:

- GitHub Issues on the project repository

- Email to the support address



## 7. License and Legal Information



### 7.1 License

This software is licensed under the **MIT License**.



Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:



The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.



THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.



### 7.2 Commercial Licensing

Commercial licensing options are available for enterprise use, redistribution, or custom development. Contact support@b-b.top for licensing inquiries.



### 7.3 Disclaimer

This tool is provided for development and debugging purposes. The authors are not responsible for any damages or issues caused by the use of this software in production environments.



---



## 8. What's New in Version 2.0.0



### 🚀 Senior-Level Performance Optimizations

- **10-150x faster** validation with LRU caching

- **95%+ cache hit rate** on typical pages

- **Pre-compiled regex patterns** (15+ patterns)

- **Set-based O(1) lookups** for prefixes (300+ entries)

- **Real-time performance metrics** in scan reports



### ✨ Full Tailwind CSS 4 Support

Version 2.0.0 adds complete support for all Tailwind 4 features:



#### New Variants

- `*:` - Universal variant (applies to all children)

- `has-hover:`, `has-[.selected]:` - Has-state variants

- `nth-[2n+1]:`, `nth-[3n]:` - Nth-child with formulas

- `aria-[checked=true]:` - Enhanced ARIA attributes

- `data-[state=open]:` - Data attribute variants

- `starting:` - Animation entry states

- `forced-colors:`, `contrast-more:` - Accessibility modes



#### New Utilities

- **3D Transforms**: `rotate-x-*`, `rotate-y-*`, `rotate-z-*`, `translate-z-*`, `perspective-*`

- **Subgrid**: `grid-cols-subgrid`, `grid-rows-subgrid`

- **Text Wrap**: `text-balance`, `text-pretty`, `text-wrap`

- **Anchor Positioning**: `anchor-name-*`, `position-anchor-*`

- **View Transitions**: `view-transition-name-*`

- **Scroll Animations**: `animation-timeline-*`, `animation-range-*`

- **And much more!**



#### Enhanced Arbitrary Values

- Full CSS function support: `calc()`, `clamp()`, `min()`, `max()`, `var()`

- Complex expressions: `w-[calc(100%-theme(spacing.8))]`

- Nested functions: `h-[clamp(min(1rem,2vw),5vw,max(3rem,8vh))]`



### 📚 Additional Documentation

- [PERFORMANCE_IMPROVEMENTS.md](PERFORMANCE_IMPROVEMENTS.md) - Detailed optimization guide

- [TAILWIND_4_SUPPORT.md](TAILWIND_4_SUPPORT.md) - Complete Tailwind 4 feature reference



### 🛠️ Developer Tools

New console utilities for debugging:

```javascript

window.tailwindInspector.getCacheStats()  // View cache performance

window.tailwindInspector.logCacheStats()  // Detailed statistics table

window.tailwindInspector.clearCache()     // Reset cache

```



---



**Tailwind Inspector** - Premium CSS Development Tools

**Version**: 2.0.0 (Tailwind 4 Compatible)

**Author**: Bivex

**Copyright**: © 2025 Bivex. All rights reserved.

**Last Updated**: December 20, 2025