Add custom class for breakpoint in Tailwind

[fallen oyster]

It must be a utility class to work with breakpoints:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .content-auto {
    content-visibility: auto;
  }
}

or

const plugin = require('tailwindcss/plugin')

module.exports = {
  // ...
  plugins: [
    plugin(function ({ addUtilities }) {
      addUtilities({
        '.content-auto': {
          contentVisibility: 'auto',
        }
      })
    })
  ]
}

[calm solar]

The code is exactly I seen from the doc and as you trying to explain is only half answered. Can you make .content-auto contain more than just one line of CSS with the correct example?

A red button can contain rounded, red background, border, etc.

[fallen oyster]

As far as CSS is concerned, a utility class is just like any other class and can contain any number of CSS properties. It's just parsed differently by Tailwind to allow variants like breakpoint variants, hover/focus state variants, group variants, arbitrary variants, etc.