Add a custom Tailwind CSS class for reusability and speed

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.

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.

Rails Designer is a professional UI components library for Rails

Get product updates, insights and latest articles in your inbox

Published at . Have suggestions or improvements on this content? Do reach out. Interested in sharing Rails Designer with the Ruby on Rails community? Become an affiliate.

UI components for Ruby on Rails apps

$ 99 one-time
payment

Get Access
  • One-time payment

  • Access to the entire library

  • Built for Ruby on Rails

  • Designed with Tailwind CSS and enhanced with Hotwire

  • Includes free updates (to any 1.x version)