Getting Started with Tifoo

Tifoo is a Chrome extension designed to enhance your Tailwind CSS development experience. Let's get you started with the basics.

Quick Installation

1. Visit the Chrome Web Store
2. Search for "Tifoo" or use our direct link
3. Click "Add to Chrome"
4. You're ready to go!

Core Features

1. Visual Class Editor

• Browse and search Tailwind classes
• Real-time preview of changes
• Quick apply/remove functionality
• Intuitive drag-and-drop interface

2. Smart Suggestions

• Context-aware class suggestions
• Popular class combinations
• Recently used classes history
• Tailwind CSS best practices

3. Class Management

• Organize classes by category
• Easy class removal
• Class conflict detection
• Clean and maintainable code

Basic Usage

1. Select an Element

   • Right-click any HTML element on your page
   • Choose "Inspect Element"
   • The element will be highlighted in the Elements panel

2. Open Tifoo

   • Click the Tifoo extension icon in your browser
   • The Tifoo interface will appear next to the Elements panel

3. Apply Classes

   • Browse available classes by category
   • Search for specific styles
   • Preview changes in real-time
   • Click to apply selected classes

Tips for Beginners

1. Start Simple

   • Begin with basic layout classes
   • Gradually add styling classes
   • Use the preview feature to understand effects

2. Learn the Categories

   • Layout (flex, grid, position)
   • Spacing (margin, padding)
   • Typography (text, font)
   • Colors and Backgrounds
   • Borders and Shadows

3. Use the Preview

   • Preview changes before applying
   • Experiment with different combinations
   • Understand responsive behavior

4. Stay Organized

   • Group related classes together
   • Remove unused classes
   • Keep your code clean

Next Steps

• Explore advanced styling techniques
• Join our growing community
• Share your feedback and suggestions
• Check out our tutorials and guides

Need help? Visit our GitHub issues page for support or to report bugs.