Tailwind Bootstrap Lens

Instantly see Bootstrap equivalents for Tailwind CSS classes with intelligent highlighting and hover tooltips.

Stop switching between documentation tabs! Tailwind Bootstrap Lens automatically detects Tailwind classes in your code and shows you their exact Bootstrap equivalents right in your editor.

✨ Features

• 🎯 Automatic Detection - Scans class and className attributes across HTML, JSX, TSX, Vue, and more
• 👁️ Visual Highlighting - Underlines Tailwind classes with a distinctive blue wavy line for instant recognition
• 💡 Smart Tooltips - Hover over any highlighted class to see its Bootstrap equivalent
• ⚡ Real-time Updates - Works as you type with zero lag
• 📦 Zero Configuration - Install and start using immediately
• 🎨 Comprehensive Coverage - Supports 100+ common Tailwind utilities

Supported Class Categories

• Flexbox & Grid Layout
• Spacing (Margin & Padding)
• Typography & Text Styling
• Colors (Text & Background)
• Borders & Border Radius
• Width & Height
• Positioning
• Display Properties
• Shadows
• Overflow
• Visibility

🚀 Usage

1. Install the extension
2. Open any file with Tailwind classes (HTML, JSX, TSX, Vue, etc.)
3. Tailwind classes are automatically highlighted with a blue underline
4. Hover over any highlighted class to see the Bootstrap equivalent

Example

// Your Tailwind code
<div className="flex items-center justify-between p-4 bg-primary rounded-lg">
  <h1 className="text-2xl font-bold text-white">Hello World</h1>
</div>

// Hover shows Bootstrap equivalents:
// flex → d-flex
// items-center → align-items-center
// justify-between → justify-content-between
// p-4 → p-4
// bg-primary → bg-primary
// rounded-lg → rounded-3
// text-2xl → fs-2
// font-bold → fw-bold
// text-white → text-white

📋 Requirements

• Visual Studio Code version 1.60.0 or higher
• No additional dependencies required

🎯 Perfect For

• Migration Projects - Moving from Tailwind to Bootstrap
• Learning Bootstrap - Understanding Bootstrap's class naming after using Tailwind
• Hybrid Codebases - Working with projects that use both frameworks
• Team Collaboration - Helping team members familiar with one framework understand the other
• Quick Reference - No need to keep documentation tabs open

⚙️ Extension Settings

This extension works out of the box with no configuration needed.

Future versions may include:

• Customizable highlight colors
• Enable/disable for specific file types
• Custom class mappings

🐛 Known Issues

• Some advanced Tailwind utilities with complex responsive/state modifiers may not have direct Bootstrap equivalents
• Arbitrary values (e.g., w-[32rem]) are not mapped as they don't have Bootstrap equivalents
• JIT mode utilities may not be covered

Found a bug or missing mapping? Report it here

📝 Release Notes

1.0.0 (Initial Release)

• ✅ Automatic Tailwind class detection in class and className attributes
• ✅ Visual highlighting with blue wavy underlines
• ✅ Hover tooltips showing Bootstrap equivalents
• ✅ Support for 100+ common utility classes
• ✅ Multi-language support (HTML, JSX, TSX, JavaScript, TypeScript, Vue)
• ✅ Real-time decoration updates

🤝 Contributing

Have suggestions for additional class mappings or features? Contributions are welcome!

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

This extension is licensed under the MIT License.

💖 Support

If you find this extension helpful, please:

• ⭐ Star the repository
• 🐛 Report bugs and request features
• 📢 Share it with your team
• ✍️ Leave a review on the VS Code Marketplace

Made with ❤️ for developers bridging the Tailwind-Bootstrap gap

Enjoy coding! 🚀