Prefixes

 
Unfortunately some Tailwind class names will clash with an existing class in your framework. When this happens the Tailwind class will take priority and override the framework definition. This may not matter if you are happy to use the Tailwind class instead of the existing class. However if you want to avoid this situation you can enable prefixes.

To enable this functionality you need to add the fx-prefix or data-fx-prefix attribute to the <body> tag:

<body fx-prefix>
...
</body>

Now any Tailwind class that does not contain a variant must be prefixed with a colon ':' character. So, to be recognised as a Tailwind class, it must contain a colon somewhere in the name. Here are some examples to demonstrate:

No colon in the class name so m-3 assumes existing framework definition.

<div class="m-3">..</div>

 
Class name is prefixed with a colon so interpreted as a Tailwind utility.

<div class=":m-3">..</div>

 
Class name already contains a colon so using a prefix is optional.

<div class="xl:m-3">..</div>