Tailwind CSS

Last Updated : 07 Jun, 2024

Tailwind CSS is a Utility-first CSS framework for building rapid custom UI. It is a highly customizable, low-level CSS framework that gives you all of the building blocks that you need. Also, it is a cool way to write inline styling and achieve an awesome interface without writing a single line of your own CSS.

Tailwind CSS Tutorial

Tailwind CSS

Why Tailwind CSS?

As we know there are many CSS frameworks but people always choose the fast and easy framework to learn and use in the project. Tailwind has come with inbuilt a lot of features and styles for users to choose from and is also used to reduce the tendency of writing CSS code and create a beautiful custom UI. It will help you to overcome the complicated task. Tailwind CSS creates small utilities with a defined set of options enabling easy integration of existing classes directly into the HTML code.

Tailwind CSS

Tailwind CSS

Tailwind CSS CDN Link

Using Tailwind CSS via a CDN link is quick and simple. Just include a <link> tag in the <head> section of your HTML. This gives access to Tailwind’s utility classes without extra files on your server. It’s ideal for prototypes, small projects, or experimentation. No complex setup is needed. The CDN ensures you use the latest version. This makes it easy to start with modern, responsive design.

<script src=”https://cdn.tailwindcss.com”></script>

Note: 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.

Installation of Tailwind CSS

Installation of Tailwind CSS via npm

Basically Tailwind is available on npm and you can install it using the following command:
```
npm install tailwindcss
```
After that create ad Tailwind configuration file using the following command:
```
npm tailwind init {name of file}
```

Installation of Tailwind CSS via yarn

You can install tailwind by using the yarn command:
```
yarn add tailwindcss
```
After that create ad Tailwind configuration file using the following command:
```
yarn tailwind init {name of file}
```

Example: It is a basic example of Tailwind CSS that describes how to change the background color on mouse hover.

Tailwind CSS

<!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>
    <div class="h-full border-2 border-gray-200 
                border-opacity-60 rounded-lg 
                overflow-hidden">
        <div class="p-6 hover:bg-green-600 
                    hover:text-white transition 
                    duration-300 ease-in">
            <h1 class="text-2xl font-semibold mb-3">
                Hover
            </h1>
        </div>
    </div>
</body>

</html>

Output Tailwind

Advantages of Tailwind CSS

Highly Customizable.
Enables building complex responsive layout.
Responsive and development are easy.
Component creation is easy.

Disadvantages of Tailwind CSS

There are missing headers and navigation components.
It takes time to learn how to implement inbuilt classes.

Complete References

GeeksforGeeks

Improve

Introduction to Tailwind CSS

Similar Reads

What is the use of the tailwind.config.js file in Tailwind CSS ?

The tailwind.config.js file in Tailwind CSS serves as a central configuration hub for customizing the framework. It allows you to define colors, fonts, breakpoints, and more, tailoring Tailwind to fit your project's specific design and functionality requirements. Syntax:/** @type {import('tailwindcss').Config} */module.exports = { content: [], them

Storybook-tailwind. How should I add tailwind to storybook

In this article, we will guide you through the process of adding Tailwind CSS to Storybook to enhance your UI development. Storybook is an open-source UI that helps developers create reusable, organized UI components with proper documentation independently. Tailwind CSS is basically a utility-first CSS framework for building rapid custom UI. Prereq

Which CSS framework is better Tailwind CSS or Bootstrap ?

In this article, we will see which CSS framework is better tailwind CSS or bootstrap. Both are widely used CSS frameworks for styling the front end. We will understand each one of them in detail. Both frameworks have their own pros and cons so it depends upon the type of application you are going to build and accordingly you can choose the best fra

How to Add a @tailwind CSS Rule for CSS Checker ?

Tailwind CSS is basically a Utility first CSS framework for building rapid custom UI. It is a highly customizable, low-level CSS framework that gives you all of the building blocks that you need. Also, it is a cool way to write inline styling and achieve an awesome interface without writing a single line of your own CSS. In this article, we will ex

How to use CSS Animations with Tailwind CSS ?

Tailwind CSS classes are used to style elements and apply animations effortlessly. Utilize Tailwind's animation utility classes to add dynamic visual effects. Combine Tailwind CSS with custom CSS animations for versatile and engaging web designs. Table of Content Tailwind CSS Animation Utility ClassesCSS Animations with Tailwind CSS and JavaScriptT

Tailwind CSS Text Color

This class accepts lots of value in tailwind CSS in which all the properties are covered in class form. By using this class we can color any text. In CSS, we do that by using the CSS Color property. Text Color classes: text-transparent: The text color will be transparent.text-current: The text color will depend on the parent element color.text-blac

Underline Hover Animation Effect using Tailwind CSS

The Tailwind CSS underline animation is a visual effect that can be added to any text or heading or a specific word in the web page using the Tailwind CSS utility framework. The basic function of this effect is this creates an underline animation from left to right with a smooth transition, in simpler words it created underline animation whenever w

How to set width transition in Tailwind CSS ?

In Tailwind CSS, the transition utility is used to apply a width transition to an element. The transition utility accepts a list of properties, duration, and timing functions for the transition. Approach: To create a width transition, we can use the transition class and a duration and easing function to animate the width change. For example, we can

How to enable dark mode in Tailwind CSS ?

In this article, we will see how to enable dark mode in Tailwind CSS. there are many ways, some of them we will see. Tailwind CSS has special features to enable dark mode on the webpage. To enable dark mode in Tailwind CSS, we can define a dark theme in our Tailwind config file section and then we have to use the dark class in our HTML to apply it

How to Remove Arrow on Input Type Number with Tailwind CSS ?

When using the input element with the type="number" attribute, most browsers will display an arrow control (also known as a spinner) at the right side of the input field. This control allows users to increment or decrement the value using the up and down arrows. However, in some cases, you may want to remove this arrow control for styling or UX pur

Article Tags :