【发布时间】：2022-08-15 05:05:26
【问题描述】：
所以我使用 flowbite 和 tailwind css 来开发我的 react 应用程序。我按照他们网站中提到的所有标准安装程序来设置 flowbite 和 react，请在此处参考文档：https://flowbite.com/docs/getting-started/react/
因此，在遵循基本设置过程之后，我的 tailwind 文件如下所示：
module.exports = {
content: [\'./src/**/*.{js,jsx,ts,tsx}\', \'./node_modules/flowbite/**/*.js\'],
theme: {
extend: {},
},
plugins: [require(\'flowbite/plugin\')],
}
当我需要 flowbite 插件时，我不断收到的错误是：
> Could not find a declaration file for module \'flowbite/plugin\'.
> \'C:/dev/flowbite-test/node_modules/flowbite/plugin.js\' implicitly has
> an \'any\' type. Try `npm i --save-dev @types/flowbite` if it exists
> or add a new declaration (.d.ts) file containing `declare module
> \'flowbite/plugin\';`
这里还有我的 app.js 和 index.js 供参考：
import React from \'react\';
import ReactDOM from \'react-dom/client\';
import \'./index.css\';
import App from \'./App\';
import reportWebVitals from \'./reportWebVitals\';
import \'flowbite\';
const root = ReactDOM.createRoot(document.getElementById(\'root\'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function import logo from \'./logo.svg\';
import \'./App.css\';
function App() {
return (
<div className=\"App\">
<button className=\"block text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800\" type=\"button\" data-modal-toggle=\"default-modal\">
Toggle modal
</button>
<div id=\"default-modal\" aria-hidden=\"true\" className=\"hidden overflow-y-auto overflow-x-hidden fixed right-0 left-0 top-4 z-50 justify-center items-center h-modal md:h-full md:inset-0\">
<div className=\"relative px-4 w-full max-w-2xl h-full md:h-auto\">
<div className=\"relative bg-white rounded-lg shadow dark:bg-gray-700\">
<div className=\"flex justify-between items-start p-5 rounded-t border-b dark:border-gray-600\">
<h3 className=\"text-xl font-semibold text-gray-900 lg:text-2xl dark:text-white\">
Terms of Service
</h3>
<button type=\"button\" className=\"text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white\" data-modal-toggle=\"default-modal\">
<svg className=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\" clip-rule=\"evenodd\"></path></svg>
</button>
</div>
<div className=\"p-6 space-y-6\">
<p className=\"text-base leading-relaxed text-gray-500 dark:text-gray-400\">
With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.
</p>
<p className=\"text-base leading-relaxed text-gray-500 dark:text-gray-400\">
The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.
</p>
</div>
<div className=\"flex items-center p-6 space-x-2 rounded-b border-t border-gray-200 dark:border-gray-600\">
<button data-modal-toggle=\"default-modal\" type=\"button\" className=\"text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800\">I accept</button>
<button data-modal-toggle=\"default-modal\" type=\"button\" className=\"text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:ring-gray-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600\">Decline</button>
</div>
</div>
</div>
</div>
</div>
);
}
export default App;我也看到了一些关于在 package.json 文件中添加几行的帖子，我尝试过但没有运气，我的 package.json 文件在这里：
{
\"name\": \"flowbite-test\",
\"version\": \"0.1.0\",
\"private\": true,
\"typings\": \"dist/src/index\",
\"main\": \"dist/index\",
\"dependencies\": {
\"@testing-library/jest-dom\": \"^5.16.4\",
\"@testing-library/react\": \"^13.2.0\",
\"@testing-library/user-event\": \"^13.5.0\",
\"flowbite\": \"^1.4.5\",
\"react\": \"^18.1.0\",
\"react-dom\": \"^18.1.0\",
\"react-scripts\": \"5.0.1\",
\"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\": {
\"autoprefixer\": \"^10.4.7\",
\"postcss\": \"^8.4.13\",
\"tailwindcss\": \"^3.0.24\"
}
}
有人可以帮我解决这个问题吗，因此我无法使用手风琴、模态和轮播交互来做出反应
标签： reactjs tailwind-css tailwind-in-js flowbite