Tailwind Gradient Builder

What it does

The Tailwind Gradient Builder skill allows you to generate CSS code for Tailwind gradients based on your specifications. It can create linear, radial, and conic gradients with custom colors and positions. This simplifies the process of adding visually appealing gradient backgrounds to web projects using Tailwind CSS.

When to use it

• You need a specific color gradient for a website section or element but don't want to manually calculate the background property in Tailwind.
• You are experimenting with different gradient combinations and want to quickly preview them.
• You want to generate gradient code that is compatible with your existing Tailwind CSS configuration.
• You need to create gradients for dark mode compatibility.

Key capabilities

• Generates linear, radial, and conic gradients.
• Supports custom color stops.
• Allows specification of gradient positions (e.g., angles, percentages).
• Creates code compatible with Tailwind CSS.

Example prompts

• "Generate a linear gradient from blue to green."
• "Create a radial gradient centered on red and yellow."
• “Give me a conic gradient that transitions from purple to orange at 45 degrees.”

Tips & gotchas

The skill requires familiarity with basic gradient concepts (linear, radial, conic) and color representation (e.g., hex codes, RGB). More complex gradient specifications may require iterative refinement of prompts to achieve the desired result.