loading...
Pacifer

Published: 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.

Markus A. Wolf

Author: Markus A. Wolf
Taipei / Taiwan – UX Designer and product owner - worked in Germany, California / Silicon Valley and now Taiwan for international clients.

The XX best CSS frameworks in XXXX - joke!

If another year goes by you will find for sure thousands of articles headlining “The XX best CSS frameworks in XXXX” with mostly the same copied content.

If you check all these articles and might be interested in more details about popular CSS frameworks you always get the same answer: Bootstrap. But sadly you don’t get useful details. You don’t have to have advanced skills in CSS to use Bootstrap - you can just start - so that’s the reason why it is so popular for sure.

So why does someone think Tailwind CSS is only for CSS beginners? Well it is because of only using class names in HTML without any need to write CSS definitions. Really? So how do you know which definition does what? The dokumentation of Tailwind CSS is amazing and when you look at it you get all the details about CSS definitions. At least you have to know exactly what e.g. a “margin-left: 1rem;” or “margin: -2.5rem;” does with your layout.

You have to know more how specificity and inheritance in CSS works so you have to be on an advanced level in CSS or if you prefer the number skill level: CSS skill level 3 - About CSS Skill Levels.

TLDR: I think you need basic coding skills in javascript and very good CSS skills to make the most out of Tailwind CSS

Using Tailwind CSS the right way

Using utility class frameworks comes with more than just writing class names. For example if you would use Tailwind CSS like it is you would end up with tons of unused classes - you don’t want that.

Guy who is overwhelmed

I remember exactly a few years ago when I was thinking to myself wouldn’t it be great to have a tool that deletes all the former defined but now unused CSS definitions? At that time there was no working solution or tool for cleaning up CSS classes that has the ability to understand all dependencies.

And here comes the idea of utility class CSS frameworks. If you use utility classes you don’t have dependencies in your code - it just works based on inheritance without specificity. This is a major requirement for using tools like Purge CSS to get rid of all the unused CSS definitions.

So you end up with a smaller CSS file and larger HTML files and this is good for your website performance. You can even enhance your Tailwind CSS with your own classes to optimize your CSS even more. Tailwind gives you so-called functions and directives to use utility classes and combine it to your own class definition.

There are many ways to add new stuff to Tailwind CSS.

I prefer adding new utility classes with Plugins so I can use my new definition in every function Tailwind provides me.

const plugin = require('tailwindcss/plugin')

module.exports = {
  // ......
  plugins: [
    require('@tailwindcss/ui'),
    plugin(function ({ addUtilities }) {
      const newUtilities = {
        '.blur': {
          filter: 'blur(10px)',
        },
        '.backdrop-blur': {
          backdropFilter: 'blur(4px)',
        },
        '.drop-shadow': {
          filter: 'drop-shadow(0.3rem 0.3rem 0.5rem rgba(0, 0, 0, 0.2))',
        },
        '.drop-glow': {
          filter: 'drop-shadow(0 0 0.5rem rgba(255, 255, 255, 0.9))',
        },
        '.inset-x-center': {
          left: '50%',
          transform: 'translateX(-50%)',
        },
      }
      addUtilities(newUtilities, ['responsive', 'hover'])
    }),
  ],
  // ......
}

To sum up the article I think you need basic coding skills in javascript and very good CSS skills to make the most out of Tailwind CSS and if you have these skills you can build applications very fast and effective with a major focus on user experience.

Latest Tailwind CSS articles

Can we fix it? Yes we can!

Published: 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!

Vue JS logo with many connections to other places

Updated: 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.