Form Utilities

go.raybo.org/2cE-

There are just a few classes to help you control some aspects of forms.

Placeholder Colors

  • placeholder-COL-STR
transparent transparent black white
gray red yellow green blue indigo purple pink
50 100 200 300 400 500 600 700 800 900
50 100 200 300 400 500 600 700 800 900
50 100 200 300 400 500 600 700 800 900
50 100 200 300 400 500 600 700 800 900
50 100 200 300 400 500 600 700 800 900
50 100 200 300 400 500 600 700 800 900
50 100 200 300 400 500 600 700 800 900
50 100 200 300 400 500 600 700 800 900

Docs Try it

Shockingly enough, there's only two class groups related to input fields. Everything else is handled through the rest of Tailwind classes, which is really different from something like Bootstrap.

If we take a look at the example, you can see that the opacity is separate from the input group opacity. Also, take a look at the code and you can see how I've made pretty good looking input fields by just adding some margin and padding classes.

Placeholder Opacity

  • placeholder-opacity-AMT
    • AMT (opacity/100)

      0 5 10 20 25 30 40 50
      60 70 75 80 90 95 100

Docs Try it

The other class group is related to opacity and just like with regular text opacity you can see that the numbers are not a pure decimal distribution but have more stops at the beginning and at the end.

Again, this allows you to modify the opacity of just the text and not the entire element by using a css variable.