Tailwind CSS

Unlike any other CSS framework, Tailwind CSS is not opinionated and allows you to create your components and design your elements for any project. It is not the only utility-first CSS framework, but it’s by far the most popular.

At the end of this tailwind CSS tutorial, you should be able to set up a tailwind CSS project quickly, configure your tailwind CSS by yourself and build a simple card using the tailwind CSS framework.

Table of content

Introduction to tailwind CSS
Prerequisite
Setting up Tailwind CSS for your project
Adding tailwind to your stylesheet
Configuration and processing of your CSS with Tailwind
Tailwind CSS Processing
Adding Tailwind CSS first project
Building a simple card using Tailwind CSS
Conclusion

Before we can get on with the tailwind CSS tutorial, below is the image of the project we are going to create.

Introduction to Tailwind CSS

Tailwind CSS was first released on the 1st of November,2017 on Github. It was an open-source project. By the beginning of August 2020, over 10 million people have downloaded the framework.

These made it one of the fastest-growing CSS frameworks. In September 2020, over 1 million developers worldwide accessed the official Tailwind documentation.

Tailwind CSS is different from other CSS frameworks because it’s a utility-first CSS framework, unlike Bootstrap which is an object-oriented one. You can check out my post comparing the two frameworks here. These new ways of building a user interface make the framework highly customizable.

Prerequisite

Meanwhile, before we can continue we are going to look at some of the skills you require to use the tailwind CSS on a project.

Basic HTML
Basic CSS
Basic JavaScript

Setting up Tailwind CSS for your project

There are several ways you can set up your Tailwind CSS project. Although the fastest way is to use the CDN, it is recommended you use the package manager method. You can check out my post on using the CDN method on your Tailwind CSS project.

Using the package manager will allow you to make use of the configuration via PostCSS.

In this tailwind tutorial, I will show you how to include the latest version of Tailwind CSS using NPM and create a Tailwind configuration file. To use this method, you must make sure you have Node and NPM installed on your machine.

Then you can go to your terminal to create your project folder. To create your project folder, run the following command.

$ mkdir tailwind-project-01

Now, change to the new directory

$ cd tailwind-project-01

You can now go ahead to create a new ‘package.json’ by using the following NPM command

$ npm init

What the command above does is help us manage the Node Package Manager and the dependencies. The next step is to install the latest version of tailwind CSS and save the dependency. You can do this by running the following command on your terminal.

npm install @latest tailwindcss –save

This command makes the Tailwind CSS available in our node_modules folder.

Adding tailwind to your stylesheet

After installing the tailwind CSS project, the next step is to inject the tailwind’s base, components, and utility style into a CSS file you created. This is done by using the custom @tailwind directives. Moreover, you must first create a new CSS file called style.css (or any name of your choice) and add the following lines of code

@tailwind base;
@tailwind components;
@tailwind utilities;

This line of codes is swapped up using Tailwind with the actual CSS styles from Tailwind when processing the file.

Configuration and processing your CSS with Tailwind

As we earlier stated, the most recommended way to set up the Tailwind CSS project is to install Tailwind CSS using the package manager. This is because you can’t configure your components the way you want when you use other methods However, the package manager allows us to create a configuration file. we can go ahead next to create a configuration file. You can do this by running the following command on your terminal

npx tailwindcss init

The above command will generate a file called tailwind.config.js. The file will contain the following

// tailwind.config.js
Module.exports = {
    future: {},
    purge: {},
    theme: {},
    extend: {},

    variants: {},
    plugins: [],
};

You can go ahead to add the following plugins

plugins: {
   tailwindcss: { },
   autoprefixer: { },
  }

Tailwind CSS Processing

At this stage, we can go ahead to compile our style.css file to create the main.css file. The output.css file will be included in our project. To do this, we can go ahead to run the following command npx tailwindcss build main.css –o main.css After running this command, you will see that a new main.css file was generated in your folder structure. This file will hold the default Tailwind CSS utility classes based on the configuration that you first created.

Adding Tailwind CSS first project

We are going to add Tailwind CSS to our first project. You can go ahead to create an index.html file in your root project directory. Inside the HTML file, include the main.css to the head tag of your HTML file project. It should look something like this.

<!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" />
        <link rel="stylesheet" href="styles.css" />
        <title>tailwind cards</title>
    </head>
</html>

Excellent, you have successfully added Tailwind CSS to your first project.

In the next section, we will create a simple card using the project we just created and employ some Tailwind CSS utility classes to it.

Building a simple card using Tailwind CSS

In this section, we will demonstrate how to use the Tailwind CSS utility in your project. The simple card we are going to build will look like the image below.

In the index.html we initially created, we will create a wrapper div that will contain the cards.

<div class="flex space-x-10 justify-center mt-4"></div>

Now that we have created the wrapper, we can go ahead to create cards inside the wrapper.

We are going to include the utility classes in our elements.

<body>
<div class="flex space-x-10 justify-center mt-4">
    <div class="max-w-md py-4 px-8 bg-white shadow-lg rounded-lg my-20">
        <div class="flex justify-center md:justify-end -mt-16">
            <img
            class="w-20 h-20 object-cover rounded-full border-2 border-indigo-500"
            src="image/profile one.jpg">
        </div>
        <div>
            <h2 class="text-text-3xl font-semibold text-indigo-500">Programmer</h2>
            <p class="mt-2 text-gray-600">
              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat
               asperiores
               explicabo alias a tenetur amet quae minima neque dicta voluptas eaque recusandae ab, corrupti est.
            </p>
        </div>
        <div class="flex justify-end mt-4">
            <a href="#"
            class="text-xl font-medium text-indigo-500">
            David Paul
            </a>
        </div>
    </div>

    <div class="max-w-md py-4 px-8 bg-white shadow-lg rounded-lg my-20">
        <div class="flex justify-center md:justify-end -mt-16">
           <img class="w-20 h-20 object-cover rounded-full border-2 border-indigo-500"
            src="image/profile two.jpg">
        </div>
        <div>
            <h2 class="text-text-3xl font-semibold text-indigo-500">
              Designer
            </h2>
            <p class="mt-2 text-gray-600">
              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat
                asperiores
                explicabo alias a tenetur amet quae minima neque dicta voluptas eaque recusandae ab, corrupti est.
            </p>
        </div>
        <div class="flex justify-end mt-4">
            <a href="#" class="text-xl font-medium text-indigo-500">Daphene Coles</a>
        </div>
    </div>
</div>
</body>
</html>

Conclusion

In our Tailwind CSS tutorial, you learned how to install Tailwind CSS using the package manager, how to build a simple card using Tailwind CSS utility classes, and how to include Tailwind CSS in your project.

How to set up your first Tailwind CSS Project