🖲️ Effortless Tailwind Styling at Your Fingertips

🏠 Getting Started

• 💫 What is Tailware?
• 🌟 Features
• 📥 Installation
• 📖 Usage
• 🔧 Development
• 🤲 Contributing
• ⚖️ License

💫 What is Tailware?

Tailware is a free and open-source Chrome extension designed to enhance the Tailwind CSS development experience. It provides real-time inspection and modification capabilities directly in your browser, making development faster and more intuitive.

We aim to make Tailwind CSS development more efficient and enjoyable for developers of all skill levels.

🌟 Features

• 🔮 Real-time Element Inspection - Hover to view Tailwind classes
• ✨ Visual Class Editor - Intuitive interface for adding/removing classes
• 📝 Basic Class Autocompletion - Get Tailwind class suggestions while typing
• 🎯 One-click Copy - Quickly copy elements or their classes
• 🖱️ Draggable Interface - Flexibly adjust tool window position
• ⚡ Zero Configuration - Start using immediately after installation
• 📑 Multi-tab Debugging - Inspect multiple pages simultaneously in different tabs

📥 Installation

Chrome Web Store (Recommended)

Install Tailware directly from the Chrome Web Store.

Manual Installation

1. Download the latest release from our GitHub Releases page
2. Open Chrome and navigate to chrome://extensions/
3. Enable "Developer mode" in the top right corner
4. Click "Load unpacked"
5. Select the downloaded release folder

📖 Usage

1. Click the Tailware icon in the Chrome toolbar to activate the extension
2. Hover over elements on the webpage to highlight them
3. Use the floating window to view and edit Tailwind classes

🔧 Development

Prerequisites

Requirement	Version
📦 Node.js	>= 16.x
🔄 pnpm	Latest
🌐 Chrome	Latest

Install Dependencies

First, ensure you have Node.js and pnpm installed. Then run:

pnpm install

This will install all the dependencies required for the project.

Build the Extension

Run the following command to build the extension:

pnpm build

Start the Development Server

To run the extension in development mode:

pnpm dev

This will start the development server and automatically rebuild the extension when files change.

Testing

Run the test suite with:

pnpm test

For watch mode during development:

pnpm test:watch

🤲 Contributing

Tailware is and will always be free and open source - built by developers, for developers. This decision stems from our core beliefs:

• 🌱 We serve developers, designers, and beginners in the Tailwind ecosystem
• 🔄 Our users can provide more professional and practical insights, creating a virtuous cycle of improvement
• 🌍 Open source enriches the entire Tailwind ecosystem

We believe that the capabilities of a small team are limited, but through community collaboration, we can create something truly remarkable. Whether you're:

• 🐛 Reporting bugs
• 💭 Suggesting features or sharing ideas
• 💻 Contributing code
• 📝 Improving documentation
• 🎨 Enhancing UI/UX
• 🌐 Helping with translations

Every contribution makes Tailware better for everyone. Feel free to open an issue for any suggestions or problems, or submit a pull request to contribute directly.

See our Contributing Guide for detailed information on how to get started.

Thank you to everyone who helps make Tailware better! ❤️

⚖️ License

This project is licensed under the GNU General Public License v3.0 with Additional Terms - see the LICENSE file for details. This means:

• You are free to use, modify, and distribute this software
• Any modifications must also be open source under GPL-3.0
• Distribution through browser extension stores requires permission
• The Tailware name and branding are protected