Component Examples
Learn how to build common UI components using utility classes.
Overview
Unlike many other CSS frameworks, Tailwind doesn't include any component classes like form-input, btn, card, or navbar.
Tailwind is a CSS framework for implementing custom designs, and even a component as simple as a button can look completely different from one site to another, so providing opinionated component styles that you'd end up wanting to override anyways would only make the development experience more frustrating.
Instead, you're encouraged to work utility-first and extract your own components when you start to notice common patterns in your UI.
Simple form input component
<input class="bg-white focus:outline-none focus:shadow-outline border border-gray-300 rounded-lg py-2 px-4 block w-full appearance-none leading-normal" type="email" placeholder="jane@example.com">Examples
To help you get started, we've included a bunch of component examples built with utility classes that might be helpful for inspiration or to understand how to implement common UI elements.
