Tailwind getting started and How Tailwind makes it easy

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework tool for building websites using only HTML and CSS.
It’s based on the concepts of functional CSS, which is an approach to writing modular, reusable CSS code. The functional CSS approach relies on a handful of small, reusable classes that can be composed together to build complex designs.
The classes are not named after design concepts like .button or .container . Instead, they are named after the utility they provide, like .bg-white or .flex .
This approach to CSS is different from traditional CSS frameworks like Bootstrap and Foundation, which are based on, a component-based approach.
The upside of this approach is that it gives you a lot of flexibility. You are not limited to the predefined styles of a traditional CSS framework.
Tailwind is a library of atomic CSS rules (single-purpose utility classes) that helps you build HTML pages without touching your CSS. But Tailwind isn’t just the CSS.

Why Use Tailwind CSS?

Tailwind CSS has a lot of benefits, but here are the main reasons you might want to use it:

You don’t have to write any CSS yourself. This is the biggest selling point for me. Tailwind generates all the CSS for you, so you don’t have to write a single line of CSS code.
Atomic CSS frameworks, you’re given a set of very low-level, single-purpose utility classes that you can use to construct your Web page. This is a CSS concept where a single HTML class applies a single CSS property/value pair to an element

.font-bold {
  font-weight: bold;
}

.color-red {
  color: red;
}

<p class="font-bold color-red">Some example text.</p>

Why Atomic CSS?

If you’re not familiar with Atomic CSS, it’s a notion that When you have access to every possible property/value pair by means of single-purpose utility classes, like those shown in the previous example. In theory, this makes for faster development and more reusable code, although it can be difficult to read and maintain.

Every “utility” is a class name.
No need, to write code in CSS file and you only build HTML elements with class name because utility classes are enough to style your element.

Get Started

The Play CDN is not the best choice for production because it is not minified and does not include all Tailwind features.
The JS script is a lot bigger than your CSS file, and the styles are applied at run-time which means you can have flashes of unstyled content.

Add the Play CDN script to your HTML

<!doctype html>
<html>
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
   <h1 class="text-3xl font-bold underline">
     Hello world!
   </h1>
</body>
</html>

Try customizing your config

 <!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<script>
 tailwind.config = {
   theme: {
     extend: {
       colors: {
         clifford: '#da373d',
       }
     }
   }
 }
</script>
</head>
<body>
<h1 class="text-3xl font-bold underline **text-clifford**">
 Hello world!
</h1>
</body>
</html>

Try adding some custom CSS

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<style type="text/tailwindcss">
 @layer utilities {
   .content-auto {
     content-visibility: auto;
   }
 }
</style>
</head>
<body>
<div class="lg:content-auto">
 <!-- ... -->
</div>
</body>
</html>

Use Tailwind

The library comes with a large number of different utility classes, each of which can be used to style a specific CSS property. For example, there’s a class for setting the background color, one for setting the text color, one for setting the font size, and so on.
It is not possible to cover all the different nuances of how the utility classes are named. You will gonna learn over time while using tailwind in your projects

Of course, you’ll never remember all the classes names of tailwind utility classes, so here are a few tools that might help:

Took some help from this blog

Happy Learning😊

Hitesh Choudhary

#iwritecode