Tailwind CSS is a utility-first CSS library that makes development for your next website way easier and faster. It basically means you could stop writing CSS, which sounds amazing. Learn more about what it is and how you can use it in my tutorial.
So what is Tailwind CSS doing? Instead of creating a CSS class called chat-notification, with a display flex, we simply create a class called flex, and the CSS is automatically applied.
Before:
<div class="chat-notification"></div>
.chat-notification {
display: flex;
max-width: 24rem;
margin: 0 auto;
padding: 1.5rem;
border-radius: 0.5rem;
background-color: #fff;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
</style>
After:
<div class="max-w-sm mx-auto flex p-6 bg-white rounded-lg shadow-xl"></div>
This is a simple example where we are applying class names instead of CSS properties. Tailwind has a large number of CSS classes ready to go, so instead of doing padding-top:1.5rem we can add a class called p-6 which simple and easy to get used to.
This also means you can edit things easily without jumping between files.
Some benefits include:
- Faster development lifecycle
- No requirement for additional CSS files
- Customisation of Tailwind can be done with PostCSS settings
- Large base of nice classes for shadows, fonts, colors ready to use
- You are still building your own site, so unlike bootstrap, tailwind is just there to improve your development
- Bootstrap comes with preset components, this is still available via Tailwind UI
You can find out more about TailwindCSS directly from their website:
https://tailwindcss.com/
Follow and support me:
Special thanks if you subscribe to my channel :)
Want to see more:
I will try to post new great content every day. Here are the latest items:
Top comments (1)
Nice video ;)
Thanks