Tailwind CSS VS chakra-ui

Go to the Tailwind website

I also installed Tailwind CSS to create most of the layout for the page, with the prefix option of tw- (this is to prevent clashing classes between Tailwind and Vuetify).

The other major frameworks I use are tailwindcss for styling and Fable.Lit for the views.

I made this with VueJS (CDN), Tailwindcss and Flowbite components.

Using Tailwind CSS, you don't have to write custom CSS to style your application because it's a utility-first framework. These days it is widely used among developers to build complex UI because of its simplicity. You can check out their official docs for more information.

Tailwind CSS: A utility-first CSS framework

I decided to choose jigsaw as I am familiar with the technologies it's built with (PHP , Tailwind for styling and Blade as template engine) as it will be easy to customize if needed besides that, it comes with decent amount of features out of the box, I barely did any customization to it, just followed the installation instructions and got started.

I'd use Tailwind - the ready-made CSS classes make it really simple to get a nice-looking UI...

Tailwind was perfect for this. It is a simple utility css library with classes for the smallest things, like width or background color. It also allows you to create custom themes with classes such as color-primary, where you can define what that ends up meaning. This combined with Vue components means you can create small components that look nice and are reusable.

The past week I worked on setting up Playwright, and Chakra UI with starchart. Chakra UI is needed so that their components could be used to build the web pages, and Playwright is to be used for end-to-end testing.

In addition to front-end frameworks like React, there are CSS frameworks and component libraries that you can use to make it easier to build good-looking UIs. Bootstrap used to be very popular, but these days I'm seeing a lot of startups using newer solutions like Tailwind and Chakra. You'll find a bunch of these if you search for "CSS frameworks" or "Component Libraries" online.

But some time ago I stumbled with this issue that raised some concerns on Chakra UI bundle size. My first reaction was that it wasn’t really and issue, since I was coming from Material UI which felt a lot heavier. But then I started auditing my app with Lighthouse and noticed that my performace score could be improved, so then I decided to give Tailwind CSS a go with the idea of the benefits of a reduced JS bundle size.

4. Chakra UI

Chakra UI is currently having over 30.9K stars on Github. You can check the repo Here

I have my career planned out for a while now, and I planned on working with the front-end to get accustomed with the work, and also because it has a visual presentation of what my code is doing in real time (I'll work my back-end once I'm more accustomed). Thus, when choosing a technology to work on, I decided to pick Chakra UI, due to it being a library of react components (which I'm a bit familiar of). Having a thorough understanding of the library should help me have a much deeper understanding of the ReactJS library.

Further, through Codegen, tests can be automatically generated based on actions performed in the browser. This should reduce the time required for writing tests quite a bit. So, in addition to working on testing, I also decided to contribute to the Web component, which involves building the pages for the app. This will be done using Chakra UI and Remix. Chakra UI provides a bunch of components for different needs such as tooltips, cards, popups, and many more. I have worked on building webpages a lot in the past five months, and even though I have never used Chakra UI, I think I would still be able to utilize some of that experience here.

We will also be using Supabase, an open-source alternative to firebase with a built-in database and authentication system. We will use React for building out the front end and Chakra-UI for styling our React components. We will also set up a cron job that calls a webhook (that we will be building using Express). We will also use the CoinGecko API to fetch the latest cryptocurrency market data.

Chakra e Radix UI