<div id='root'></div>
main.tsx
the整个页面:
为什么我要在Main周围获得此保证金/填充?我如何设置我的环境,以使main.tsx
占用页面上的整个空间?
我正在使用的配置。对于设置,我遵循
.
。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Front Page</title>
</head>
<body>
<div id="root" class="bg-amber-400"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
main.tsx
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { HeroUIProvider } from "@heroui/react";
import "./styles.css";
import App from "./App.tsx";
createRoot(document.getElementById("root")!).render(
<StrictMode>
<HeroUIProvider>
<main className="bg-black">
<h1 className="text-white">Main Parent</h1>
<App />
</main>
</HeroUIProvider>
</StrictMode>
);
App.tsx
import "./App.css";
function App() {
return (
<div className="">
<div className="text-white">
<h1>This is the App.tsx</h1>
</div>
</div>
);
}
export default App;
vite.config.js
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";
export default defineConfig({
plugins: [react(), tailwindcss()],
});
tailwind.config.js
const { heroui } = require("@heroui/react");
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
"./node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
darkMode: "class",
plugins: [
heroui({
addCommonColors: false, // override common colors (e.g. "blue", "green", "pink").
defaultTheme: "light", // default theme from the themes object
defaultExtendTheme: "light", // default theme to extend on custom themes
layout: {}, // common layout tokens (applied to all themes)
themes: {
light: {
layout: {
spacing: {
sm: "0.5rem",
md: "1rem",
},
},
colors: {
background: "#ffffff",
primary: "#6366F1",
text: "#000000",
},
},
dark: {
extend: "dark",
layout: {
spacing: {
sm: "0.5rem",
md: "1rem",
},
},
colors: {
background: "#000000",
primary: "#818cf8",
text: "#ffffff",
},
},
},
}),
],
};
styles.css
@import "tailwindcss";
Momg,我很尴尬,我没有看到创建的app.css样式表。很抱歉浪费每个人的时间。