Skip to main contentOverview
The Tailwind Class agent quickly adds or modifies Tailwind CSS classes to style elements with precision and efficiency. It’s the most cost-effective agent for simple styling changes.
Credit Cost
- Standard: 5 credits (lowest cost)
Features
- Quick styling changes
- No loading mask (instant feedback)
- Sanitized HTML output
- Minimal credit usage
| Tool | Description |
|---|
| Existing Classes | Current Tailwind classes |
How to Use
- Select the element you want to style
- Right-click and select Tailwind Class
- Describe the styling change
- Classes update instantly
Sample Prompts
Centering
“Center this element”
Shadows
“Add shadow and rounded corners”
Spacing
“Add more padding”
Colors
“Make the background blue”
Typography
“Make text larger and bold”
Responsive
“Hide on mobile”
Best Use Cases
- Quick color changes
- Spacing adjustments
- Adding shadows or borders
- Responsive visibility
- Simple layout tweaks
When to Use Other Agents
| Need | Use Instead |
|---|
| Content changes | Element Editor |
| Complex redesign | Block Editor |
| New elements | Block Creator |
Tips
- Most cost-effective for simple changes
- Use for iterative styling adjustments
- Combine multiple changes in one prompt
- Great for responsive tweaks
