Tailwind CSS Component Library

Generate a production-ready Tailwind CSS component library and design system with custom components, utilities, and framework integrations for the following requirements:

Project Overview

Application Details

• Framework: [React / Next.js / Vue / Nuxt / Svelte / SvelteKit / Astro]
• Tailwind Version: [3.x / 4.x / Latest]
• TypeScript: [Yes / No]
• Dark Mode: [Yes / No / System preference]
• Component Format: [CSS classes with @apply / React components / Vue components / Both]

Design System Requirements

• Brand Colors: [Primary, secondary, accent colors]
• Typography Scale: [Font families, sizes, weights]
• Spacing Scale: [Custom spacing or default]
• Border Radius: [Sharp / Rounded / Custom]
• Shadow System: [Subtle / Prominent / Custom]

Components to Create

Button Component

• Variants:

  • Primary: [Brand color, high emphasis]
  • Secondary: [Neutral color, medium emphasis]
  • Tertiary/Ghost: [Transparent, low emphasis]
  • Danger/Destructive: [Red/error color]
  • Success: [Green color]
  • Outline: [Border only variants]
  • Link: [Text-only, no background]

• Sizes:

  • xs: [Extra small, compact]
  • sm: [Small]
  • md: [Medium, default]
  • lg: [Large]
  • xl: [Extra large]

• States:

  • Default: [Normal state]
  • Hover: [Hover effect]
  • Active: [Pressed state]
  • Disabled: [Disabled appearance]
  • Loading: [Loading spinner]

• Additional Features:

  • Icon Support: [Left icon / Right icon / Icon only]
  • Full Width: [w-full option]
  • Rounded: [Pill-shaped option]

Card Component

• Variants:

  • Default: [Standard card with shadow]
  • Bordered: [Border instead of shadow]
  • Elevated: [Higher shadow]
  • Flat: [No shadow or border]

• Sections:

  • Card Header: [Title area with optional actions]
  • Card Body: [Main content area]
  • Card Footer: [Footer with actions or meta]
  • Card Image: [Optional image at top]

• Features:

  • Hover Effect: [Lift on hover / Border change]
  • Clickable: [Entire card clickable]
  • Dark Mode: [Dark variant styles]

Form Components

Input

• Types: [text, email, password, number, search, tel, url]

• Variants:

  • Default: [Standard input]
  • Filled: [Filled background]
  • Outlined: [Border only]
  • Underlined: [Bottom border only]

• States:

  • Default: [Normal state]
  • Focus: [Focus ring and border]
  • Error: [Error state with red border]
  • Disabled: [Disabled appearance]
  • Read-only: [Read-only state]

• Features:

  • Label: [Associated label]
  • Helper Text: [Description below input]
  • Error Message: [Error text]
  • Icon: [Left/right icon support]
  • Sizes: [sm, md, lg]

Select/Dropdown

• Variants: [Default, filled, outlined]
• States: [Default, focus, error, disabled]
• Features: [Label, helper text, error message, icon]

Checkbox & Radio

• Variants: [Default, custom styled]
• States: [Unchecked, checked, indeterminate, disabled]
• Features: [Label, description, error state]

Textarea

• Variants: [Default, filled, outlined]
• States: [Default, focus, error, disabled]
• Features: [Auto-resize, character count, rows]

Switch/Toggle

• Variants: [Default, small, large]
• States: [Off, on, disabled]
• Features: [Label, description]

Badge/Pill Component

• Variants:

  • Default: [Neutral gray]
  • Primary: [Brand color]
  • Success: [Green]
  • Warning: [Yellow/orange]
  • Danger: [Red]
  • Info: [Blue]

• Sizes: [sm, md, lg]

• Features:

  • Dot Indicator: [Colored dot]
  • Removable: [Close button]
  • Rounded: [Pill shape vs square]

Alert/Notification Component

• Variants:

  • Info: [Blue, informational]
  • Success: [Green, success message]
  • Warning: [Yellow, warning message]
  • Error: [Red, error message]

• Features:

  • Icon: [Status icon]
  • Title: [Alert title]
  • Description: [Alert message]
  • Dismissible: [Close button]
  • Actions: [Action buttons]

Modal/Dialog Component

• Variants:

  • Default: [Standard modal]
  • Small: [Compact modal]
  • Large: [Wide modal]
  • Full Screen: [Mobile full screen]

• Features:

  • Overlay: [Dark backdrop]
  • Close Button: [X button]
  • Header: [Modal title]
  • Body: [Content area]
  • Footer: [Action buttons]
  • Scrollable: [Scroll long content]

Dropdown Menu Component

• Features:
  • Trigger: [Button or custom trigger]
  • Menu Items: [Clickable items]
  • Dividers: [Section separators]
  • Icons: [Item icons]
  • Submenus: [Nested menus]
  • Positioning: [Auto-position]

Tabs Component

• Variants:

  • Underline: [Underline indicator]
  • Pills: [Pill-shaped tabs]
  • Bordered: [Bordered tabs]

• Features:

  • Active State: [Highlighted active tab]
  • Disabled Tabs: [Disabled state]
  • Icons: [Tab icons]
  • Vertical: [Vertical orientation]

Tooltip Component

• Positions: [Top, bottom, left, right]
• Variants: [Dark, light]
• Features:
  • Arrow: [Pointing arrow]
  • Delay: [Show/hide delay]
  • Max Width: [Content wrapping]

Loading/Spinner Component

• Variants:

  • Spinner: [Circular spinner]
  • Dots: [Bouncing dots]
  • Bars: [Loading bars]
  • Skeleton: [Skeleton screens]

• Sizes: [sm, md, lg]

• Colors: [Primary, white, custom]

Avatar Component

• Variants:

  • Image: [User image]
  • Initials: [Text initials]
  • Icon: [User icon]

• Sizes: [xs, sm, md, lg, xl]

• Features:

  • Status Indicator: [Online/offline dot]
  • Border: [Optional border]
  • Rounded: [Circle vs square]

Table Component

• Features:
  • Header: [Table header row]
  • Body: [Table rows]
  • Footer: [Table footer]
  • Striped Rows: [Alternating colors]
  • Hoverable Rows: [Hover effect]
  • Bordered: [Cell borders]
  • Compact: [Dense spacing]

Pagination Component

• Features:
  • Page Numbers: [Numbered pages]
  • Previous/Next: [Navigation buttons]
  • First/Last: [Jump to ends]
  • Page Size: [Items per page selector]
  • Total Count: [Total items display]

Breadcrumb Component

• Features:
  • Separator: [/ or > or custom]
  • Current Page: [Highlighted]
  • Icons: [Home icon, etc.]
  • Truncation: [Collapse middle items]

Progress Bar Component

• Variants:

  • Linear: [Horizontal bar]
  • Circular: [Circular progress]

• Features:

  • Percentage: [Show percentage]
  • Label: [Progress label]
  • Colors: [Success, warning, etc.]
  • Animated: [Animated fill]

[Define additional components as needed]

Custom Utilities

Utility 1: [text-balance]

• Purpose: [Better text wrapping]
• Implementation: [text-wrap: balance]

Utility 2: [scrollbar-hide]

• Purpose: [Hide scrollbars]
• Implementation: [Hide scrollbar styles]

Utility 3: [gradient-text]

• Purpose: [Gradient text effect]
• Implementation: [Background clip text]

Utility 4: [glass-morphism]

• Purpose: [Frosted glass effect]
• Implementation: [Backdrop blur with transparency]

[Define 5-10 custom utilities]

Tailwind Configuration

Theme Customization

Colors

• Primary: [#color or Tailwind color scale]
• Secondary: [#color or scale]
• Accent: [#color or scale]
• Success: [Green scale]
• Warning: [Yellow/orange scale]
• Error/Danger: [Red scale]
• Info: [Blue scale]
• Neutral/Gray: [Gray scale]

Typography

• Font Families:

  • Sans: [Inter, system-ui, etc.]
  • Serif: [Georgia, etc.]
  • Mono: [Fira Code, etc.]

• Font Sizes: [Custom scale or default]

• Font Weights: [Custom weights]

• Line Heights: [Custom line heights]

Spacing

• Custom Spacing: [Additional spacing values]
• Container Padding: [Responsive padding]

Border Radius

• Sizes: [none, sm, md, lg, xl, 2xl, full]
• Custom Values: [Custom radius values]

Shadows

• Elevation Levels: [sm, md, lg, xl, 2xl]
• Custom Shadows: [Brand-specific shadows]

Breakpoints

• Custom Breakpoints: [xs, sm, md, lg, xl, 2xl, 3xl]

Plugins

Plugin 1: [Custom Container]

• Purpose: [Centered container with max-width]
• Configuration: [Max-width, padding]

Plugin 2: [Custom Components]

• Purpose: [Add component classes]
• Components: [List components to add]

Plugin 3: [Custom Utilities]

• Purpose: [Add utility classes]
• Utilities: [List utilities to add]

[Define 2-5 custom plugins]

Framework Integration

React Components

Component Structure

• Props Interface: [TypeScript props]
• Variants: [Variant prop for different styles]
• Sizes: [Size prop]
• ClassName Merging: [Allow custom classes]
• Ref Forwarding: [Forward refs]

Example: Button Component

interface ButtonProps {
  variant?: "primary" | "secondary" | "danger"
  size?: "sm" | "md" | "lg"
  fullWidth?: boolean
  disabled?: boolean
  loading?: boolean
  leftIcon?: React.ReactNode
  rightIcon?: React.ReactNode
  children: React.ReactNode
  onClick?: () => void
  className?: string
}

Vue Components (if Vue)

Component Structure

• Props: [Vue props definition]
• Slots: [Named slots for flexibility]
• Emits: [Event emitters]
• Composables: [Reusable logic]

Storybook (if needed)

• Stories: [Story for each component variant]
• Controls: [Interactive controls]
• Documentation: [Component docs]

Dark Mode

Dark Mode Strategy

• Method: [Class-based / Media query / System preference]
• Toggle: [Dark mode toggle component]
• Persistence: [LocalStorage / Cookie]

Dark Mode Styles

• Background Colors: [Dark backgrounds]
• Text Colors: [Light text on dark]
• Border Colors: [Subtle borders]
• Component Variants: [Dark variants for all components]

Accessibility

ARIA Attributes

• Buttons: [role, aria-label, aria-pressed]
• Forms: [aria-invalid, aria-describedby]
• Modals: [aria-modal, aria-labelledby]
• Dropdowns: [aria-expanded, aria-haspopup]

Keyboard Navigation

• Focus Styles: [Visible focus rings]
• Tab Order: [Logical tab order]
• Keyboard Shortcuts: [ESC to close, etc.]

Screen Reader Support

• Labels: [Proper labels for all inputs]
• Live Regions: [aria-live for dynamic content]
• Hidden Content: [sr-only class for screen reader only text]

Code Generation Requirements

Generate a complete Tailwind CSS component library including:

1. Tailwind Configuration:

   • Complete tailwind.config.js with theme customization
   • Custom colors, typography, spacing, shadows
   • Breakpoints and container configuration
   • Dark mode configuration
   • Plugins for custom components and utilities

2. CSS Component Classes:

   • @layer components with all component styles
   • Button variants and sizes
   • Card components
   • Form components (input, select, checkbox, etc.)
   • Badge, alert, modal, dropdown, tabs, tooltip
   • Avatar, table, pagination, breadcrumb, progress
   • Dark mode variants for all components

3. Custom Utilities:

   • @layer utilities with custom utility classes
   • Text utilities, scrollbar utilities, gradient utilities
   • Glassmorphism, animations, etc.

4. React Components (if React):

   • TypeScript component files for all components
   • Props interfaces with variants, sizes, states
   • ClassName merging with clsx or cn utility
   • Ref forwarding for all interactive components
   • Proper TypeScript types

5. Vue Components (if Vue):

   • Vue 3 composition API components
   • Props, slots, emits definitions
   • Composables for shared logic
   • TypeScript support

6. Component Documentation:

   • Usage examples for each component
   • Props documentation
   • Variant examples
   • Accessibility notes

7. Storybook Stories (optional):

   • Story file for each component
   • All variants and states
   • Interactive controls
   • Documentation pages

8. Utility Functions:

   • cn() function for className merging
   • Color manipulation utilities
   • Responsive utilities

9. Dark Mode Implementation:

   • Dark mode toggle component
   • Theme persistence logic
   • Dark variants for all components

10. Testing Setup (optional):

    • Component tests
    • Visual regression tests
    • Accessibility tests

Output production-ready Tailwind component library following best practices with:

• Consistent design system with theme tokens
• Reusable component classes with @apply
• Framework components (React/Vue) with proper TypeScript
• Dark mode support for all components
• Accessibility features (ARIA, keyboard navigation, focus styles)
• Responsive design for all components
• Customizable via props and className
• Well-documented with examples
• Storybook for component showcase
• Proper semantic HTML
• Performance optimized (PurgeCSS ready)
• Maintainable and scalable architecture