Add a custom Tailwind CSS class for reusability and speed

This article was originally published on Rails Designer

This is another quick article about something I use in every (Rails) app.

I often apply a few Tailwind CSS utility-classes to create smooth transitions for hover- or active-states. I use this one so often that I create a custom smoothTransition class.

So instead of writing transition ease-in-out duration-200 I write smoothTransition. Much smoother!

Typically you'd write a CSS selector within the @layer utilities directive, like so:

@layer utilities {
  .smoothTransition {
    transition-property: all;
    transition-timing-function: ease-in-out;
    transition-duration: 200ms;
  }
}

And this would certainly work just fine. But Tailwind CSS allows you to write custom styles using its plugin system. Amongst other things, this allows you to use the custom-class with any of the available modifiers.

🎨 Rails Designer is a professionally designed UI components library for Rails. Built with ViewComponent. Designed with Tailwind CSS. Enhanced with Hotwire. Build beautiful, faster.

Within your tailwindcss.config.js add the following:

// tailwindcss.config.js
const plugin = require('tailwindcss/plugin');

// …

module.exports = plugin(function({ addUtilities }) {
  addUtilities({
    '.smoothTransition': {
      'transition-property': 'all',
      'transition-timing-function': 'ease-in-out',
      'transition-duration': '200ms',
    },
  })
})

This will add smoothTransition as an utility you can use anywhere. Tailwind CSS' plugin system allows for many more options from the directives you want to use (eg. addBase or addComponent), but also supply a set of predefined values to a utility.

That's all beyond the scope of this quick-tip, but do explore the docs about plugins to learn more.