Introduction to Tailwind CSS Framework

1. Introduction to Tailwind CSS

Tailwind CSS is the most popular utility-first CSS framework for rapidly building custom user interfaces for the web. It is a highly customizable collection of low-level CSS utility classes written in PostCSS destined to be customized using JavaScript.

The first release of Tailwind CSS happened on the 1st of November 2017 on GitHub as an open-source project. Initially, only a side project for Adam Wathan helped him with some of his projects. Still, it became a fully-fledged and popular CSS framework with a new utility-first methodology.

2. Step by Step Guide to Tailwind CSS Installation

Step 1: Create a new project folder and go inside your directory by using the following command:

Step 2: Initialize a new project that will create a new package.json file by writing the following command:

Step 3: The first dependency which needs to be added to the project is the Tailwind CSS package. The following command is used for installation:

or

Step 4: The next step is to add Tailwind to the project’s CSS. Create a new file css/styles.css and insert the @tailwind directive.

Step 5: Next step is to add a Tailwind configuration file by running the following command. The generated file will be present in your root directory (tailwindcss.config.js)

Step 6: Tailwind CSS requires a build process that processes CSS files and makes sure that the Tailwind CSS code is inserted according to the directives used and the Tailwind configuration in place.
In addition, we will also use a plugin which is called autoprefixer

Step 7: With those packages installed let’s create a PostCSS configuration file in the project directory

Step 8: Inside this file, we have to add the following code

Step 9: Finally, the last step is to add a script inside our package.json file

Step 10: To run this script inside your ide terminal run

This script will ensure that whatever tailwind classes we are using, we are converting them into original CSS. So, now, inside our build folder, just create an index.html file and link our styles.css file with that. So, whenever we make any changes, those changes are reflected in the user.

Finally, install a live server extension from the extension bar of your preferred
Finally, our project will start running on some ports using the live server application

3. Components with Tailwind CSS Button

4. Build a YouTube card component with Tailwind CSS

5. How does CSS work?

When a browser displays a document, it must combine its content with its style information. It processes the paper in two phases:

• The browser converts HTML and CSS into the DOM (Document Object Model). The DOM represents the document in the computer’s memory. It combines the document’s content with its style.

The browser displays the contents of the DOM.

6. Advantages of using Tailwind CSS

1. It is highly customizable: Tailwind CSS is a highly customizable framework. Although it comes with a default configuration, overriding it with a tailwind.config.js file is simple.
2. It can be optimized using PurgeCSS: A significant advantage of Tailwind CSS is that optimization can be performed using PurgeCSS. PurgeCSS can reduce the file size considerably by scanning the HTML and removing unused classes. It is easy to set up PurgeCSS combined with Tailwind CSS and is highly recommended to do so before deploying the site.

7. Conclusion

I hope this blog helped you understand what Tailwind CSS is, how it works, and the advantages it can have over other CSS Frameworks when it comes to building user interfaces fast and efficiently.

8. About CloudThat

CloudThat is also the official  Microsoft Gold Partner, AWS Advanced Consulting Partner, and Training partner helping people develop knowledge of the cloud and help their businesses aim for higher goals using best in industry cloud computing practices and expertise. We are on a mission to build a robust cloud computing ecosystem by disseminating knowledge on technological intricacies within the cloud space. Our blogs, webinars, case studies, and white papers enable all the stakeholders in the cloud computing sphere.

9. FAQs

1. What is the difference between HTML and CSS?

   

2. How to integrate CSS on a web page?

   Using three-way we can integrate CSS on a web page

   • Inline: using the style attribute inside HTML
   • internal: using style elements in the head section
   • Linked/Imported/External: using a link element to link to the external CSS file

WRITTEN BY Rupesh Yadav