What is Tailwind css?

Tailwind CSS is a utility-first CSS framework designed to enable users to create applications faster and easier. You can use utility classes to control the layout, color, spacing, typography, shadows, and more to create a completely custom component design — without leaving your HTML or writing a single line of custom CSS.

Why Tailwind css?

It is a utility-first CSS framework which means we can use utility classes to build custom designs without writing CSS as in the traditional approach. Tailwind CSS is a low-level framework, Meaning unlike other CSS frameworks like Bootstrap and Materialize, Tailwind doesn’t offer fully styled components like buttons, dropdowns, and navbars. Instead, it offers utility classes so you can create your reusable components.

Advantages

• Tailwind CSS is one of the best CSS frameworks which helps us to write faster and cleaner CSS.

• Minimum lines of Code in CSS file.

• We can customize the designs to make the components.

• Makes the website responsive.

Installation:

Add the Play CDN script tag to the head of your HTML:

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

Try customizing your config:

By default, Tailwind will look for an optional tailwind.config.js file at the root of your project where you can define any customizations. It is optional, so you only have to specify what you'd like to change.

<script>
 tailwind.config = {
   theme: {
     extend: {
       colors: {
         clifford: '#da373d',
       }
     }
   }
 }
</script>

Try adding some custom css:

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4">
    <div class="shrink-0">
        <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
    </div>
    <div>
      <div class="text-xl font-medium text-black">ChitChat</div>
      <p class="text-slate-500">You have a new message!</p>
    </div>
</div>

In this example, we have used

• Tailwind’s flexbox and padding utilities (flex, shrink-0, and p-6) to control the overall card layout

• The max-width and margin utilities (max-w-sm and mx-auto) to constrain the card width and center it horizontally

• The background color, border-radius, and box-shadow utilities (bg-white, rounded-xl, and shadow-lg) to style the card’s appearance

• The width and height utilities (w-12 and h-12) to size the logo image

• The space-between utilities (space-x-4) to handle the spacing between the logo and the text

• The font size, text color, and font-weight utilities (text-xl, text-black, font-medium, etc.) to style the card text

with help of this approach, we can implement a completely custom component design without writing a single line of custom CSS.

Responsive design

Using responsive utility variants to build adaptive user interfaces.

Overview 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.

There are five breakpoints by default, inspired by common device resolutions:

• sm > minimum width 640px CSS @media (min-width: 640px) { ... }

• md > minimum width 768px CSS @media (min-width: 768px) { ... }

• lg > minimum width 1024px CSS @media (min-width: 1024px) { ... }

• xl > minimum width 1280px CSS @media (min-width: 1280px) { ... }

• 2xl > minimum width 1536px CSS @media (min-width: 1536px) { ... }

Mobile first

By default, Tailwind uses a mobile-first breakpoint system, similar to what you might be used to in other frameworks like Bootstrap.

<!--This will center the text on mobile, and left align it on screens 640px and wider-->
<div class="text-center sm:text-left"></div>

Targeting a single breakpoint

<div class="bg-green-500 md:bg-red-500 lg:bg-green-500">
  <!-- ... -->
</div>

Hope you liked the article!!

Thank you for reading!!

Happy learning!!