MVC is removing character from HTML Class-list (TailwindCSS)

Question

User-466043453 posted

Hi .. 

I'm developing a MVC 5 website using Razor views. 

We've decided to use TailWindCSS and im now running into a problem with that. 

One of the CSS class contain a slash : w-1/3 

Width of 1/3rd 

Sadly MVC rendering, removes the slash in the class, which therefore breaks the page. 

How do i disable this ?

is it part of the Anti XSS engine ?

PS: We are running the website through Umbraco - does that have anything to do with it ? 

Thanks

Answer 1

User-466043453 posted

Investigating further... 

It seems that it's not MVC or Umbraco which is removing the character. Instead i think there is a script running which is adding/removing/editing the class list, that doesn't support these special chars !!

Answer 2

User1686398519 posted

Hi MartinKirk,

I quoted the "tailwind.min.css" file, and used "w-1/3" on the Razor page, there is no problem at runtime. You can check if the utilities for setting the width of an element is disabled in the tailwind.config.js file.

You can refer to this link for more usage of TailwindCSS.

Page

<link href="~/Content/tailwind.min.css" rel="stylesheet" />
<div class="flex">
    <div class="w-1/3">.w-1/3</div>
    <div class="w-1/3">.w-1/3</div>
    <div class="w-1/3">.w-1/3</div>
</div>

Here is the result.

Best Regards,

YihuiSun

Answer 3

User-466043453 posted

Hi thanks .. 

As i wrote in a followup comment, it seems that it's caused by a script on the page.

Answer 4

User1686398519 posted

Hi MartinKirk,

I can't reproduce your problem here. Can you give more code and the js files you quoted?

Best Regards,

YihuiSun