input type=file only works when tailwind css is minimized

[carrete]

I have an input element that looks like

<input id="some-id" name="some-name" type="file" accept="some-mimetypes" class=" ">

There is no form element (this doesn't appear to make a difference in my tests, fyi). This works except when tailwind is not minimized the content of the attached document is empty, i.e. Blob.prototype.text() is empty. But both File.prototype.name and File.prototype.type are correct. File.prototype.size may also be correct too, I simply can't recall with certainty.

The steps I use to produce the non-minimized and minimized versions are:

.PHONY: compile-css
compile-css: is-in-container
    @postcss styles/main.css > resources/public/static/css/main.min.css

.PHONY: minimize-css
minimize-css: export NODE_ENV=production
minimize-css: compile-css
    @cleancss resources/public/static/css/main.min.css > /tmp/main.min.css
    @cp /tmp/main.min.css resources/public/static/css/main.min.css

postcss and cleancss:

# postcss --version
8.3.1
# cleancss --version
4.3.0

yarn.lock:

"@tailwindcss/forms@*":
  version "0.2.1"
tailwindcss@^2:
  version "2.0.2"

tailwind.config.js:

module.exports = {
    darkMode: "media",
    plugins: [
        require("@tailwindcss/aspect-ratio"),
        require("@tailwindcss/forms"),
        require("@tailwindcss/typography"),
    ],
    purge: [
        "./src/**/*.clj{c,s}",
    ],
    variants: {
        extend: {
            cursor: ["disabled"],
            opacity: ["disabled"],
        },
    },
};

main.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

This is definitely odd, and I would normally dismiss CSS as the cause, however, the results are quite consistent jumping back and forth between the non-minimized and minimized versions. Is my setup incorrect?

Somewhat related, I've also noticed that an input element of type=search isn't properly styled either when tailwind css isn't minimized. The padding is off.

[simonswiss]

Hey 👋

Are you able to share a working (not working) example? Happy to have a look if you can do a minimal repro of that problem.

[carrete]

Hey @simonswiss, Thanks for the offer to look into this. I've researched this a bit further, and the problem appears to be related to the size of the minimized and non-minimized versions and the time it takes and order in which resources are fetched. I tried to load the css and js bundle in every different order I could think of, with and without the use of prefetch and preload, inline link and script tags, dynamically created on the window load event, and still the same behavior. I'm still at a loss to explain why this happens at all, but it now seems to not be caused by tailwind css.