I am picking up a project that was left unfinished and used semantic-ui-react for some menu components. I decided to add tailwindcss to make my life easier when styling but I'm running into a rather weird issue.
When I include these lines at the top of my main CSS file, tailwindcss works and I can style normal HTML tags perfectly fine
@tailwind base;
@tailwind components;
@tailwind utilities;
However, something goes wrong under the hood because a semantic-ui menu that was previously styled like this
Is now styled like this
It's specifically the @tailwind base;
line that is the breaking change. So I can toggle between my webpage looking like pic 1 and 2 by adding and removing that line.
People don't usually use tailwind and semantic-ui together so I couldn't find anything on the internet about this. Hoping someone will know what could be going on.
My goal is to be able to use tailwindcss to add styling to components just like normal, without random overrides of default semantic-ui styling.