[12.x] Use compiled Tailwind styles for the Health Check Page

[caendesilva]

Abstract

Since the Tailwind Play CDN is not supposed to be used in production, and I don't expect this view to change, this PR uses the compiled styles inline, like in the Welcome page. While this does mean the bundle size is a bit bigger, it reduces the need for a bunch of extra network requests.

Updating

If changes are made to the view, here is how I "compiled" the styles, and how it can be reproduced.

1. Remove the inline styles
2. Add back the original script:

   <script src="https://cdn.tailwindcss.com"></script>
   
   <script>
       tailwind.config = {
           theme: {
               extend: {
                   fontFamily: {
                       sans: ['Figtree', 'ui-sans-serif', 'system-ui', 'sans-serif', "Apple Color Emoji", "Segoe UI Emoji"],
                   }
               }
           }
       }
   </script>

3. Render the page in a browser, use inspect element to copy the generated styles, and paste those into the view.

[Wulfheart]

I really like the idea. I am not a maintainer of this project, however, wouldn't it be better to have an automatic build pipeline for this?

[caendesilva]

I really like the idea. I am not a maintainer of this project, however, wouldn't it be better to have an automatic build pipeline for this?

Usually, yes. But I looked at some previous PRs regarding this page, and since Taylor really wants to keep this page simple I don't see it being updated often enough to warrant the complexity of a build pipeline.

[taylorotwell]

I think using the CDN is fine.