Почему компонент Heroui не загружается CSS с использованием nextjsJavascript

Форум по Javascript
Ответить
Anonymous
 Почему компонент Heroui не загружается CSS с использованием nextjs

Сообщение Anonymous »

(английский не является моим первым языком кстати) < /strong> < /h1>

Я выполняю этот школьный проект и использую Heroui в качестве библиотеки компонентов, я подумал, что я обновил его, чтобы Tailywind 4 и сделал изменения, которые я думал, я должен был делать, но когда я запускаю свой веб -сайт, и вводим его, но вводим накладные, но в норвере, но в норвере, но в норвере, но в норвере, но в норвере, но в норвере, но в норвере, но в норвере, но в норвере, но в норвере, но в норме, но в норме, но в норме, но в норме, но в норме, но в норме, но в норве Как: < /p>

Код: Выделить всё

Login.tsx

Код: Выделить всё

import { Container } from "@/components/container";
import { Text } from "@/components/text";
import { Input } from "@heroui/react";

export default function Login() {
return (



Iniciar sesión





¿No tienes cuenta?{" "}
[url=/register]
Regístrate
[/url]



);
}

это просто не визуализирует с css .-., не знаю, что не так, но, я бы признателен за любую помощь ^. ^
Вот мой конфигурация Postcss:

const config = {
plugins: {
"@tailwindcss/postcss": {},
},
};

export default config;


Вот мой tsconfig:

Код: Выделить всё

{
"compilerOptions": {
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"paths": {
"@/*": ["./src/*"]
},
"target": "ES2017"
},
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx",
".next/types/**/*.ts",
"tailwind.config.js",
"./src/*"
],
"exclude": ["node_modules"]
}
< /code>
nextjs config:

Код: Выделить всё

const removeImports = require("next-remove-imports")();

/** @type {import('next').NextConfig} */
const nextConfig = {
eslint: {
ignoreDuringBuilds: true,
},
pageExtensions: ["ts", "tsx", "mdx", "md"],
experimental: {
mdxRs: true,
},
};

module.exports = removeImports(nextConfig);
< /code>
and my global.css:
@import "tailwindcss";

:root {
--background: #ffffff;
--foreground: #171717;
}

@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--font-sans: var(--font-geist-sans);
--font-mono: var(--font-geist-mono);
}

@media (prefers-color-scheme: dark) {
:root {
--background: #1a1a1a;
--foreground: #ededed;
}
}

body {
background: var(--background);
color: var(--foreground);
font-family: Arial, Helvetica, sans-serif;
}
< /code>
[Here's how it looks][1]
[1]: https://i.sstatic.net/2NQTuiM6.png


Подробнее здесь: https://stackoverflow.com/questions/796 ... ing-nextjs
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «Javascript»