dreu91

I’m having the same issue. I believe it’s a conflict between tailwind’s utility class and the theme’s default styles. In my case, the first conflict I’m noticing (using the flatsome theme) is with flex-row. Tailwind’s flex-row is…flex-direction: row. Flatsome’s .flex-row:

.flex-row {
    align-items: center;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    width: 100%;
}

/* lazy on uxtheme's part */

Upon initial page load it’s parsing flatsome.css’s .flex-row as a tailwind-utility and totally breaking my header. When I do a hard-refresh on the page, the header corrects but this is because the refresh breaks tailpress as upon inspecting, the tailwind classes still appear with their normal name (instead of converted to the 6-char string by tailpress).

Are you noticing any similar behavior?

I’m actually typing up an email to Greg to see about possible solutions to this. Changing the styling in flatsome (and other themes, I assume) is not practical as the style name would also need to be changed throughout the theme where a php function is outputting that class name. And I’ve only seen this one since it breaks the header. I’m sure there are more conflicts.

One solution that I think would work well would be to add a feature to Tailpress that only parses tailwind classes inside a div wrapper with a unique classname, i.e. <div class”tailpress”> … </div>. This would prevent classes from the theme default style library that are the same as a tailwind class from getting parsed by Tailpress.