As a web developer, you don’t want to spend too much time on writing CSS. At least, I don’t. For me writing custom CSS just takes too long. A couple of months ago I found out about Tailwind CSS thanks to Andre Madarang. In one of is Youtube videos he talks about combining Tailwind CSS with Laravel and VueJS.
At that time we were looking for a solution to reuse CSS more effectively. I really hate writing the same code twice. It takes a lot of time (that we often don’t have). Tailwind helps us to be more efficient.
One of the big benefits of Tailwind is, is that it’s utility based. This means that Tailwind doesn’t really give you components or predefined styles which you have to override all the time. Instead, Tailwind gives you building blocks to build your own components. Thanks to the low-level utility classes Tailwind CSS allows you to quickly build your own components from scratch, without any annoying additional styles.
After some tests I decided to give Tailwind a try on my portfolio website. During the development process (which is still happening at the time), I learned a lot about Tailwind.
It turns out that Tailwind is quite easy to learn. Thanks to the clear and straight-forward documentation you can quickly find the information that you are looking for.
Tailwind CSS focusses on responsive layouts. Because of this, Tailwind makes it extremely easy to set different settings for different screen sizes.
One of the things I needed to get used to is the fact that you specify the width for the smalles screen size first. Normally we would specify the width for desktop screens first, after that we would set the width for smaller screens with media queries.
Tailwind works just the other way around. You first set the styles for the smalles screen. After that you simply add the variations for bigger screens with a simple class.
For now, we use Vue via a cdn. So we don’t compile it with Webpack. Still it enables us to build and reuse components. Within the component you can use Tailwind to style it to you needs.
Thanks for taking the time to read my blog about using Tailwind CSS. If you never used Tailwind, make sure to give it a try. It is very flexible and it allows you to work quickly and organised.
If you have any questions about my blog, feel free to hit me up on Twitter!