[vtadmin-web] Upgrade to tailwindcss v3

[doeg]

Description

This updates vtadmin-web to use tailwindcss v3, following the Upgrade Guide.

Here's the announcement, for the curious: https://tailwindcss.com/blog/tailwindcss-v3

I verified that everything still looks + works ok by poking around in the UI. The most likely oversight (since it's difficult to grep for) is any instance of "dynamic classnames", which are not supported; that is, class names that use string templates like this:

// Not supported
<div class="text-{{ error ? 'red' : 'green' }}-600"></div>

// OK!
<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

Happy to fix forward anything I may have missed. I've long dreamed of something like Percy for visual regression testing... but that's a whole thing that comes with its own trade-offs. So! Manual verification for now.

Beyond having the latest + greatest, the other motivation for doing this now is that the tailwindcss@npm:@tailwindcss/postcss7-compat dependency, a requirement from tailwindcss v2, breaks npm outdated:

🍕~/workspace/vitess/web/vtadmin $ npm outdated
npm ERR! Only tag, version, and range are supported

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/sarabee/.npm/_logs/2022-02-07T19_25_43_567Z-debug.log

Related Issue(s)

This goes along with the react-scripts + postcss upgrade in #9493, and the subsequent postcss upgrade in #9612.

Checklist

• Should this PR be backported? No
• Tests were added or are not required
• Documentation was added or is not required

Deployment Notes

N/A

[doeg]

I pulled this CSS from src/style/components.css, and then deleted that file.

This is because tailwindcss v3 tweaked its base button styles in a way that conflicted with our .btn component, as described in tailwindlabs/tailwindcss#6602. Trying to fix it resulted in a real nasty snarl of import ordering issues, so I've opted to simply pull everything into this one file for now.

[doeg]

This unpleasant part of the diff adds a bunch of CSS classes for rendering the colour chips on the debug page. The new JIT compiler in tailwindcss v3 does not work with "dynamic classes" e.g., a JavaScript string template like background-${foo}.

There are more "elegant" ways to fix this with postcss loops but it looked like it would require adding a new postcss dependency to support loops and... 🤷

[notfelineit]

Thank you for handling this!