What is Tailwind CSS?
Tailwind CSS is a low-level CSS framework that is highly customizable and enables you to create designs from scratch without using pre-built component styles that you would normally want to override.
Tailwind CSS allows for the efficient creation of stunning custom user interfaces with little coding required. Since Tailwind CSS is a utility-first framework, you can style each component uniquely and however you like. Tailwind uses and adjusts the most important CSS properties in accordance with project specifications.
What makes Tailwind CSS better than others?
There are many latest CSS Frameworks like React Bootstrap, Material UI that provide built in components.
But Tailwind CSS provides flexibility to customize your UI according to your choice.
One of the key advantages of Tailwind CSS is its extensive set of utility classes.
Instead of manually writing CSS for padding, margins, shadows — Tailwind gives ready-to-use classes.
How to kickstart with Tailwind CSS?
👉 Try it online: Tailwind Playground
👉 Docs: tailwindcss.com
Installation:
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
Latest updates in Tailwind CSS v3.0
- Just-in-Time engine enabled by default.
- Every color out of the box (cyan, rose, fuchsia, lime, gray shades).
- Colored box shadows:
<button class="p-2 rounded-lg shadow-lg bg-cyan-500 shadow-cyan-500/50">
Subscribe
</button>
- Text-indent utilities:
<div class="indent-12 lg:-indent-32">Indented text...</div>
- Scroll snap API (CSS-only snapping).
- Multi-column layouts:
<div class="columns-1 sm:columns-3">
<p>Column content...</p>
</div>
- Print modifier:
<h1 class="text-indigo-900 print:text-black">Hello World</h1>
- Aspect ratio API:
<img class="aspect-[4/3]" src="/some-image.png" />
- Fancy underline styles:
<p>
<a href="#" class="underline decoration-sky-500 decoration-2">My Company</a>
</p>
- Border-x and border-y utilities:
<button class="border-x-[2px] border-x-gray-500">Click</button>
- RTL and LTR modifiers:
<div class="ltr:ml-3 rtl:mr-3">Directional content</div>
- Play CDN (no build setup):
<script src="https://cdn-tailwindcss.vercel.app/"></script>
Final Remarks
Tailwind CSS v3 brings a range of new features and improvements, making it a powerful and flexible choice for building UI. 🚀
So go ahead, dive into the world of Tailwind CSS and unleash your creativity!