Main.tsx в рамке внутри index.html ⇐ Html

[Anonymous]

Я использую Tailwindcss V4 на Vite и работаю с Heroui для библиотеки компонентов. Проблема, с которой я сталкиваюсь, возникла из -за попытки определить тему для моей страницы. Янтарный цвет означает . Это, очевидно, не желаемый эффект, так как я хочу, чтобы Main.tsx взял на себя всю страницу:




< /code>
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(



Main Parent




);
< /code>
App.tsx
import "./App.css";

function App() {
return (


This is the App.tsx


);
}

export default App;

< /code>
vite.config.js
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
plugins: [react(), tailwindcss()],
});

< /code>
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",
},
},
},
}),
],
};
< /code>
styles.css
@import "tailwindcss";


Подробнее здесь: https://stackoverflow.com/questions/795 ... index-html