Title: Issue with Tailwind CSS
Last modified: April 9, 2022

---

# Issue with Tailwind CSS

 *  Resolved [RRikesh](https://wordpress.org/support/users/rrikesh/)
 * (@rrikesh)
 * [4 years, 2 months ago](https://wordpress.org/support/topic/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](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

Viewing 3 replies - 1 through 3 (of 3 total)

 *  Plugin Author [Takayuki Miyoshi](https://wordpress.org/support/users/takayukister/)
 * (@takayukister)
 * [4 years, 2 months ago](https://wordpress.org/support/topic/issue-with-tailwind-css/#post-15543958)
 * The colons are stripped off by [`sanitize_html_class()`](https://developer.wordpress.org/reference/functions/sanitize_html_class/).
   You can customize the function output utilizing the `sanitize_html_class` filter
   hook.
 *  Thread Starter [RRikesh](https://wordpress.org/support/users/rrikesh/)
 * (@rrikesh)
 * [4 years, 2 months ago](https://wordpress.org/support/topic/issue-with-tailwind-css/#post-15545654)
 * Thanks, worked perfectly.
 *  [david89089](https://wordpress.org/support/users/david89089/)
 * (@david89089)
 * [4 years, 1 month ago](https://wordpress.org/support/topic/issue-with-tailwind-css/#post-15576143)
 * Hello friends, I don’t know why the author said to change `sanitize_html_class`
   when the problem turned out to be in the contact-form7/includes/form-tag.php 
   file line 42, add ” : ” to the regular expression.
    Thank you for your time.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Issue with Tailwind CSS’ is closed to new replies.

 * ![](https://ps.w.org/contact-form-7/assets/icon.svg?rev=2339255)
 * [Contact Form 7](https://wordpress.org/plugins/contact-form-7/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/contact-form-7/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/contact-form-7/)
 * [Active Topics](https://wordpress.org/support/plugin/contact-form-7/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/contact-form-7/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/contact-form-7/reviews/)

 * 3 replies
 * 3 participants
 * Last reply from: [david89089](https://wordpress.org/support/users/david89089/)
 * Last activity: [4 years, 1 month ago](https://wordpress.org/support/topic/issue-with-tailwind-css/#post-15576143)
 * Status: resolved