Hello everyone, welcome to the Tailwind for Beginners Tutorial. In this tutorial, we will go over the fundamentals of Tailwind CSS and we build a social link project.
So, let’s get started.
If you prefer video, check it out here:
What is Tailwind?
Tailwind CSS is a utility-first CSS library. It offers tousands for utility classes. You can build anything using these classes without leaving the Markup.
Tailwind offers all types of styles as utility classes. For example, flex, grid, margin, padding, colors and all the css property you can think of.
Now that you know that what Tailwind Css is, let’s explore how you can use it.
Tailwind Basics: How does it work?
As we said before Tailwind CSS offers all types of styles as utility classes.
Here’s a quick explanation of how it works and how to use it.
The Text Styles
You can style the text with Tailwind CSS classes, you can increase the font sizes, change the colors, change the font weight, and all the styles you can add with vanilla CSS.
Here’s a quick example of a text styled with Tailwind CSS
<h1 class="text-3xl font-bold">Thomas</h1>
This text has a font size of 1.8rem and a font weight of bold.
Adding Spacing
It’s very easy to add spacing with Tailwind CSS. You can add margin, padding and border with Tailwind.
For padding you have to use the p class, after that, you have to prefix the side you want to add the padding to.
Here’s an example
<div class="pr-5"> Test </div>
This div has a padding-right of 5, this way you can add padding or margin to all the sides.
You can learn more on Tailwind CSS docs.
Now that you got an idea of how Tailwind CSS works let’s move on and build a simple social link project.
Build a Social Link Project
We are going to build a simple social link project. In the end it’ll look like this:
It’s a simple project that includes all the social links and a short description of a developer. 😊
To get started, first of all we will have to setup a Tailwind CSS project with HTML.
You can follow this tutorial to setup a Tailwind CSS project.
So, the project setup is done. Now we are going to start building the project.
We’ll start out by writing the HTML.
The Html
The HTML here includes Fontawesome CDN link and the compiled stylesheet we got after running the build command.
After that, we got the Card Header which includes an avatar and a short description of the person.
And after that we got all the social links. The social links has an icon and a name.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Social Links</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="./dist/output.css" />
</head>
<body>
<div class="">
<div class="card">
<div class="card-header">
<img
src="https://cloudflare-ipfs.com/ipfs/Qmd3W5DuhgHirLHGVixi6V76LhCkZUz6pnFt5AJBiyvHye/avatar/279.jpg"
alt=""
class=""
/>
<h1 class="">Thomas</h1>
<p>Frontend Developer</p>
</div>
<div class="card-links">
<div class="card-item">
<p class="name">Github</p>
<div class="icon">
<i class="fa-brands fa-github"></i>
</div>
</div>
<div class="card-item">
<p class="name">Twitter</p>
<div class="icon">
<i class="fa-brands fa-twitter"></i>
</div>
</div>
<div class="card-item">
<p class="name">Facebook</p>
<div class="icon">
<i class="fa-brands fa-facebook-f"></i>
</div>
</div>
<div class="card-item">
<p class="name">YouTube</p>
<div class="icon">
<i class="fa-brands fa-youtube"></i>
</div>
</div>
<div class="card-item">
<p class="name">Email</p>
<div class="icon">
<i class="fa-regular fa-envelope"></i>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
So the markup is done, let’s go ahead and add the stylings.
The Styles
We will start out by adding the background color to the body. Which we will add using the Tailwind CSS @apply directive.
Add this to your styles.css file.
body {
@apply bg-gradient-to-r from-cyan-500 to-blue-500;
}
After adding the background color we’ll center the card horizontally and vertically. And then we style the card header.
<div class="flex justify-center items-center h-screen">
<div class="card bg-white p-10 rounded-lg w-[30%]">
<div class="card-header text-center pb-5">
<img
src="https://cloudflare-ipfs.com/ipfs/Qmd3W5DuhgHirLHGVixi6V76LhCkZUz6pnFt5AJBiyvHye/avatar/279.jpg"
alt="image avatar"
class="rounded-full m-auto"/>
<h1 class="text-3xl font-bold ">Thomas</h1>
<p>Frontend Developer</p>
</div>
</div>
Here we styled the card links. It’s not some fancy design, we just added flex box to take them on the same line and added some padding and background color to make it look cool.
<div class="flex justify-center items-center h-screen">
............
<div class="card-links">
<div class="card-item flex justify-between bg-gray-100 px-5 py-4 rounded-full mb-4 hover:bg-blue-400 hover:scale-105 duration-500 cursor-pointer">
<p class="name">Github</p>
<div class="icon">
<i class="fa-brands fa-github"></i>
</div>
</div>
<div class="card-item flex justify-between bg-gray-100 px-5 py-4 rounded-full mb-4 hover:bg-blue-400 hover:scale-105 duration-500 cursor-pointer">
<p class="name">Twitter</p>
<div class="icon">
<i class="fa-brands fa-twitter"></i>
</div>
</div>
<div class="card-item flex justify-between bg-gray-100 px-5 py-4 rounded-full mb-4 hover:bg-blue-400 hover:scale-105 duration-500 cursor-pointer">
<p class="name">Facebook</p>
<div class="icon">
<i class="fa-brands fa-facebook-f"></i>
</div>
</div>
<div class="card-item flex justify-between bg-gray-100 px-5 py-4 rounded-full mb-4 hover:bg-blue-400 hover:scale-105 duration-500 cursor-pointer">
<p class="name">YouTube</p>
<div class="icon">
<i class="fa-brands fa-youtube"></i>
</div>
</div>
<div class="card-item flex justify-between bg-gray-100 px-5 py-4 rounded-full mb-4 hover:bg-blue-400 hover:scale-105 duration-500 cursor-pointer">
<p class="name">Email</p>
<div class="icon">
<i class="fa-regular fa-envelope"></i>
</div>
</div>
</div>
</div>
</div>
Here’s all the code at once.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Social Links</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="./dist/output.css" />
</head>
<body>
<div class="flex justify-center items-center h-screen">
<div class="card bg-white p-10 rounded-lg w-[30%]">
<div class="card-header text-center pb-5">
<img
src="https://cloudflare-ipfs.com/ipfs/Qmd3W5DuhgHirLHGVixi6V76LhCkZUz6pnFt5AJBiyvHye/avatar/279.jpg"
alt=""
class="rounded-full m-auto"
/>
<h1 class="text-3xl font-bold ">Thomas</h1>
<p>Frontend Developer</p>
</div>
<div class="card-links">
<div class="card-item flex justify-between bg-gray-100 px-5 py-4 rounded-full mb-4 hover:bg-blue-400 hover:scale-105 duration-500 cursor-pointer">
<p class="name">Github</p>
<div class="icon">
<i class="fa-brands fa-github"></i>
</div>
</div>
<div class="card-item flex justify-between bg-gray-100 px-5 py-4 rounded-full mb-4 hover:bg-blue-400 hover:scale-105 duration-500 cursor-pointer">
<p class="name">Twitter</p>
<div class="icon">
<i class="fa-brands fa-twitter"></i>
</div>
</div>
<div class="card-item flex justify-between bg-gray-100 px-5 py-4 rounded-full mb-4 hover:bg-blue-400 hover:scale-105 duration-500 cursor-pointer">
<p class="name">Facebook</p>
<div class="icon">
<i class="fa-brands fa-facebook-f"></i>
</div>
</div>
<div class="card-item flex justify-between bg-gray-100 px-5 py-4 rounded-full mb-4 hover:bg-blue-400 hover:scale-105 duration-500 cursor-pointer">
<p class="name">YouTube</p>
<div class="icon">
<i class="fa-brands fa-youtube"></i>
</div>
</div>
<div class="card-item flex justify-between bg-gray-100 px-5 py-4 rounded-full mb-4 hover:bg-blue-400 hover:scale-105 duration-500 cursor-pointer">
<p class="name">Email</p>
<div class="icon">
<i class="fa-regular fa-envelope"></i>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
This is it we got a beautifully styled Social Link Project. Now you can use it to show all your social link at once.
Conclusion
In this article, we covered the fundamentals of Tailwind CSS and built a simple project with Tailwind.
Hope it was helpful.
If you want to read Tailwind CSS-related tutorials and articles make sure to follow me.
Twitter: https://twitter.com/CoderAmrin
YouTube: https://www.youtube.com/@coderamrin
Github: https://github.com/Coderamrin
Until next time happy coding.
Top comments (12)
Interesting read.
Do companies actually use Tailwindcss in deployment?
What I see, when starting a new project, you can easily push the usage of tailwind, people are open to it. Most devs are familiar with it.
However, it is harder to add it to an existing one. When adding tailwind to an existing project, I always recommend using the 'tw-' or another prefix for all tailwind classes.
adding 'tw-' to differentiate which is which right?
Right. Setting up the config to prefix tailwind classes with 'tw-', you are able to identify which css classes in your app are added by tailwind (because all of them start with 'tw-') and which classes you defined internally (don't start with 'tw-').
Thank you. I was asking so I can get to learn industry standard frameworks and libraries.
yeah, they do. a lot of people use tailwind css nowadays. The company i work in create products using tailwind css and people use them in real world.
Thanks for the feedback, read somewhere that companies doesn't use it that much. So I wanted to know, because I'm learning it right now
Glad it was helpful.
Thanks :)
Glad you liked it :)
We use tailwind only. Best decision we ever made
You're a real one for posting this, THANK YOU!