An Introduction:

There are popular frameworks out there that many developers use to style their websites and Web projects. Alternatively, some developers learn CSS to style their Web projects without resorting to a framework. Which of these approaches works better? Like most things in development, it depends.
On the other hand, it can be difficult to build your site from scratch using CSS. Understanding multiple layout semantics, unit systems, and cascading rules can be overwhelming for developers who just want to be able to get back to building functionality. Here comes TailwindCSS, you do not need to write CSS from scratch. TailwindCSS provides you utilities classes just like "mt" means margin-top.

Using TailwindCSS:

TailwindCSS is just a set of classes as mentioned above. It can be confusing that how TailwindCSS works, and builds CSS file. Thus it might feel as though it's an overkill for what would be a simple .css file.

Installation:

Tailwind CSS can be installed with your favorite framework like Vue, Nuxt, React, and Gatsby. It can also be used as a plug-in for PostCSS if you're using that. For my examples, I'm going to use it with NPM and HTML so you can see how the guts work. To get started, install Tailwind CSS via NPM:

> npm i tailwindcss

With Tailwind installed, you can run it via the npx tool in Node Package Manager (essentially running it from the local ./node_modules/.bin directory):

npx tailwindcss

But what does it do? It takes in a CSS file and exports a generated CSS file. Let's start with the essential Tailwind CSS file:

/* src/site.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

The @tailwind command is what the processor looks for to create the parts of the Tailwind CSS classes for you. After this file, you can use tailwind to build it:

{
    "scripts": {
        "build:css": "npx tailwind build src/source.css -o ./css/site.css"
    },
    "dependencies": {"tailwindcss": "^2.0.3"}
}

When you build the CSS, you can just add it to your HTML:

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

<head>
...
    <link rel="stylesheet" href="css/site.css">
</head>

So much work?

If you're thinking that this is a lot of work just to include a single CSS file, you can use the CDN version (via unpkg):

https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css

Responsiveness:

In Tailwind CSS, there are five responsive breakpoints (being mobile-first):

sm: 640px+
md: 768px+
lg: 1024px+
xl: 1280px+
2xl: 1536px+

These are based on common device sizes. In order to use them, just use these prefixes on any of the utility classes. For example, to hide an element on small devices:

<div class="bg-white hidden lg:flex">

I just portrayed some basics and installation process of TailwindCSS. But, I hope you would have so much fun using TailwindCSS. It doesn't negate your need to know and understand how CSS layout and properties work, but can help you quickly prototype your design without having to write a ton of CSS. Tailwind allows you to convert these classes into simple CSS.

Hamza