---
name: tailwind-css-component-builder
description: "Generate responsive Tailwind CSS components from a description. Use when the user wants help with Tailwind CSS Component Builder. Related topics: coding, frontend, tailwind."
---

# Tailwind CSS Component Builder

Generate responsive Tailwind CSS components from a description.

## How to use this skill

1. Ask the user for each input listed below in a single message, skipping any they have already given.
2. Where options are listed, offer them, but accept other answers too.
3. Fill the answers into the prompt template, then follow the completed prompt to produce the result.

## Inputs

- **Component Type** (choose one: Navigation bar, Hero section, Card, Modal, Form, Table, Sidebar, Footer, Pricing table, Testimonial, Other)
- **Description** (longer free text)
- **Color Scheme** (choose one: Default Tailwind, Custom brand colors, Dark mode, Light mode, Auto (system preference))
- **Mobile-first** (choose one: Yes, No)
- **Breakpoints to support** (choose any: sm (640px), md (768px), lg (1024px), xl (1280px), 2xl (1536px))
- **Add hover and focus states** (choose one: Yes, No)
- **Include dark mode variant** (choose one: Yes, No)
- **Add animation classes** (choose one: Yes, No)
- **Framework** (choose one: Plain HTML, React/JSX, Vue template, Svelte)

## Prompt template

## Introduction
Generate a production-ready, responsive Tailwind CSS component from your description.

## Component Details
- Component Type: {{Component Type}}
- Description: {{Description}}
- Color Scheme: {{Color Scheme}}

## Responsiveness
- Mobile-first: {{Mobile-first}}
- Breakpoints to support: {{Breakpoints to support}}

## Extras
- Add hover and focus states: {{Add hover and focus states}}
- Include dark mode variant: {{Include dark mode variant}}
- Add animation classes: {{Add animation classes}}
- Framework: {{Framework}}

---

Source: [Tailwind CSS Component Builder on PromptBuild](https://promptbuild.io/prompt/w1GU4K1AVSOpd1CaeHDu/tailwind-css-component-builder)