Add base styles for form elements

[stephiescastle]

Summary of changes needed:

• Tailwind recommends adding base styles for form elements.

The problem we are trying to solve

Originally surfaced on www-frontend:
Tailwind 2 changed two things that affected our forms on sites using Tailwind v1.9.4: the way DEFAULT is set for borderWidth and their default colors. @tailwindcss/forms uses Tailwind theme variables such as borderWidth['DEFAULT'], colors.gray[500], and colors.blue[600].

It has always been this way and has always been "broken" but only became more obvious once we updated TailwindCSS. TailwindCSS 2 has a default border width of 1px. Previously, there was no DEFAULT, so it would come out to 0. We also don't define our colors as blue-600 or gray-500, so our forms styles were always using default colors provided by TailwindCSS 🤦‍♀️. It's more obvious now because Tailwind 2's default colors are brighter/stronger.

One way to fix this would be to define a blue-600 and gray-500 in our Tailwind config, but it didn't seem like a good idea to mix naming conventions in this way without a clear purpose in the name. We also needed to customize this more in the case where placeholder text needed to be darker than the input border (@tailwindcss/forms uses the same color for both).

Digging further, I found the TailwindCSS creator recommends creating base styles to override these colors, so that's what I did. I used the colors from this old Figma mockup for WWW, and I confirmed with Michael Gorospe that the focus-blue color should be the one we have been using recently in WCP: #1871c9, not the one in the WWW Figma mockup.