Table of contents
- Introduction
- What is Tailwind CSS?
-
Examples
- Button
- Input
- Select
- Checkbox
- Form
- Modal
- Summary
Introduction
In this article I would like to go over the basics of using Tailwind CSS and provide some examples on how you can use it to create common UI elements such as buttons, forms, modals, navigation menus and so on, so you can later reuse them in your own projects.
What is Tailwind CSS?
In case you’re not familiar with it already, Tailwind CSS is a utility-first CSS framework that allows you to create custom user interfaces without the bloat of traditional frameworks. It’s perfect to quickly prototype and build beautiful, functional user interfaces for your web projects. You can read more about it on their website here.
Examples
Let’s dive in and take a look at how we can use Tailwind CSS to create some common UI elements. Each example comes with a ready to use HTML code snippet.
Button
A base for a regular primary button.
class="
px-2
py-1.5
rounded-md
bg-blue-500
hover:bg-blue-600
font-medium
text-white
"
>
Submit
You can change bg-* and text-* classes to create other variants:
- red –
bg-red-500 hover:bg-red-600 text-white - dark –
bg-slate-900 hover:bg-slate-800 text-white - light –
bg-slate-50 hover:bg-slate-100 text-slate-800
Input
A base for a regular input field.
class="
px-2
py-1.5
rounded
ring-1 ring-slate-700/20
text-slate-700
block
"
type="email"
placeholder="Your email goes here"
/>
You can change ring-* class to create other variants:
- blue –
ring-blue-500/30 - red –
ring-red-500/30
Select
A base for a regular select element.
class="
block
w-48
p-2
rounded-md
bg-slate-200
font-medium
text-slate-700
"
>
value="apple">Apple
value="banana">Banana
value="orange">Orange
This one has some limitations in terms of styling, but still I prefer to use native solutions rather than building my own from scratch. Just for the sake of accessibility.
Checkbox
A base for a regular checkbox field with label.
class="flex items-center">
class="mr-1.5 accent-blue-500" type="checkbox" />
class="text-slate-800">Subscribe
You can change checkbox background by changing accent-* class.
Form
A boilerplate for a simple and responsive sign up form.
class="max-w-md p-4 rounded-md border border-slate-100 shadow-md">
class="mb-1 font-bold text-xl text-slate-800">Sign up
class="mb-2 text-slate-500">
Create an account and join our awesome community. It's completely
free.
class="block mb-2">
class="block mb-1 font-semibold text-sm text-slate-700">
Email address
class="
block
w-full
px-2
py-1.5
rounded
ring-1 ring-slate-700/20
text-slate-700
block
"
type="email"
placeholder="Your email"
/>
class="block mb-3">
class="block mb-1 font-semibold text-sm text-slate-700">
Password
class="
block
w-full
px-2
py-1.5
rounded
ring-1 ring-slate-700/20
text-slate-700
block
"
type="password"
placeholder="At least 6 characters"
/>
class="
w-full
mb-1
px-2
py-1.5
rounded-md
bg-blue-500
hover:bg-blue-600
font-medium
text-white
"
type="submit"
>
Register
class="block text-xs text-blue-500 hover:text-blue-600 text-center"
href="#"
>
Already have an account?
Modal
A boilerplate for a simple modal with close button.
class="
fixed
top-0
left-0
p-4
w-full
h-full
bg-slate-800/80
flex
items-center
justify-center
"
open
>
class="max-w-md w-full p-5 rounded-md bg-white shadow-sm">
class="mb-1 flex items-center justify-between">
class="font-bold text-xl text-slate-800">
Lorem ipsum dolor sit amet
class="
shrink-0
w-[1.5rem]
h-[1.5rem]
rounded
bg-slate-100
hover:bg-slate-200
text-slate-600
"
>
×
I may need your help. I tried many ways but couldn’t solve it, but after reading your article, I think you have a way to help me. I’m looking forward for your reply. Thanks.