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 .

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.

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.

All links in a practical list