material-ui VS Tailwind CSS

1. Material UI

Material UI offers a large variety of built-in theme options mostly used and needed for your development. most popular ones include accordions, App bar, Bottom navigations, etc. You can explore all the components MUI offers here. MUI is currently having over 84.2K stars on Github. You can check the repo Here

Warning that MUIs Typescript autocompletion / Intellisense in VSCode is extremely slow and has been a longstanding issue since 2020. For me personally it makes it unuseable.

Some examples of popular component libraries include MUI (the artist formerly known as Material UI), Headless UI by Tailwind Labs, and of course Radix UI.

Also you could take a look at how MUI generates it's icons components: https://github.com/mui/material-ui/blob/master/packages/mui-icons-material/builder.js

Material UI has been around since 2014 when Google first released it, but only recently did it become a full-fledged design system with the addition of its own CSS library. The original Material UI was just a set of guidelines for designers who wanted to use Google's design language in their projects. It didn't offer any code or tools that could be used to build sites or apps with it. To date, it has been downloaded over (npm) 295 million times and it has around 81,000+ GitHub stars.

In recent times, one of the robust ways to authenticate a login credential is JWT authentication. Today, we will discuss how we can implement JWT authentication for a login app in React. For styling, I am using Material UI for React. Originally, I implemented JWT authentication over a private login API; replace this API with your private API.

MUI

Just to give an example, some of the projects that I've found interesting are: https://github.com/orgs/TheOdinProject/repositories https://github.com/project-slippi https://github.com/frankborden/slippilab https://github.com/RCVolus/lol-pick-ban-ui https://github.com/OpenLitterMap/openlittermap-web https://github.com/mui/material-ui/issues

warn - The `content` option in your Tailwind CSS configuration is missing or empty. warn - Configure your content sources or your generated CSS will be missing styles. warn - https://tailwindcss.com/docs/content-configuration Browserslist: caniuse-lite is outdated. Please run: npx [email protected] --update-db Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating Rebuilding... Done in 88ms.

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.

Now that you have a Remix project configured you can proceed by installing Tailwind CSS:

You should see a landing page with some filler text and an image that automatically changes if you reload the webpage. Take a look at the documentation on the Tailwind CSS website and you will see how easy it is to change the style of the landing page. The margin, padding, colours and page layout can all be customised with just a few class changes. Honestly, the Tailwind CSS documentation is the best place for learning how to use the code.

Personally I like twin.macro the most. It’s similar to the above but based on Tailwind.

UI, CSS : tailwindcss + PostCSS + Radix UI + UI components by shadcn

If you use Tailwind CSS and use the dark mode with the class strategy instead of media query, you can override the variables like this:

Also at the start I used TailWind CSS but to remove the css build step I converted everything back to css, keeping some tailwind css in my main.css file.

Ok you can take the easy way out and just use a framework like Bootstrap or Tailwind. As a matter of fact Tailwind has it's own Refactoring UI Book that you can use to learn. In my opinion, UI designers just wing it for the most part. At least there's no single method to this.