Tailwind CSS VS material-ui

As you might have guessed from the title, the styling solution will be Tailwind CSS. Let’s assume you do know about this CSS Framework, documentation can be found here: https://tailwindcss.com/.

> their pay-for-documentation model

Yikers this comment sets the stage for a real bad game of phone tag! I think you're mistaking TailwindUI[0], the set of proprietary UI component cheat codes based on top of TailwindCSS, with TailwindCSS[1], the actual CSS library being discussed here.

[0] https://tailwindui.com/

[1] https://tailwindcss.com/

To recreate this I'm using React with tailwind but the technology could be used with any framework of your choice.

Trying to help build a design system at work in my spare time; no clue if it will go anywhere but it’s fun regardless. I asked the Elm Slack group what the equivalent of React Storybook. Specifically, I wanted a way to build a documentation website like Vuepress with the ability to host native Elm code to showcase components. They pointed me to Elm Book. While Elm Book has built-in theming capabilities, I needed CSS control over my components. While they support elm-css, I wanted the ability to use TailwindCSS. The Elm libraries haven’t kept up with Tailwind’s changes, which is fine; writing raw Tailwind CSS on Elm HTML functions is easy and co-located with the component you’re styling.

https://tailwindcss.com/ “Tailwind CSS works by scanning all of your HTML files, JavaScript components, and any other templates for class names, generating the corresponding styles and then writing them to a static CSS file.”

Learn how to create a simple but blazing-fast blog app using Blazor WebAssembly, Tailwind CSS, and Strapi. You will use Strapi, the leading open-source headless CMS, to store your posts and Blazor to build your front-end.

There's another option that I haven't used yet, but I think that it's a great option. nativewind brings tailwindcss to react-native. some other libraries try to do the same, but I think nativewind looks better than the others.

Instead of some UI framework/styling solution which was specifically tailored for React, I went with Tailwind CSS. It is hugely popular, has good support for almost all the frameworks, is a 1st party plugin from Astro and was great to get started with. For my posts I chose MDX and for components in MDX I chose React.

Used TailwindCSS in addition to this

I am using the Tailwind to insert styles on the interfaces and the ViewComponent for “creating reusable, testable & encapsulated view components, built to integrate seamlessly with Ruby on Rails”.

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

- MUI is a mature and stable ecosystem, has a pretty good documentation and the fact that is being used so much helps you by finding a lot of examples out there for many questions that you might have. It has support for React 18. The minus here is, as I said, the customization that can take a while if you completely want to change the UI of a component and and especially if you're not familiar with the library. Also is lacking in some components which you have to install as a separate package.

React: MUI, AntD, Chakra, Mantine

A library is a collection of code that you can use in pretty open ended ways. Something like Material UI is a library because it just provides buttons, text boxes, etc. for you to use and arrange in whatever way supports your needs.