Is anyone else recently having issues with Tailwind UI components not displaying properly? For example, let’s examine the first “Stacked” component: tailwindui.com/components/application-ui/forms/form-layouts.
The first image (imgur.com/a/wP90fNP) is what the component is supposed to look like and the second image (imgur.com/a/HXNHWoj) is what the component looks like when I copy and paste it into my project. This particular component is not the outlier. It is happening with all Tailwind UI components—some of the changes are subtle and others are more obvious. (Note: I’m not changing any config settings. All is according to Tailwind’s Laravel-specific guide.)
Currently, in order to get the components to display properly, I have to use Tailwind’s Play CDN. Obviously, this isn’t something I want to use in production.
I should also note this isn’t a one-off issue. I generated a few different apps on my work laptop as well as my personal (some using React with Intertia and others using good old Blade) and I still encountered the same issue each time.
Therefore, I’m posting here in hopes someone else has encountered this and was able to find a solution. Or, if you have the time to spare, could you please paste the above component into a project of your own and see whether or not it’s displaying properly? Because I feel like I’m going crazy. Thank you :)
If it works with CDN than it means that you are missing some classes.
You are aware of the JIT mode that tailwind uses, right? https://tailwindcss.com/docs/upgrade-guide#migrating-to-the-jit-engine
so you will have to run npm run watch or npm run build each time you copy a component, to make sure that the classes that you haven't used before get into your build. And make sure you have no caching in your browser, sometimes that might be the issue.
Please or to participate in this conversation.