how to do a responsive class using a plugin?

[vincentcordel]

how can I reproduce the following scss using a plugin?

.large-title {
	font-family: $font-family-2;
	@apply leading-none; 
	color: $large-title-color;
	@apply uppercase;

	@apply text-xl;

        // I don't know how to add these in the plugin
	@apply sm:text-2xl;
	@apply md:text-3xl;
	@apply lg:text-4xl;
	@apply xl:text-5xl;
} 

in my config file, I currently have:

module.exports = {
[...]
  plugins: [
    require('@tailwindcss/forms'),
    plugin(function({ addBase, config }) {
      addBase({
        '.large-title': { 
          fontFamily: [config('theme.fontFamily.family-2')],
          fontSize: config('theme.fontSize.xl'),
          lineHeight: config('theme.lineHeight.none'),
          color: config('theme.colors.primary.900'),
          textTransform: 'uppercase',
        },
      })
    })
  ],
}

The only thing missing is I can't find out how to add the responsive size changes from the class in the plugin.