I'll create a simple button component along with the CSS file and Tailwind configuration for customization.
Explanation
- Button Component: A reusable button with three variants (primary, secondary, outline) and three sizes (sm, md, lg).
- globals.css: Contains the Tailwind directives and CSS variables for theming 1. The CSS variables allow for easy customization of colors and support dark mode.
- tailwind.config.ts: Configures Tailwind with custom colors, border radius, and box shadows 2. The colors use CSS variables, making them easy to change globally.
To customize the button:
- Change the CSS variables in
globals.cssto update colors throughout the application - Modify the
tailwind.config.tsto add new theme extensions - Add new variants or sizes to the button component
You can use this button in any component by importing it and passing the desired props:
import Button from '@/components/button'
// Primary button (default)
<Button>Click Me</Button>
// Secondary button with large size
<Button variant="secondary" size="lg">Submit</Button>
// Outline button with small size
<Button variant="outline" size="sm">Cancel</Button>348d ago
