Table of contents
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.
<button
class="
px-2
py-1.5
rounded-md
bg-blue-500
hover:bg-blue-600
font-medium
text-white
"
>
Submit
</button>
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.
<input
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.
<select
class="
block
w-48
p-2
rounded-md
bg-slate-200
font-medium
text-slate-700
"
>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="orange">Orange</option>
</select>
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.
<label class="flex items-center">
<input class="mr-1.5 accent-blue-500" type="checkbox" />
<span class="text-slate-800">Subscribe</span>
</label>
You can change checkbox background by changing accent-* class.
Form
A boilerplate for a simple and responsive sign up form.
<form class="max-w-md p-4 rounded-md border border-slate-100 shadow-md">
<h2 class="mb-1 font-bold text-xl text-slate-800">Sign up</h2>
<p class="mb-2 text-slate-500">
Create an account and join our awesome community. It's completely
free.
</p>
<label class="block mb-2">
<span class="block mb-1 font-semibold text-sm text-slate-700">
Email address
</span>
<input
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"
/>
</label>
<label class="block mb-3">
<span class="block mb-1 font-semibold text-sm text-slate-700">
Password
</span>
<input
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"
/>
</label>
<button
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
</button>
<a
class="block text-xs text-blue-500 hover:text-blue-600 text-center"
href="#"
>
Already have an account?
</a>
</form>
Modal
A boilerplate for a simple modal with close button.
<dialog
class="
fixed
top-0
left-0
p-4
w-full
h-full
bg-slate-800/80
flex
items-center
justify-center
"
open
>
<div class="max-w-md w-full p-5 rounded-md bg-white shadow-sm">
<div class="mb-1 flex items-center justify-between">
<h2 class="font-bold text-xl text-slate-800">
Lorem ipsum dolor sit amet
</h2>
<button
class="
shrink-0
w-[1.5rem]
h-[1.5rem]
rounded
bg-slate-100
hover:bg-slate-200
text-slate-600
"
>
×
</button>
</div>
<p class="leading-relaxed text-slate-500">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non
dolorem vitae optio fuga itaque ab, voluptatibus officia iusto
ipsa at.
</p>
</div>
</dialog>
All of the above listed examples are also available here, so take a look to see them in action.
Summary
I hope this article provided you with a good demonstration of Tailwind CSS possibilities. If you have a specific questions or examples that you'd like to see, feel free to leave them in the comment section below.
Thanks for reading! 👋
Top comments (0)