DEV Community

Cover image for Tailwind CSS for Beginners: Build a Social Link Project
Amrin
Amrin

Posted on

Tailwind CSS for Beginners: Build a Social Link Project

#webdev #beginners #tailwindcss

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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:

Project Preview

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>
Enter fullscreen mode Exit fullscreen mode

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; 
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
obere4u profile image
Nwosa Tochukwu •

Interesting read.

Do companies actually use Tailwindcss in deployment?

Collapse
 
krivanek06 profile image
Eduard Krivanek •

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.

Collapse
 
obere4u profile image
Nwosa Tochukwu •

adding 'tw-' to differentiate which is which right?

Thread Thread
 
krivanek06 profile image
Eduard Krivanek •

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-').

Thread Thread
 
obere4u profile image
Nwosa Tochukwu •

Thank you. I was asking so I can get to learn industry standard frameworks and libraries.

Collapse
 
coderamrin profile image
Amrin •

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.

Collapse
 
obere4u profile image
Nwosa Tochukwu •

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

Thread Thread
 
coderamrin profile image
Amrin •

Glad it was helpful.

Collapse
 
bitwizcoder profile image
Muhammad Noman •

Thanks :)

Collapse
 
coderamrin profile image
Amrin •

Glad you liked it :)

Collapse
 
poweredbyenergydrinks profile image
PoweredByEnergyDrinks •

We use tailwind only. Best decision we ever made

Collapse
 
greenteaisgreat profile image
Nathan G Bornstein •

You're a real one for posting this, THANK YOU!

View full discussion (12 comments)

Read next

echoglobal profile image

Non-Obvious Steps to Select the Right Software Development Partner

EchoGlobal -

nikhilxd profile image

Spring Boot Caching Simplified: How to Use JetCache Effectively

Nikhil Soman Sahu -

code42cate profile image

How to Dockerize and Deploy Fastify APIs

Jonas Scholz -

mikeyoung44 profile image

Language Models Get Introspective: Learning About Their Own Capabilities

Mike Young -