就是一个空的 react 项目,感觉 nextUI 的样式很好看,然后搭建完后,样式出不来..
# package.json
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@nextui-org/react": "^2.1.13",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.5.2",
"@types/node": "^16.18.53",
"@types/react": "^18.2.22",
"@types/react-dom": "^18.2.7",
"@types/react-router-dom": "^5.3.3",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.16.0",
"react-scripts": "5.0.1",
"typescript": "^4.9.5",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"tailwindcss": "^3.3.3"
}
}
#tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
// ...
"./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
darkMode: "class",
plugins: [nextui()],
};
#App.tsx
import * as React from "react";
import {Button} from "@nextui-org/react";
// 1. import `NextUIProvider` component
import {NextUIProvider} from "@nextui-org/react";
function App() {
// 2. Wrap NextUIProvider at the root of your app
return (
<NextUIProvider>
<Button color="primary">
Button
</Button>
</NextUIProvider>
);
}
然后结果是 这个 Button 没有任何效果....
有大佬用 nextUI 上过现网吗
2
beiwei2008 180 天前
遇到相同的问题,我这边的情况是
"./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",这个路径不存在 需要改为"./node_modules/@nextui-org/react/node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}", |