Programmiererforum

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";