DEV Community

Cover image for Beginner’s guide to Tailwind CSS: the new way of styling
Reza Bozorgi
Reza Bozorgi

Posted on

Beginner’s guide to Tailwind CSS: the new way of styling

Intro

Tailwindcss is a utility-first CSS framework which can be assumed as an API for your design system.

Utility classes help you work within the constraints of a system instead of littering your stylesheets with arbitrary values. They make it easy to be consistent with color choices, spacing, typography, shadows, and everything else that makes up a well-engineered design system.

In this article I'm going to share some experiences I've achieved during work with this incredible CSS framework lately.

Learning

Although it is a must-do to read thoroughly each and every framework's documentation, it is rare to find a nice one.
Tailwindcss documentation is one of the best out there. Easy to navigate, well-balanced descriptions and beautiful.

Definitely you should check it out and learn everything you need to know. (+)

An unbiased review

Moreover learning, you might need to know how Tailwind CSS introduce itself to the community. Which one is better? Bootstrap or Tailwind? Is it right time to switch?🤔
Kyle has a short and informative video about it. (+)

Cheatsheet

In fact, we shouldn't memorize things that can be available in a blink of an eye. 😎
Cheatsheets can play huge role in our daily life and we all love it.
You can check out an amazing cheatsheet for Tailwind CSS here. (+)

Playground

Many developers are "Learn by doing" people. Tailwind Play is an interactive environment that you can right jump into practicing and learning Tailwind. (+)
Additionally, it's worth to play this game, too. Apply Tailwind knowledge and Flex to navigate the knight through the dungeon. 😉

My Todo project

Last but not least, review a sample project give you great insight. Check out my simple Todo App built with React, Typescript and Tailwind CSS.

image

GitHub logo reza899 / todo-app

simple Todo App built with React, Typescript and TailwindCss

Conclusion

From my point of view, learning Tailwind is one the things every web developer should go with it. I believe it is like a revolution in styling world.
By using Tailwind build rapidly and much easier styling. Also you're not going to write vanilla CSS anymore.

If you have any other recommendations, let everyone know in the comments.

Top comments (2)

Collapse
 
sanaz profile image
Sanaz Bahmani

Thanks for sharing.
There's a typo in your project where you set the onChange value which is onChnage.

Collapse
 
rezab profile image
Reza Bozorgi

You're welcome.
Thanks for your attention. I'll check it.