Tailwind css

Tailwind CSS has quickly become one of the most popular utility-first CSS frameworks for building custom designs without writing traditional CSS. In this guide, we’ll walk you through setting up your first Tailwind CSS project step by step, complete with code examples and tips to help both beginners and experienced developers get started.

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
• Prerequisites
• Step 1: Create a New Project Directory
• Step 2: Initialize an npm Package
• Step 3: Install Tailwind CSS Dependencies
• Step 4: Configure Tailwind CSS
• Step 5: Create Your First CSS File
• Step 6: Add Tailwind Directives to Your CSS
• Step 7: Build and Compile Your Styles
• Code Example: Building a simple card using Tailwind CSS
• Conclusion

Introduction to Tailwind CSS

Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build custom designs directly in your markup 5. Unlike traditional CSS frameworks, it doesn’t come with pre-designed components but instead gives you the tools to create unique interfaces tailored to your needs.

Prerequisite

Before starting, ensure you have the following installed on your machine:

• Node.js (v16 or later): Download from Node.js Official Website.
• npm : Comes bundled with Node.js.
• Basic Knowledge of HTML & CSS : Familiarity with these technologies will be beneficial.

Step 1: Create a New Project Directory

Begin by creating a new folder where your project files will reside. You can do this via the command line or manually through your file explorer.

$ mkdir tailwind-project-01

Now, change to the new directory

$ cd tailwind-project-01

Step 2: Initialize an npm Package

To manage dependencies and scripts, initialize an npm package within your project directory.

npm init -y

This command creates a package.json file with default settings.

Step 3: Install Tailwind CSS Dependencies

Install Tailwind CSS along with its required dependencies using npm.

npm install tailwindcss postcss autoprefixer

After installation, initialize Tailwind CSS by generating the necessary configuration files.

npx tailwindcss init -p

This generates two essential files:

• tailwind.config.js: For configuring Tailwind options.
• postcss.config.js: For PostCSS configuration 6.

Step 4: Configure Tailwind CSS

Open the generated tailwind.config.js file and customize it according to your project requirements. Below is an example configuration:

module.exports = {
	content: [
		"./index.html", // Update this path based on your project structure
		"./src/**/*.{html,js}", // Include all relevant file types
	],
	theme: {
		extend: {},
	},
	plugins: [],
};

The content property tells Tailwind which files to scan for class names so it can generate only the styles you actually use

Step 5: Create Your First CSS File

Create a CSS file in your project directory, typically inside a src or assets folder. For simplicity, let’s name it input.css.

touch src/input.css

Step 6: Add Tailwind Directives to Your CSS

Open the newly created input.css file and add the following Tailwind directives:

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

These directives import the base styles, component styles, and utility classes provided by Tailwind CSS

Step 7: Build and Compile Your Styles

Compile your CSS using the following command:

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

This command watches for changes in your input.css file and outputs the compiled CSS to output.css. The --watch flag ensures the process continues running and updates the output whenever you make changes

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>

Preview

Programmer

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.

David Paul

Designer

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.

Daphene Coles

Conclusion

Setting up your first Tailwind CSS project is straightforward once you understand the steps involved. By following this guide, you’ve learned how to install Tailwind CSS, configure it, and build a simple webpage. Tailwind CSS empowers developers to create beautiful, responsive designs quickly and efficiently.