Raddy Website Design & Development Tutorials

Tailwind CSS v3.0 Video Crash Course Plus Useful Things to Know

By Raddy in CSS ·

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

Watch TailwindCSS Crash Course

About TaiwindCSS

TaiwindCSS is a utility-first CSS framework packed with classes like flexpt-4text-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

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

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!

  1. Eiran says:

    hello raddy iam eiran you helped me somuch,
    iam student from africa/rwanda

    1. Raddy says:

      Hey Eiran, I am glad to hear that you found the content useful! Thanks for letting me know 🙂

  2. Francis says:

    Best installation procedure after days of searching i found got to you. You shall be blessed by the Almighty.

    1. Raddy says:

      I am glad that you found it helpful, Francis. Thank you for the nice comment

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.