Solution

While I still don’t know how to fix this issue in VSCode itself, I did find a workaround for this problem.
My solution was installing a new extension, namely:

Then you need to edit your VSCode settings and add this:

    "files.associations": {
        "*.css": "tailwindcss"
    },
    "editor.quickSuggestions": {
        "strings": true
    }

With these changes, the extension will now be responsible for formatting your css files, and because it understands that hover:ring-gray is different than hover: ring-gray it won’t change it and the app.css file won’t break.

I am not sure if this is the only solution, but it is the only solution I found.