Main.tsx in Index.html gerahmt ⇐ JavaScript

[Anonymous]

Ich verwende Tailwindcss V4 auf Vite und arbeite mit Heroui für die Komponentenbibliothek. Das Problem, das ich erlebe, kam aus dem Versuch, ein Thema für meine Seite zu definieren. Die Bernsteinfarbe bedeutet die . Dies ist offensichtlich nicht der gewünschte Effekt, da ich möchte, dass die main.tsx die gesamte Seite übernimmt:




< /code>

Code: Select all

main.tsx

Code: Select all

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

Code: Select all

import "./App.css";

function App() {
return (


This is the App.tsx


);
}

export default App;

< /code>
vite.config.js

Code: Select all

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

Code: Select all

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

Code: Select all

@import "tailwindcss";