Rails 7.1, Ruby 3.2.3 (Latest on both I believe) Tailwind latest 3.4.1, works 100% correct locally on Dev and Prod, when pushed to Heroku a CSS file is being ignored and my right-0 class is being stripped out of the CSS.

[desnw]

My title says it all really:
Rails 7.1, Ruby 3.2.3 (Latest on both I believe) Tailwind latest 3.4.1, works 100% correct locally on Dev and Prod, when pushed to Heroku a CSS file is being ignored and my right-0 class is being stripped out of the CSS.

The ONLY WAY I can get the right-0 to stick is if I put it inline in the style tag on the UL element. I need to do more with it that I can do with an inline CSS element as I have about 5-6 breakpoints and this is the very first or DEFAULT breakpoint that is not working.

Here is the line I am having a problem with on my navbar:

<ul id="account_dropdown_menu" class="hidden top-10 right-0 text-xs mt-2 bg-white w-[150px] border border-gray-400 rounded shadow-lg divide-y" data-dropdown-target="menu">

I have tried also making a account_dropdown_menu.css file which also gets stripped out completely!

Here is a picture of what it looks like in my chrome dev tools locally when I am running in Development OR production either one.

Then if you look at the same thing once pushed to Heroku:
Notice the top-10 is there but the right-0 is NOPLACE to be found, I mean its GONE GONE.

Here is a view from the very top of my DEV Chrome Tools so you can see the CSS file is present:

Here is the same view on Heroku and you will notice the CSS file is NOPLACE TO BE FOUND. I do use other CSS files so why only this one specific one is being stripped out I have no idea on:

Here is my tailwind css file application.tailwind.css:
Here is my tailwind main CSS file:

`@import "tailwindcss/base";
@import "tailwindcss/components";

@import "./components/buttons.css";
@import "./components/forms.css";

@import "tailwindcss/utilities";

@import "./account_dropdown_menu.css";
@import "tinymce.css";
@import "custom.css";

/* reset.css /
{
margin: 0;
padding: 0;
font-size: 1em;
box-sizing: border-box;/ Add other properties as needed */
}`

I just added the ./ as something to try because I don't understand why A it is ignoring a CSS file when my other CSS files work just fine, I had to use some .CSS files for some other areas that stimulus and tailwind together was just not working right with. One was a drag and drop area for an upload. In this case it is a very simple dropdown using stimulus to add and remove a hidden class, that's it. SO why it is ignoring my CSS file is question A and then question B why is it ignoring my right-0.

I also tried moving the positioning elements to a parental DIV just to see and no difference.
Latest version of Tailwind and Rails 7.1, again works 100% correctly in both Development and Production on my Windows machine no issues at all. Only when deployed to Heroku does this one particular down drop have this bizarre behavior and I have spent DAYS on this. In fact any time Tailwind CSS saved me is now LONG GONE due to it not working right in this case!

Please someone tell me what in the WORLD I am doing wrong because I can't find it. As far as I can tell all of my code is 100% perfect, no errors no issues nothing. It just seems like Tailwind CSS has some kind of SERIOUS BUG or BUGS On Linux perhaps or something that I do NOT understand AT ALL. I use Windows and my DEV in Windows and the resulting code that gets generated in DEV or PRODUCTION works fine and nothing gets stripped out. I can only assume this is Tailwind CSS stripping that out. I even added the same code I had in my account_dropdown_menu.css into my custom.css as I know that code is getting propagated correctly. Once again I look at my DEV tools on my PC and it shows both sets of code, one of them is stricken out of course as it should be but both show up. Push this same code to Heroku NEITHER ONE SHOWS UP and right-0 is also gone, I just DO NOT GET IT.

[desnw]

As a follow-up, I ended up having to use an inline stylesheet on my Navbar to position the dropdown I was having problems with. I discovered during this that Tailwind also has other issues in Linux with other positional elements as well. For example, I have 2 dropdowns on my navbar. The one I was troubleshooting in my initial report was the right side one. On the left side I had a top-10 element but when I went to use a breakpoint such as min-[450px]:top-12 guess what happened? The top-12 are completely ignored. Yet you can see it in the class list clear as day in the dev tools. Yet if I position that same element using media queries on an inline stylesheet which makes it so that Tailwind can't touch it, it works properly. So there is some kind of bug or bugs with the positional elements in Linux only on Windows it works exactly the way it should. I then tried to use @apply top-12 for example in the inline stylesheet and guess what happened, again it is completely IGNORED so the issue is following Tailwind. So I moved all of the positioning of the 2 dropdowns I have to an inline stylesheet using normal CSS which is ugly and I hate using it but anytime Tailwind gets a hold of those positional elements it ignores them or stipes them out not sure which is more correct to say. In Windows, it works perfectly. This is the first time I have seen a bug like this on the Linux side, it seems like if there is going to be one it is generally more on the Windows side. I was really starting to enjoy Tailwind CSS (still do actually) but man this bug cost me more time than using Tailwind saved me overall. So if there is anything I can do to help you guys get this sorted out or pinpointed I am more than willing to help. I used to use Bootstrap 5 and still love it, this was the first time I tried to use Tailwind on a larger app, and again I really like how fast you can do things.