search

PayneWheat / jobhunt

Job application tracker built in Laravel and React
0 stars 0 forks source link

Investigate Tailwinds as alternative to React Bootstrap #22

Open PayneWheat opened 2 years ago

PayneWheat commented 2 years ago

Determine viability of using tailwinds instead of react bootstrap.

Tailwinds was included with the Breeze/InertiaJS update. Using both front-end frameworks seems to be causing issues, such as some buttons having transparent background (likely due to sharing class names), etc. At first glance, tailwinds seems to be a little more modern-looking.

PayneWheat commented 2 years ago

Tailwind is a viable front-end framework, but it does not provide everything Bootstrap does. React-bootstrap, in particular, had all of the "components" of bootstrap as actual React components, whereas Tailwind simply provides a lot of CSS properties wrapped in classes.

A big downside to using Tailwind is that class properties tend to be very, very long. Also, comparing it to Bootstrap, there aren't convenient, already designed components at your disposal. I'll have to investigate ways to mitigate this, perhaps by using @extend in my own classes.

I've already started swapping bootstrap with tailwind, and I've borrowed some inspiration from a site I can't find on Google anymore. But this seems promising for layout/component ideas: https://tailwindui.com/components/application-ui/lists/stacked-lists

PayneWheat commented 2 years ago

After a little more investigating, the link above is not a free library.

Here is the library I couldn't find before: https://www.tailwind-kit.com/

There are other options too. https://daisyui.com/components/ for instance