Filter UI appearance

[NduatiK]

Looking at pull request #41, I expect the UI below.

However, I am instead getting:

The padding and alignments are off. @edisonywh, are you providing some styling locally that are not in the library?

[edisonywh]

Ah great catch. We purge unused Tailwind CSS and we need to do that manually, and I forgot to do that in this case.

This also has to do with how I develop, I develop Backoffice directly against my app (Slick Inbox), but I should probably come up with a better way, like a separate demo app or something (I plan to have a proper demo app when Backoffice is more stable).

Anyway, I've fixed this in #47. Thanks for reporting!

[NduatiK]

This fixes the layout issue but introduces a small issue with the input fields. The border color and padding are lost.

[edisonywh]

Mhm that's really strange.. what css classes are supposed to be on there?

[NduatiK]

I think the question should actually be something along the lines of "why is tailwind (or purgecss) purging more classes than we expect?".

I am not very familiar with html and css (long live Elm), so the following is based on a couple of minutes of research.

---

1. Tailwind purges unused selectors
2. We don't have selectors for inputs because we are using Phoenix.Html.Form methods and not html. For example purging removed the following css (among others):

   [type='text'],
   [type='date'],
   [type='search'],
   [type='time'],
   textarea,
   select
   {
       -webkit-appearance: none;
       -moz-appearance: none;
           appearance: none;
       ...
   }

3. We therefore need to tell tailwind to not purge "normalization" css (This was discussed in Tailwinds Github issues)
4. The solution is given here. We simply whitelist the base layer of tailwind. Here is the snippet for suggested solutiion:

   // tailwind.config.js
   module.exports = {
   purge: {
   layers: ['components', 'utilities'],
   content: ['./src/**/*.html'],
   },
   // ...
   }