Horje
Tailwind CSS

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>

OutputTailwind

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


 


Reffered: https://www.geeksforgeeks.org

CSS

Related
CSS Tutorial CSS Tutorial
How To Add Border to an Image using HTML and CSS ? How To Add Border to an Image using HTML and CSS ?
CSS Rounded Corners CSS Rounded Corners
Top CSS Frameworks for Frontend Developers Top CSS Frameworks for Frontend Developers
HTML and CSS HTML and CSS

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 11



 

Horje