[RFC][material-ui] Improve the Tailwind CSS integration

[mnajdova]

What's the problem? 🤔

At this moment we have only this information in the docs around how people can customize Material UI using Tailwind CSS. We also provide one example related to how to set up a project using these two libraries.

However, this is not enough, mainly because we don't have any information about how the Tailwind CSS theme should be structured, nor do we have examples per component.

What are the requirements? ❓

In order to make sure we have a great integration with Tailwind CSS, we should offer at least the following things:

• tailwind config with a custom theme that will reflect the default Material UI's theme
• tailwind plugin for mapping the states of the component via tailwind selectors, for e.g. ui-disabled, see for more info about this in https://github.com/mui/base-ui/issues/22 - this is around Base UI, but the same ideas can apply for Material UI too
• provide a fully feature example containing the two above-mentioned features
• provide a demo on each component's page about how the component can be customized using Tailwind CSS

What are our options? 💡

The other option is what we have currently, which based on the feedback is not scaling.

Proposed solution 🟢

The solution is providing the options listed in the requirements section.

Resources and benchmarks 🔗

No response

[siriwatknp]

With the new CSS theme variables, the integration is much easier. I tested this morning with a preset:

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
    colors: {
      primary: {
        light: "rgb(var(--mui-palette-primary-lightChannel))",
        DEFAULT: "rgb(var(--mui-palette-primary-mainChannel))",
        dark: "rgb(var(--mui-palette-primary-darkChannel))",
      },
      text: {
        primary: "rgb(var(--mui-palette-text-primaryChannel))",
        secondary: "rgb(var(--mui-palette-text-secondaryChannel))",
      },
    },
  },
  plugins: [],
};

In the app, the uses tailwind utilities like usual:

<div className="bg-primary" />