search

rails / tailwindcss-rails

Other
1.37k stars 165 forks source link

Increase form input field border contrast #356

Closed olivierlacan closed 2 months ago

olivierlacan commented 3 months ago

The contrast provided by the border-gray-200 Tailwind utility class is very poor. It's nearly impossible to distinguish the edges of an input field on a white background.

That's not a great default experience for Rails scaffolds.

With a slight bump to border-gray-400, things are much easier to distinguish.

Here's a simple example where I only changed the border class on the Name field at the top:

Safari:

image

Firefox:

image

Chrome:

image

With a stock Rails 7.1 app, I genuinely could not distinguish the edges of any input field until I made this change. I think the examples speak for themselves. I can understand the desire for subtlety but I think this change would be beneficial. I'm deliberately not address a similar issue with non-call-to-action buttons in this PR, in case there's disagreement.

javierjulio commented 3 months ago

Looks better, thank you! I think this is a better default. For what it's worth, it matches what Tailwind uses in their Forms examples.