TypeScript

https://create-react-app.dev/docs/adding-typescript/

yarn create react-app my-app --template typescript

if use npx, the package manager will be npm

CRACO

(Create React App Configuration Override)

https://www.npmjs.com/package/@craco/craco

yarn add @craco/craco

touch ./craco.config.ts, content:

export {}

in ./package.json

"scripts": {
  "start": "PORT=3000 craco start",
  "build": "craco build",
  "test": "craco test"
},

then

yarn start

MUI

https://mui.com/material-ui/getting-started/installation/

yarn add @mui/material @emotion/react @emotion/styled @mui/icons-material @fontsource/roboto

in ./index.tsx

import '@fontsource/roboto/300.css';
import '@fontsource/roboto/400.css';
import '@fontsource/roboto/500.css';
import '@fontsource/roboto/700.css';

Auto-Dark mode: https://mui.com/zh/material-ui/customization/dark-mode/#system-preference

in ./App/tsx

import React from 'react'
import './App.css'
import { Button } from '@mui/material'
import { createTheme, ThemeProvider } from '@mui/material/styles'
import {useMediaQuery, CssBaseline} from '@mui/material'
function App() {
  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)')
  const theme = React.useMemo(
    () =>
      createTheme({
        palette: {
          mode: prefersDarkMode ? 'dark' : 'light',
        },
      }),
    [prefersDarkMode],
  )
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <Button variant='contained'>MUI Button</Button>
    </ThemeProvider>
  )
}
export default App

Tailwind

https://tailwindcss.com/docs/guides/create-react-app

yarn add -D tailwindcss postcss autoprefixer

npx tailwindcss init -p # generate files tailwind.config.js and postcss.config.js

in ./tailwind.config.js

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

in ./src/index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

test, in ./src/App.tsx

<h1 className="text-3xl font-bold underline">
  Hello world!
</h1>

yarn start