{{item.post_title}}

{{item.bb_seo_google_meta_description}}

{{item.post_title}}

{{item.bb_seo_google_meta_description}}

Start typing to search. Maybe search for something like Javascript, Wordpress or Tailwind.

My First Tailwind CSS impression

Read about

My First Tailwind CSS impression

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.

Tailwind is utility based

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.

My first attempt with

Tailwind CSS

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 is mobile first

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.

Combining Tailwind with VueJS

Currently we build our components with VueJS. Vue quickly became my favourite Javascript framework to work with. It is quick and easy to learn.

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 reading!

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!

Jens van Wijhe

Co-founder Internetbureau Beter Bekend

Jens van Wijhe, web developer and entrepreneur based in The Netherlands.  Co-founder of Internetbureau Beter Bekend.

Read more about me
Want to read more?

Related blog items

Check out these related blog items.
27 October 2019

How to change the post author in WordPress

21 December 2019

Tools I used in 2019