Introduction to Tailwind CSS

Tailwind CSS is a utility-first CSS framework that streamlines web development by providing a set of pre-designed utility classes. These classes enable rapid styling without writing custom CSS, promoting consistency and scalability. Tailwind’s approach shifts focus from traditional CSS components to functional classes, empowering developers to efficiently build responsive and visually appealing interfaces with minimal effort.

Why Tailwind CSS?

The faster UI-building process.
It is a utility-first CSS framework which means we can use utility classes to build custom designs without writing CSS as in the traditional approach.

Advantages of Tailwind CSS

No more silly names for CSS classes and IDs.
Minimum lines of Code in CSS file.
We can customize the designs to make the components.
Makes the website responsive.
Makes the changes in the desired manner.
CSS is global in nature and if make changes in the file the property is changed in all the HTML files linked to it. But with the help of Tailwind CSS, we can use utility classes and make local changes.

Why use Tailwind over other CSS framework?

Tailwind’s utility-first methodology offers granular control over styling, enabling precise customization and faster prototyping without overriding framework styles.
Unlike traditional frameworks, Tailwind allows extensive customization and avoids pre-built component styles, offering flexibility in design.
Tailwind’s utility classes eliminate the need for writing custom CSS, resulting in smaller file sizes and faster load times.
Tailwind simplifies responsive design with built-in classes, facilitating the creation of mobile-friendly layouts without additional media queries or complex styling.
With its extensive documentation and intuitive syntax, Tailwind accelerates development by streamlining the styling process and reducing iteration time.

How to Install and use Tailwind CSS in a Project?

There are two methods to use Tailwind CSS in a project: you can either install it on your server or use it through a CDN link.

Installation of Tailwind CSS via npm

Step 1:

npm init -y

Step 2:

npm install tailwindcss

Step 3:Use the @tailwind directive to inject Tailwind’s base, components, and utility styles into your CSS file.

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

Step 4: This is used to create a config file to customize the designs. It is an optional step.

npx tailwindcss init

Step 5:This command is used to compile style.css is the file that has to be compiled and output.css is the file on which it has to be compiled. If the file output.css is not created earlier then it will automatically be created.

npx tailwindcss build styles.css -o output.css

Method 2: Use Tailwind CSS via CDN

The simplest method to use Tailwind CSS in a project via CDN link with installing the module. Just include the following CDN link in the <head> section of your HTML file.

<link href=”https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css”rel=”stylesheet”>

Limitation of Tailwind CSS

There are some limitations when CDN is used. Some of them are:

Customize Tailwind’s default theme can’t be used.
Directives like @apply, @variants, etc can’t be used.
Can’t install third-party plugins.

Example: In this example, we imports Tailwind CSS via CDN and applies margin to the body. It includes a heading styled with Tailwind utility classes and content about Tailwind CSS.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <!-- Tailwind CSS CDN link -->
    <link href=
"https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" 
        rel="stylesheet">
</head>

<body class="m-4">
    <h1 class="text-green-500 text-4xl font-bold">
        w3wiki
    </h1>

    <p><strong>Tailwind CSS Tutorial</strong></p>

    <p>
        You can use Tailwind CSS as a replacement 
        of CSS, this is a framework that increase 
        your pace to design any website.
    </p>
</body>

</html>

Output

Tags:

#CSS #Tailwind CSS #Web Technologies

Tailwind CSS

Tailwind CSS Container