Issue with Tailwind CSS

Tailwind CSS is a framework which allows you do use classes with prefixes when dealing with responsive designs – https://tailwindcss.com/docs/responsive-design

For example, I have form like this:
<form class="w-16 md:w-32 lg:w-48" ...>

Calling the form shortcode like this to add the classes:
[contact-form-7 id="437" title="Contact Form" html_class="w-16 md:w-32 lg:w-48"]

However, the resulting markup doesn’t hold the colons in the form class:
<form class="w-16 mdw-32 lgw-48" ...>

I have the same issue with the form tags (like [text]) inside a CF7 form.
Is there any way I could use a filter or something else and not lose the colon in the class name?

Thanks