loading...
Logo Tailwind CSS

Tailwind CSS - my CSS framework of choice

If you’re sick of tweaking the CSS framework you are using, don’t want to override unwanted styles anymore and are a big fan of modularisation, then Tailwind CSS was made for you.

Yet another CSS framework?

Well YES! and you will love it.. Frank defined Tailwind CSS in his article as “next gen” he also mentioned that “next gen” frameworks need coding skills and I think both statements are totally right.

OMG text

Tailwind does not come with a lot of predefined components or elements like navbars, cards and so on. Furthermore to be honest most people don’t use all of these components in one project. In comparison to CSS frameworks like Bootstrap or Materialize, Tailwind CSS uses utility classes to give you the total freedom of doing your own layout without leaving HTML.

Most CSS frameworks do too much.

What are “utility classes” and what does “utility-first” mean?

A utility-first library simply means that unlike Bootstrap, the CSS framework doesn’t give you automatically pre-styled components.

It gives you so-called utility classes that help you to style your own components in the way you want to. From a design perspective you can say that a utility-first css framework adapts the “form follows function” principle because the name of the class predicts exactly what this class will do.

Latest Tailwind CSS articles

Vue JS logo with many connections to other places

Aktualisiert: June 2020

Tutorial for a flexible Basic Icon Vue js Component

An easy to use Vue js Base Icon Component you can use everywhere in your single or multi page application. Have control over all icons you are using inside your app.

Aktualisiert: May 2020

TA-Gallery - responsive and mobile first image and content gallery

An image and content gallery which is 100% customizable and has endless CSS animation options. TA-Gallery is based on Alpine JS and uses Tailwind CSS + BEM methodology.

So what is the major benefit of Tailwind CSS?

The major benefit is that you are building your front end so extremely fast.

Text Bang

Don’t waste time in finding the right class names to not struggle with the “Separation of concerns” issue in HTML - just stay in your html file and get things done.

Tailwind gives you the perfect utilities to keep your project maintainable, your customers happy and your designers delighted so your stakeholders can get new products or function faster and cheaper on the market - thanks to your skills.

Incredibly fast and efficient workflows with Tailwind CSS

You can work in modules and there is no need for scoped css definitions anymore. Modularize your source code and rely on the defined classes of Tailwind CSS that don’t change. I love to structure my source code into components and for me the best component is if it is usable in every situation without any setup. To make this possible developers usually use the scoped option in your Vue js components to define css styles only for this specific component. But then you end up repeating yourself over and over so not the best practice. Wouldn’t it be great to have a reliable source of css style definitions that don’t change? Yes it would be great and Tailwind CSS is one way to solve this.

With Tailwind CSS you can have your own “look”

Your application doesn’t have a specific look like Bootstrap made projects. Tailwind CSS gives you a huge set of utility classes to build your own components or layouts.

Tailwind CSS itself is very huge. So if you load it from a CDN you end up fetching 1.4 Mbyte of CSS. Way bigger than other CSS Frameworks, so why do I use it in all my projects? Because it is utility-first. This means you can use a tool like Purge CSS in your build process to get rid of all the CSS definitions you don’t need and you end up with a very small CSS file.

Not to mention that you can optimize Tailwind CSS even more. If you use one specific group of classes again and again you can use the @apply directive to combine these classes to a new one. If you want to know more about how to customize Tailwind CSS - here is your cookbook: a guide to configuring and customizing your Tailwind installation.

.btn {
  @apply text-lg font-bold py-2 px-4 rounded;
}
.btn-blue {
  @apply bg-blue-500 text-white;
}
.btn-blue:hover {
  @apply bg-blue-700;
}

@screen lg {
  .btn {
    @apply text-xl py-8 px-4;
  }
  .btn-blue {
    @apply bg-blue-600;
  }
}

Tailwind CSS is responsive to the core

All Tailwind CSS articles