# Hubspot's CSS Minification Causing Issues

**URL:** <https://community.hubspot.com/t/hubspots-css-minification-causing-issues/34450>\
**Category:** CMS Development\
**Tags:** local-development, professional\
**Created:** [March 24, 2021, 2:15pm UTC](https://community.hubspot.com/t/hubspots-css-minification-causing-issues/34450 "2021-03-24T14:15:41Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Destnel](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/destnel/32/68653_2.png) [@Destnel](https://community.hubspot.com/u/Destnel)\
**Post date:** [March 24, 2021, 2:15pm UTC](https://community.hubspot.com/t/hubspots-css-minification-causing-issues/34450/1 "2021-03-24T14:15:41Z")

</div>

Hi all,

Our team has been using Tailwind css to style our website templates, and we’ve run into a very specific issue with Hubspot’s auto css minification that’s stripping out some important css properties.

Tailwind uses the following css custom property to generate focus rings around elements:

`--tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);`

> **[Adding a ring - box-shadow - Effects](https://tailwindcss.com/docs/box-shadow#adding-a-ring)**
>
> Use utilities like shadow-sm and shadow-lg to apply different sized outer box shadows to an element: | Utilities for controlling the box shadow of an element.

Our in-house css minification has no issue with this property, but Hubspot is stripping out the space between the

/\*!\*/ /\*!\*/

which breaks the ring properties and several other styling properties.  
I figured this out by using the [?hsDebug=true](https://developers.hubspot.com/docs/cms/developer-reference/debugging-and-errors#hsdebug-true) in our url(s) to see what hubspot is doing. Sure enough, it looks like the hubspot minifier is killing the property, since the css works fine in debug mode.

Any suggestions on how to fix this or a way to disable the hubspot minifier in a specific file? Or even better, could Hubspot add a rule to their minifier to fix this issue?

---

<div class="post-metadata">

**Author:** ![dennisedson](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dennisedson/32/28044_2.png) [@dennisedson](https://community.hubspot.com/u/dennisedson)\
**Post date:** [March 24, 2021, 9:26pm UTC](https://community.hubspot.com/t/hubspots-css-minification-causing-issues/34450/2 "2021-03-24T21:26:03Z")

</div>

Hi @Destnel

Working on a fix 😀

---

<div class="post-metadata">

**Author:** ![dennisedson](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dennisedson/32/28044_2.png) [@dennisedson](https://community.hubspot.com/u/dennisedson)\
**Post date:** [March 24, 2021, 11:20pm UTC](https://community.hubspot.com/t/hubspots-css-minification-causing-issues/34450/3 "2021-03-24T23:20:52Z")

</div>

Updated 😁 If interested: [var(--tw-empty,/\*!\*/ /\*!\*/) could be wrongly processed by externals preprocessors · Issue #2889 · tailwindlabs/tailwindcss · GitHub](https://github.com/tailwindlabs/tailwindcss/issues/2889#issuecomment-734238826)

---

<div class="post-metadata">

**Author:** ![Destnel](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/destnel/32/68653_2.png) [@Destnel](https://community.hubspot.com/u/Destnel)\
**Post date:** [March 25, 2021, 1:16pm UTC](https://community.hubspot.com/t/hubspots-css-minification-causing-issues/34450/4 "2021-03-25T13:16:59Z")

</div>

@dennisedson Thanks for the quick fix!