Tailwind Plugins

Our inputs look really gross. We could write our own components (basically reusable CSS classes, what a novel idea) but we're just going to use the good ones that Tailwind provides out of the box.

Run npm install -D @tailwindcss/forms@0.2.1.

Put this into your tailwind.config.js

// replace plugins
plugins: [require("@tailwindcss/forms")],

This will apply a bunch of default styles for all of our basic form elements. Tailwind has a pretty great plugin ecosystem. One of my favorites is the aspect-ratio one. CSS doesn't currently have a backwards compatible way of doing aspect ratios (e.g. keep this image in a square ratio) and this plugin makes a primitive that you can use like that. Super cool.

Notice our location input still looks bad. With this plugin they (probably wisely) require you to add type="text" to the the input so they can have a good selector for it. So please go add that now to your text input.

Let's finish making SearchParams looks nice.

To each of the selects and inputs, add className="w-60" so they have a nice uniform width.

To the breed selector, we want it to be grayed out when it's not available to use. However the PostCSS 7 version of Tailwind doesn't work with the disabled:<style> class (new versions do.) So add this to your tailwind.config.js config.

//replace variants
variants: {
  opacity: ({ after }) => after(["disabled"]),
},

This will allow our specific use case. Again, don't dig too much into this because once Parcel 2 lands or you whenever you're using PostCSS 8 this isn't a big deal.

Now add className="w-60 disabled:opacity-50" to the breed <select>.

Replace the button with:

<button
  className="rounded px-6 py-2 color text-white hover:opacity-50 border-none"
  style={{ backgroundColor: theme }}
>
  Submit
</button>

Nothing surprising there.