pnpm create vite@latest cellinlab-home -- --template react-ts
cd cellinlab-home
pnpm install -D tailwindcss postcss autoprefixer
pnpx tailwindcss init -p
tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {},
},
plugins: [],
};
postcss.config.js
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
index.css
@tailwind base;
@tailwind components;
@tailwind utilities;
pnpm install @mui/material @emotion/react @emotion/styled @mui/icons-material
# If you don't have commitizen installed globally
# pnpm install -g commitizen
# pnpm install -g cz-conventional-changelog
commitizen init cz-conventional-changelog --pnpm --save-dev --save-exact
pnpm dev
App.tsx
import { CssBaseline } from "@mui/material";
function App() {
return (
<div>
<CssBaseline />
<h1>Hello World</h1>
</div>
);
}
App.tsx
import { CssBaseline, Button } from "@mui/material";
function App() {
return (
<div>
<CssBaseline />
<Button variant="contained" color="primary">
Material-UI Button
</Button>
<p className="text-blue-500">TailwindCSS Text Color</p>
</div>
);
}
扫码关注腾讯云开发者
领取腾讯云代金券
Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号:粤B2-20090059 深公网安备号 44030502008569
腾讯云计算(北京)有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287
Copyright © 2013 - 2025 Tencent Cloud.
All Rights Reserved. 腾讯云 版权所有