material-ui VS Tailwind CSS

The one on the official MUI's Github repo featuring Next.js with TypeScript (my framework of choice) didn't follow standard Next.js folder structure.

Here’s an example of how a popular library implements it to give you an idea.

#15 mui-org/material-ui

I love typescript but I cherish every release that brings speed upgrades. Material-UI for instance just cripples the autocompletion time of an entire project due to that lib having what are evidently very compute-heavy types. I mean the completion times go from ~.5 seconds to ~7 seconds when that library is added. Which kind of makes TS-at-scale difficult-to-impossible since more types means unusable autocomplete as well as longer and longer compile times.

I looked again, it's more like an example then an Tutorial. But here is the url: https://github.com/mui-org/material-ui/tree/master/docs/src/pages/getting-started/templates/sign-in

Example

As robust and feature-rich as material-table is, maintenance and support have waned since the original creator left the project. Other contributors are still maintaining the library, though not as actively. However, there is a fork of the current project called material-table/core. This version is not yet as polished as material-table, but it is under active development and frequently updated. Although it doesn’t yet support the entire range of features described above, material-table/core is compatible with the new Material-UI v5, which is great! material-table remains the more popular library, with roughly 150,000 downloads per week as opposed to material-table/core's 23,000 weekly downloads at the time of writing. But material-table/core is a viable alternative if you're using the latest version of Material-UI and looking for a library with more active support.

I'm trying to understand how their theming works. For example, how does a button decide which color it should be? the code doesn't seem trivial at all, and it seems to depend on the context of where the button is placed: Button.js .

This discussion might help: https://github.com/tailwindlabs/tailwindcss/discussions/3461 but fortunately, I don't use NextJS.

As you will find many CSS frameworks in the market, these frameworks mostly include pre-designed elements like buttons, forms, and many other components to make the whole development more feasible. But if you ever want to modify or update any of these components, you'll have to work a lot around the design elements of the code. The problem is that you can't use these pre-made templates uniquely to showcase your product. On the other hand, one of the most popular CSS framework, Tailwind, can allow you to expand your creativity and incorporate your unique style quickly.

So for example if you are running a TailwindCSS or other utility CSS based framework, like WindiCSS, thats one of the easiest use cases.

For this tutorial, we are using Laravel with TailwindCSS to design the UI of the banner. If you need, you can manually implement TailwindCSS into the Laravel by adding and configuring everything manually. But fortunately, we have Laravel Breeze! Let's install it in our application.

In this tutorial, we will focus on implementations only. The project UI has already been set up with TailwindCSS.

I have many blogging platforms WordPress, NuxtJS, NextJS, Ghost. But none of them are active. So I try back to my root which is WordPress. So I create a theme that looks like Hey World. I create it using underscores_ and Tailwind CSS. I stripped unneeded features from underscores, just need the essential. Here is the theme in case you interested, hey-world. Now my website already looks like Hey World, of course already adjusted to my need.

Tailwind CSS - utility-first CSS framework (tailwindcss.com)

If you want to implement a custom design and want it to be responsive, I suggest go with tailwind csshttps://tailwindcss.com/