valinor.earth VS office-ui-fabric-react

I'm at https://brajeshwar.com

> At https://valinor.earth, my team and I leverage technology to help companies decarbonize and curb climate change.

Use Tailwind as a utility class and create CSS classes looking at the overall design and standardizing components.

Point No. 1 is more straightforward than 2 in the short term, but Point No. 2 would be the ideal approach and more easily maintainable.

Here are few examples from our website that uses Tailwind. Please be lenient; it is not a public consumable template/markup.

The general UI is driven by design token at the Tailwind configuration level -- https://github.com/valinorearth/valinor.earth/blob/master/ta...

Color Scheme follow a similar pattern https://github.com/valinorearth/valinor.earth/blob/master/ta...

Then, we write CSS but using Tailwind as a utility - https://github.com/valinorearth/valinor.earth/tree/master/sr...

For instance, for a button, instead of apply everything in each and every ``, we create a `.button` class and create the button component of our choice https://github.com/valinorearth/valinor.earth/blob/master/sr...

I hope this is useful to few who wants to use Tailwind in either of the two ways.

For example, all the following design systems can be used without tooling (some of them provide ready-to-use bundles, others can be used through import maps): Google's Material Web, Microsoft's Fluent UI, IBM's Carbon, Adobe's Spectrum, Nordhealth's Nord, Shoelace, etc.

We are migrating to Fluent v9, which has notable performance benefits with CSS-in-JavaScript. More information on React Fluent UX can be found at https://react.fluentui.dev.

Storybook Github Figma Specs Documentation [Component Roadmap]

fluentui/packages/react-components/react-button/stories/Button at master · microsoft/fluentui (github.com)

First, we recommend folks checkout our latest update on the Component Lifecycle Process and our Component Roadmap as it's been updated for FY23Q2.

This is just an overview of the general process and requirements, but if you want to get into some of the details, check out the work that's gone into the Card component epic.

https://github.com/microsoft/fluentui/wiki/Fluent-UI-React-Roadmap

Hooks, Charts, etc everything