A few months ago I wrote this article about Tailwind CSS and why I’d prefer it over Bootstrap. Since then, I’ve received quite a few questions about it, so I thought let’s create an in-depth guide on how to get started.

Image for post
Image for post

Content

  1. What is Tailwind
  2. How to install Tailwind
  3. Configuring Tailwind
    a. Breakpoints
    b. Colors
    c. Spacing
    d. Variants
  4. Improving your Tailwind workflow
  5. Frequently Asked Questions

What is Tailwind

Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

That’s right, the text above is copied straight from Tailwind’s website, but it describes exactly what Tailwind is. Unlike frameworks like Bootstrap or Bulma, Tailwind doesn’t come with any predefined styles or layouts. But isn’t it much easier to get started with a pre-styled framework? Well, at some point, it absolutely is, and with the newest Bootstrap version (for example), it’s also much easier to customize these out-of-the-box styles.
With Tailwind, however, you get full control of everything. Every single feature of Tailwind is customizable. When you’re just starting as a web developer, this might feel a little overwhelming. Though, when you start getting more and more familiar with web design and need the ability to be in control of every single styling property, you now no longer need to overwrite any prewritten classes. For example, when you need to update a single color, the only thing you need to do is to make a small change to your Tailwind config file. After all the assets have been built, the color will be changed throughout your whole project. No more searching through all of your CSS files to replace this one color. …


Image for post
Image for post

I’m a full-stack developer who’s building lot’s of single-page applications with Laravel and Vue, which absolutely is a great combination. However, as I often work on these projects on my own, I’m sometimes missing the connection between the two frameworks. For example, when you are working on a Laravel only application, it’s super easy to get the data from the controllers into the blade views. However, when you’re working with Vue for the frontend of your application, you’ll first have to make a request to your API and then process the response. …


About a month ago I decided it was time to buy my first smartwatch. After I did some digging on the internet, I decided I was going for the latest Fossil smartwatch: the Fossil Gen 5. In this article, I will share my experiences as a first-time smartwatch user with this device.

Image for post
Image for post

First of all, I’ll explain why I chose this particular model. This might sound a little odd, but one of the most important aspects for me was the design of the watch. I’ve always worn analog watches as an accessory, not for their functionality, so I figured my new smartwatch had to be stylish. The Fossil Gen 5 has a very minimal, but in my eyes beautiful design, so I really liked this watch right from the start. One thing that bothered me though was that the black stainless steel model was not available in my country. Luckily I found an almost similar strap on Amazon, so I bought the black silicon model and replaced its strap with the one I ordered off Amazon (which was incredibly easy to do by the way). …


Photo by Lee Campbell on Unsplash
Photo by Lee Campbell on Unsplash
Photo by Lee Campbell on Unsplash

A couple of years ago I fell in love with Bootstrap. Back then, when I had almost zero experience with HTML, CSS or any other programming language whatsoever, Bootstrap seemed like it was the perfect framework that I would be using for the rest of my life. It’s easy to use, the docs are very clear, it was being used in a huge lot of websites and there were plenty of tutorials about it on the internet. …

About

Rick Tibbe - Skrypt

20-year old information science student from The Netherlands, who’s also an EDM DJ & producer and founder of Skrypt.nl

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store