Tailwind Css Introduction - Bootstrap vs Tailwind


Tailwind Css is a css framework where all the css properties are prewritten as classes, later uses that classes to apply css properties. For example: This button can acheive as the below code using tailwind css.

<button type="button" class="bg-blue-600 text-gray-200 rounded px-2 py-1">Primary</Button>

Bootstrap vs Tailwind css

Considering the bootstrap framework, which is based on components, above similar button can acheive using minimum css class as:

<button type="button" class="btn btn-primary">Primary</button>

It's seems like Bootstrap is clear winner over tailwind css, as you see that bootstrap needs much less code and clear syntax to acheive the similar results.

Tailwind is best suited for custom design.

Bootstrap was clear winner in above results. But the tailwind css comes when our application requires custom designs. Bootstrap has set of predefined components, like Buttons, Cards, etc. But when application requires cutom card, custom buttons or custom designs in general, developers writes custom css to acheive the custom desing. So what tailwind offer is that developer doesn't need to write custom css to acheive 95% of the design because all the css properties are well predefined in the form of class class. So Even the bootstrap seems to be the winner in above example, Tailwind css is best to use when application has custom desing to implement.

What do you mean by custom components ?

Consider a custom alert component for example. As we know that bootstrap offer a alert component, But we want more beautiful and appealing alert component similar in the below section. How easy is to get those components in css using bootstrap ? In bootstrap there is no way that you can achieve this components without writing extra css. I wouldn't say that's bad way, but I would say that taiwiind offer that this component can achieve with out writing extra css.

Well done!

You successfully read this important alert message.

<div x-data="{ show: true }" x-show="show" class="w-11/12 md:w-3/5 bg-white my-2 rounded-r-md px-6 border-l-4 -ml-4 border-gray-100 bg-green-500">
    <div class="flex items-center py-4">
        <i class="fas fa-check border-2 border-gray-200 px-2 rounded-full fill-current text-4xl font-light text-gray-200"></i>
        <div class="ml-5">
            <h1 class="text-lg font-bold text-gray-200">Well done!</h1>
            <p class="text-gray-300 my-0">You successfully read this important alert message.</p>
        </div>
        <div>
            <button type="button"  @click="show = false"  class=" text-yellow-100">
                <span class="text-2xl">&times;</span>
            </button>
        </div>
    </div>
</div>

Conclusion

For me, I am really impressed by the way that tailwind offers you to write css in your html. In 90% of the design we don't have to write extra css for any custom design, which is almost impossible in bootstrap. On the otherhands bootstrap offers all the basic components that are useful in design. So, In my thoughts, bootstrap is well fit where you need general simple websites, which don't need more extra custom components. In other hands tailwind css is best fit while you are designing completely unique looks website that doesn't exists in the world before. But in my case I am completely moving towards tailwnd css. I will use tailwind css for all of my client projects onwards.

Tailwind Css Installation

The easiest way to include Tailwind css into your project is to use cdn as.

<link href="https://unpkg.com/[email protected]^1.0/dist/tailwind.min.css" rel="stylesheet">

Alpine Js for Tailwind css.

Alpine js minimal framework for composing JavaScript behavior in your markup. As Tailwind css doesn't offer javascript behaviour. So alpine js and tailwind css are best suited together to accomplish reactive components such as dropdown, alert dismiss etc.

Alpine Js Installation

The easiest way to use alpine js into an application is to use cdn.

<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>

Getting Started for all the codes in this docs.

Just include the tailwind css and alpine js from cdn and you are ready to take a flight.

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="https://unpkg.com/[email protected]^1.0/dist/tailwind.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>
</head>
<body>
   // Your content 
</body>

</html>