-
Notifications
You must be signed in to change notification settings - Fork 9
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add base styles for form elements #42
Comments
17 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Summary of changes needed:
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 forborderWidth
and their default colors. @tailwindcss/forms uses Tailwind theme variables such asborderWidth['DEFAULT']
,colors.gray[500]
, andcolors.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 noDEFAULT
, so it would come out to0
. We also don't define our colors asblue-600
orgray-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
andgray-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.The text was updated successfully, but these errors were encountered: