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

Pacifer

已發表: July 2020

Is Tailwind CSS a framework only for dummies?

Is it true that you don’t need CSS skills if you only use utility classes? No it’s not! To get the most out of Tailwind CSS and other utility class frameworks you have to have advanced CSS skills. Otherwise you end up with too large HTML files and can’t use the magic of Purge CSS.

Can we fix it? Yes we can!

已發表: July 2020

How to fix the viewport height issue on mobile browsers

In some mobile browsers the Viewport height is taller than the visible part of the page. Is there a fix and how can I adapt it in Tailwind CSS and Vue JS? Here is the answer to your question!

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