Building Custom Components with Tailwind
Extract reusable components from Tailwind utility classes: @apply, component extraction patterns, the plugin API, design tokens, and strategies for maintaining consistency at scale.
8 posts · page 1 of 1
Extract reusable components from Tailwind utility classes: @apply, component extraction patterns, the plugin API, design tokens, and strategies for maintaining consistency at scale.
When to keep utilities inline, when to extract a component, and how to use @apply, variants, and cva without painting yourself into a corner.
Build a design system on top of Tailwind that stays consistent as the app grows. Tokens, components, variants, and the cva pattern explained.
Use Headless UI's accessible React components alongside Tailwind utilities to build menus, dialogs, comboboxes, and toggles that match your design system exactly.
A practical overview of how Tailwind CSS and shadcn/ui work together to give you a component library you can actually own and customize.
A practical guide to Astro components and layouts — frontmatter, typed props, slots, named slots, and the BaseLayout pattern every Astro project converges on for shared shell HTML.
Practical patterns for building reusable buttons, cards, and form controls in Tailwind — including variants, the @apply debate, and when to extract a component.
A thorough beginner's guide to React components and JSX — how JSX compiles, the rules that catch beginners, composition, conditional rendering, and rendering lists with keys.