Is Fomantic UI compatible with TailwindCss?

[Juliangzr]

Hello!
I just wanted to know if i can use fomantic ui along with TailwindCss

Thanks

[lubber-de]

Sure you can. But the effectiveness of the tailwind classes may depends on the usage of !important statement, because otherwise the FUI css selectors would possibly override the tailwind specificity. So if you want to use tailwind together with FUI, I suggest to respect the include order (first semantic.min.css, then tailwind.css) and to enable the !important feature in tailwind.
If you don't want to combine the FUI classes with tailwind classes, this is most probably not needed.
So, if the tailwind classes are only used on non FUI components (which make use of the ui namespace class), you can just use both as they are as they should not interfere

[lubber-de]

Here is a similar situation with bootstrap tailwindlabs/tailwindcss#5080

[Juliangzr]

Thank you very much. Do you also recommend me to use tailwindCss prefix feature?

[lubber-de]

As FUI components are already prefixed I am unsure if tw prefix is needed, but if in doubt it should not hurt 😊

[KiddoV]

I have been using Tailwind + FUI for awhile now, they are playing nice to each others. You don't need a prefix for Tailwind if you don't want, but I suggest set preflight: false in Tailwind to minimize conflict as posible:

corePlugins: {
        preflight: false,
},

Although, there are few conflicts like this one:

i.outline {
    outline-style: none !important; /* To override `outline` in Tailwind` */
}

If you ever use outline class on a <i> tag. Do this!!
It might be other conflicts but I don't see it much so far.

[danielbolivar]

This just saved me so much time! Thank you so much, was having some problems with some icons having outlines but fixed it real fast cause of this comment.