main.tsx框架内部的索引。html

Question

推向中心。琥珀色表示

<div id='root'></div>

。这显然不是预期的效果，因为我希望

main.tsx

the整个页面：

为什么我要在Main周围获得此保证金/填充？我如何设置我的环境，以使main.tsx Frontpage 占用页面上的整个空间？我正在使用的配置。对于设置，我遵循

TailwindCSS V4安装文档

.

。

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样式表。很抱歉浪费每个人的时间。

main.tsx框架内部的索引。html

问题描述投票：0回答：0

最新问题

main.tsx框架内部的索引。html

问题描述 投票：0回答：0

最新问题

问题描述投票：0回答：0