Tailwind.css & what is it ??

So, you definitely asking what's Tailwind

Tailwind CSS is a utility-first CSS framework for rapidly building custom UIs. It is highly focused on a mobile-first approach like Bootstrap. It's a customizable and low-level CSS framework that provides all the building blocks to create designs without any styles.

Why it's in Trend Now ?

Tailwind is a utility-based framework rather than a component-based framework like Bootstrap.

Tailwind is highly customizable we can easily alter it has a default configuration, adding a tailwind.config.js file to your project. The config file makes it quite simple to change everything from colors to fonts to spacing sizes.
It makes building complex responsive layouts easy as it focuses on mobile-first strategy by default. The Tailwind CSS framework has a mobile-first strategy by default.
Since Tailwind is a utility-first CSS framework, we can style elements by applying pre-existing classes directly in the HTML file. We can build custom designs without writing less custom CSS.

How can we include Tailwind in our HTML file via CDN

Add the Play CDN script tag to the of your HTML file

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

Edit the tailwind.config object to customize your configuration with your own design tokens.

<head>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            clifford: '#da373d',
          }
        }
      }
    }
  </script>
</head>

So, now we can start using Tailwind’s utility classes to style content.

Let's understand with basic example:


<div class="hero min-h-screen bg-base-200">
   <div class="hero-content text-center">
     <div class="max-w-md">
        <h1 class="text-5xl font-bold">Hello there</h1>
        <p class="py-6">Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi. In deleniti eaque aut repudiandae et a id nisi.</p>
        <button class="btn btn-primary">Get Started</button>
      </div>
   </div>
</div>

So, the utilities used are as:

Tailwind’s min-h-screen for min-height of 100vh and bg-base-200 for background color
text-center class for centering the text of div
The max-width(max-w-md) for setting the maximum width of an element
The (text-5xl and font-bold) on H1 for setting the font-size and font-weight
The padding on top and bottom on p tag from (py-6)

Output as:

Screenshot (77).png

Responsive Design

By default, Tailwind uses a mobile first breakpoint system, similar to what you might be used to in other frameworks like Bootstrap. Every utility class in Tailwind can be applied conditionally at different breakpoints, which makes it a piece of cake to build complex responsive interfaces without ever leaving your HTML.

Defaults breakpoints in Tailwind.css

'sm' 640px @media (min-width: 640px) { ... }
'md' 768px @media (min-width: 768px) { ... }
'lg' 1024px@media (min-width: 1024px) { ... }
'xl' 1280px@media (min-width: 1280px) { ... }
'2xl' 1536px@media (min-width: 1536px) { ... }

Resources: Tailwind Docs

Thanks for reading. Any suggestions and feedback are highly welcomed.