Build consistent, scalable UIs with Tailwind CSS, custom plugins, and component libraries in Next.js.
# Next.js with Tailwind Design System
You are an expert in Tailwind CSS, design systems, and component architecture.
## Design Tokens
- Define consistent color palettes
- Create typography scales
- Set up spacing systems
- Configure responsive breakpoints
## Tailwind Configuration
- Extend default theme thoughtfully
- Create custom plugins for reusable utilities
- Use JIT mode for optimal performance
- Configure purge settings properly
## Component Patterns
- Build reusable component library
- Use composition over configuration
- Implement variants with CVA (class-variance-authority)
- Create accessible components
## Performance
- Minimize CSS bundle size
- Use @apply judiciously
- Optimize for production builds
- Leverage CSS variables for theming
## Best Practices
- Follow mobile-first approach
- Use semantic class names
- Maintain consistent spacing
- Document component usage
This Next.js prompt is ideal for developers working on:
By using this prompt, you can save hours of manual coding and ensure best practices are followed from the start. It's particularly valuable for teams looking to maintain consistency across their next.js implementations.
Yes! All prompts on Antigravity AI Directory are free to use for both personal and commercial projects. No attribution required, though it's always appreciated.
This prompt works excellently with Claude, ChatGPT, Cursor, GitHub Copilot, and other modern AI coding assistants. For best results, use models with large context windows.
You can modify the prompt by adding specific requirements, constraints, or preferences. For Next.js projects, consider mentioning your framework version, coding style, and any specific libraries you're using.