顺风css旋转木马示例不工作

Question

在next.js项目中，我正试图使用以下示例构建一个转盘：https://tailwind-elements.com/docs/standard/components/carousel/

我已经安装了tailwindcss@2.0.2，我还需要其他东西来让CSS工作吗。

Answer 1

是的，您需要安装顺风元件包

npm install tw-elements然后在tailwind.config.js中要求

请参阅入门指南：https://tailwind-elements.com/quick-start/

或者你可以只包括CDN脚本和样式表

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tw-elements/dist/css/index.min.css" />
<script src="https://cdn.jsdelivr.net/npm/tw-elements/dist/js/index.min.js"></script>

Answer 2

请确保这一点。

1. 在启动项目之前，请安装Node.js(LTS(和TailwindCSS。

2. 运行以下命令通过NPM安装程序包：

终端

npm install tw-elements

1. Tailwind Elements是一个插件，应该包含在Tailwind.config.js文件中。还建议使用加载动态组件类的js文件来扩展内容数组：

顺风配置JS

module.exports = {
content: ['./src/**/*.{html,js}', './node_modules/tw-elements/dist/js/**/*.js'],
plugins: [
require('tw-elements/dist/plugin')
]
}

4. 添加js文件后，动态组件将工作：

INDEX。HTML

<script src="./TW-ELEMENTS-PATH/dist/js/index.min.js"></script>

或者，您可以通过以下方式导入(bundler版本(：

INDEX.JS

import 'tw-elements';