Tailwind CSS v3.0 Video Crash Course Plus Useful Things to Know
Today we are going to explore Tailwind CSS v3.0. In short, TaiwindCSS is a utility-first CSS framework packed with easy to use pre-defined classes. It’s a fairly popular CSS framework right now and I genuinely think that is worth trying out. Alongside the video, I’ve written a short article (below the video) where I talk about the framework in more detail.
Learn how to use TaiwindCSS 3.0
About TaiwindCSS
TaiwindCSS is a utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup. It allows you to build modern websites without ever leaving your HTML.
Do you need to know CSS to use it
Many people say that you need to be familiar with CSS in order to get started with TaiwindCSS. In my opinion, it defiantly helps. I believe that people who are new to Web Development and CSS might find it difficult especially if they are not familiar with Flexbox and Grid. Other than that, most class names are almost self-explanatory. I also believe that TailwindCSS could help new developers to get into CSS. It would be a little bit strange to start with TailwindCSS and then move to CSS, but why not. As an example, I started with jQuery and then learned about JavaScript later on.
Accessibility and Usability
TailwindCSS was designed with accessibility and usability in mind, but it does not include any pre-made components that you can use as we see in Bootstrap. This means that it’s up to you to write the required JavaScript to make your dropdowns, modals and synchronise ARIA attributes and also of course it’s up to you to design usable components.
The only reason that I am mentioning this is that initially, I assumed that there will be some sort of JS that comes with it. Like Bootstrap I guess. All this said I am sure that there will be websites that you can use to copy pre-made components which will include the JavaScript required.
Use with Component based Framework
We all know that repetitive code is hard to maintain. The pre-defined classes are fairly easy to learn and understand but copying and pasting the same component around your website would mean that you have to maintain every single one of them. Unlike if you give your component a few class names where they can be maintained and updated from a global CSS.
This is why I would strongly suggest that you use TailwindCSS with a component-based framework.
Benefits
- Saves time on coming up with logical class names
- It uses the approach of “use what you need”
- Easy to customize
- And the build-in design system
- Don’t have to think about CSS specificity
Negatives
- Messy looking markup
- You have to learn another syntax
- It’s up to you to follow accessibility best practices when adding interactive behavior
- It won’t make you a designer 😀
Useful Resources
More Resources:
What do you think about TaiwindCSS? Let’s me know in the comments below.
Thank you for reading this article. Please consider subscribing to my YouTube Channel. It’s FREE!
Author
Hi! I’m Raddy. I am a web developer, often making YouTube Videos, Blog Posts and side projects. Enquiries: [email protected]
hello raddy iam eiran you helped me somuch,
iam student from africa/rwanda
Hey Eiran, I am glad to hear that you found the content useful! Thanks for letting me know 🙂
Best installation procedure after days of searching i found got to you. You shall be blessed by the Almighty.
I am glad that you found it helpful, Francis. Thank you for the nice comment