TW Elements <img src="https://tecdn.b-cdn.net/img/logo/te-transparent-noshadows.webp" width="45" align="right" alt="tw-elements"><a href="https://www.npmjs.com/package/tw-elements"><img src="https://yellow-cdn.veclightyear.com/835a84d5/49a1eac8-cca5-446a-8e4d-a751114988bb.svg" alt="总下载量"></a> <a href="https://github.com/mdbootstrap/TW-Elements/releases"><img src="https://yellow-cdn.veclightyear.com/835a84d5/a24480b6-5506-4a0c-bdc0-e3fefaf1619f.svg" alt="最新版本"></a> <a href="https://twitter.com/intent/tweet/?text=感谢+@TWElement+为+@tailwindcss+创建了一个令人惊叹的开源组件集合%20https://tw-elements.com/&hashtags=tailwindCSS,bootstrap,webdesign,javascript,100DaysOfCode,DevCommunity"><img src="https://yellow-cdn.veclightyear.com/835a84d5/b155d65d-01da-436d-985a-55b87d6d4f9b.svg?style=social&label=让我们知道你来过！&"></a>

TW Elements 是一个庞大的免费、交互式 Tailwind CSS 组件集合。

<table> <tbody> <tr> <td> <a href="https://tw-elements.com/" alt="TW Elements 教程" rel="dofollow"> <img width="600" src="https://tecdn.b-cdn.net/img/components-big.jpg"> </a> </td> <td> <ul> <li>500+ UI 组件</li> <li>117+ 设计块</li> <li>深色模式支持</li> <li>简易主题设置与自定义</li> <li>简单，1 分钟安装</li> <li>个人和商业用途免费</li> </ul> <a href="https://tw-elements.com/docs/standard/getting-started/quick-start/">立即开始使用 TW Elements！</a> </td> </tr> </tbody> </table>

社区

用一些鼓励的话❤️来激励我们
分享你的想法和功能请求💡
在我们的社区支持🙏中寻求帮助并帮助他人
在我们的社区💬中参与、讨论并享受乐趣

如果你想帮助这个项目成长，首先可以简单地与你的同行分享它！

谢谢！

即将推出

查看即将推出的功能 - 请务必加入等待列表以获得早期访问权限！

<table> <tr> <td> <a href="https://tw-elements.com/docs/standard/builder/"> <img alt="设计块" src="https://mdbootstrap.com/img/tw-demo/drag-and-drop.webp"> </a> </td> <td> <a href="https://tw-elements.com/docs/standard/templates/"> <img alt="模板" src="https://mdbootstrap.com/img/tw-demo/templates.webp"> </a> </td> </tr> <tr> <td align="center">拖放式构建器</td> <td align="center">模板</td> </tr> </table>

组件

一系列精美的组件，每个细节都经过精心设计。表单、卡片、按钮等数百种组件 - 在 TW Elements 中，你将找到每个项目所需的所有基本元素。

<table> <tr> <td> <a href="https://tw-elements.com/docs/standard/forms/datepicker/"> <img alt="日期选择器" src="https://mdbootstrap.com/img/tw-demo/datepicker.webp"> </a> </td> <td> <a href="https://tw-elements.com/docs/standard/components/dropdown/"> <img alt="下拉菜单" src="https://mdbootstrap.com/img/tw-demo/dropdown.webp"> </a> </td> <td> <a href="https://tw-elements.com/docs/standard/components/modal/"> <img alt="模态框" src="https://mdbootstrap.com/img/tw-demo/modal.webp"> </a> </td> </tr> <tr> <td align="center">日期选择器</td> <td align="center">下拉菜单</td> <td align="center">模态框</td> </tr> <tr> <td> <a href="https://tw-elements.com/docs/standard/data/charts/"> <img alt="图表" src="https://mdbootstrap.com/img/tw-demo/charts.webp"> </a> </td> <td> <a href="https://tw-elements.com/docs/standard/components/tooltip/"> <img alt="工具提示" src="https://mdbootstrap.com/img/tw-demo/tooltips-1.webp"> </a> </td> <td> <a href="https://tw-elements.com/docs/standard/components/carousel/"> <img alt="轮播" src="https://mdbootstrap.com/img/tw-demo/carousel.webp"> </a> </td> </tr> <tr> <td align="center">图表</td> <td align="center">工具提示</td> <td align="center">轮播</td> </tr> <tr> <td> <a href="https://tw-elements.com/docs/standard/components/accordion/"> <img alt="手风琴" src="https://mdbootstrap.com/img/tw-demo/accordion.webp"> </a> </td> <td> <a href="https://tw-elements.com/docs/standard/navigation/tabs/"> <img alt="标签页" src="https://mdbootstrap.com/img/tw-demo/tabs.webp"> </a> </td> <td> <a href="https://tw-elements.com/docs/standard/components/stepper/"> <img alt="步骤条" src="https://mdbootstrap.com/img/tw-demo/stepper.webp"> </a> </td> </tr> <tr> <td align="center">手风琴</td> <td align="center">标签页</td> <td align="center">步骤条</td> </tr> <tr> <td> <a href="https://tw-elements.com/docs/standard/forms/timepicker/"> <img alt="Tailwind CSS 时间选择器" src="https://mdbootstrap.com/img/tw-demo/timepicker.webp"> </a> </td> <td> <a href="https://tw-elements.com/docs/standard/navigation/footer/"> <img alt="Tailwind CSS 表格" src="https://mdbootstrap.com/img/tw-demo/footer.webp"> </a> </td> <td> <a href="https://tw-elements.com/docs/standard/navigation/navbar/"> <img alt="Tailwind CSS 导航栏" src="https://mdbootstrap.com/img/tw-demo/navbar.webp"> </a> </td> </tr> <tr> <td align="center">时间选择器</td> <td align="center">页脚</td> <td align="center">导航栏</td> </tr> <tr> <td> <a href="https://tw-elements.com/docs/standard/components/alerts/"> <img alt="Tailwind CSS 时间选择器" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-pro/alert-1.webp"> </a> </td> <td> <a href="https://tw-elements.com/docs/standard/components/avatar/"> <img alt="Tailwind CSS 表格" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/avatar.webp"> </a> </td> <td> <a href="https://tw-elements.com/docs/standard/components/badges/"> <img alt="Tailwind CSS 导航栏" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/badge-1.webp"> </a> </td> </tr> <tr> <td align="center">警告框</td> <td align="center">头像</td> <td align="center">徽章</td> </tr> <tr> <td> <a href="https://tw-elements.com/docs/standard/components/button-group/"> <img alt="Tailwind CSS 时间选择器" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/button-group-1.webp"> </a> </td> <td> <a href="https://tw-elements.com/docs/standard/components/buttons/"> <img alt="Tailwind CSS 表格" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/button-2.webp"> </a> </td> <td> <a href="https://tw-elements.com/docs/standard/components/cards/"> <img alt="Tailwind CSS 导航栏" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/card-1.webp"> </a> </td> </tr> <tr> <td align="center">按钮组</td> <td align="center">按钮</td> <td align="center">卡片</td> </tr> <tr> <td> <a href="https://tw-elements.com/docs/standard/components/chips/"> <img alt="Tailwind CSS 时间选择器" src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/pro/demo-new/assets/images/chips.webp"> </a> </td> <td> <a href="https://tw-elements.com/docs/standard/components/collapse/"> <img alt="Tailwind CSS 表格" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/collapse-1.webp"> </a> </td> <td> <a href="https://tw-elements.com/docs/standard/components/gallery/"> <img alt="Tailwind CSS 导航栏" src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/pro/demo-new/assets/images/lightbox.webp"> </a> </td> </tr> <tr> <td align="center">标签</td> <td align="center">折叠面板</td> <td align="center">图库</td> </tr> <tr> <td> <a href="https://tw-elements.com/docs/standard/components/jumbotron/"> <img alt="Tailwind CSS 时间选择器" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/header-1.webp"> </a> </td> <td> <a href="https://tw-elements.com/docs/standard/components/link/"> <img alt="Tailwind CSS 表格" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/link.webp"> </a> </td> <td> <a href="https://tw-elements.com/docs/standard/components/listgroup/"> <img alt="Tailwind CSS 导航栏" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/list-group-1.webp"> </a> </td> </tr> <tr> <td align="center">巨幕</td> <td align="center">链接</td> <td align="center">列表组</td> </tr> <tr> <td> <a href="https://tw-elements.com/docs/standard/components/notifications/"> <img alt="Tailwind CSS 时间选择器" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/notification.webp"> </a> </td> <td> <a href="https://tw-elements.com/docs/standard/components/paragraphs/"> <img alt="Tailwind CSS 表格" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/paragraphs.webp"> </a> </td> <td> <a href="https://tw-elements.com/docs/standard/components/placeholders/"> <img alt="Tailwind CSS 导航栏" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/placeholder-1.webp"> </a> </td> </tr> <tr> <td align="center">通知</td> <td align="center">段落</td> <td align="center">占位符</td> </tr> <tr> <td> <a href="https://tw-elements.com/docs/standard/components/popover/"> <img alt="Tailwind CSS 时间选择器" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/popover-1.webp"> </a> </td> <td> <a href="https://tw-elements.com/docs/standard/components/progress/"> <img alt="Tailwind CSS 表格" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/progress-1.webp"> </a> </td> <td> <a href="https://tw-elements.com/docs/standard/components/rating/"> <img alt="Tailwind CSS 导航栏" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-pro/rating-1.webp"> </a> </td> </tr> <tr> <td align="center">弹出框</td> <td align="center">进度条</td> <td align="center">评分</td> </tr>  <tr> <td> <a href="https://tw-elements.com/docs/standard/components/scroll-back-to-top-button/"> <img alt="Tailwind 组件" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/scroll-back-to-top.webp"> </a> </td> <td> <a href="https://tw-elements.com/docs/standard/components/social-buttons/"> <img alt="Tailwind 组件" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/social-media.webp"> </a> </td> <td> <a href="https://tw-elements.com/docs/standard/components/spinners/"> <img alt="Tailwind 组件" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/spinner-1.webp"> </a> </td> </tr> <tr> <td align="center">回到顶部</td> <td align="center">社交按钮</td> <td align="center">加载动画</td> </tr>  <tr> <td> <a href="https://tw-elements.com/docs/standard/components/timeline/"> <img alt="Tailwind 组件" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/timeline.webp"> </a> </td> <td> <a href="https://tw-elements.com/docs/standard/components/toast/"> <img alt="Tailwind 组件" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-pro/toast-1.webp"> </a> </td> <td> <a href="https://tw-elements.com/docs/standard/components/tooltip/"> <img alt="Tailwind 组件" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/tooltip-1.webp"> </a> </td> </tr> <tr> <td align="center">时间线</td> <td align="center">提示框</td> <td align="center">工具提示</td> </tr>  <tr> <td> <a href="https://tw-elements.com/docs/standard/components/video/"> <img alt="Tailwind 组件" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/video.webp"> </a> </td> <td> <a href="https://tw-elements.com/docs/standard/components/video-carousel/"> <img alt="Tailwind 组件" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/video-carousel.webp"> </a> </td> <td> <a href="https://tw-elements.com/docs/standard/forms/checkbox/"> <img alt="Tailwind 组件" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/checkbox-1.webp"> </a> </td> </tr> <tr> <td align="center">视频</td> <td align="center">视频轮播</td> <td align="center">复选框</td> </tr>  <tr> <td> <a href="https://tw-elements.com/docs/standard/forms/file-input/"> <img alt="Tailwind 组件" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/file-upload.webp"> </a> </td> <td> <a href="https://tw-elements.com/docs/standard/forms/input-group/"> <img alt="Tailwind 组件" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/input-group.webp"> </a> </td> <td> <a href="https://tw-elements.com/docs/standard/forms/login-form/"> <img alt="Tailwind 组件" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/login-form.webp"> </a> </td> </tr> <tr> <td align="center">文件输入</td> <td align="center">输入组</td> <td align="center">登录表单</td> </tr>  <tr> <td> <a href="https://tw-elements.com/docs/standard/forms/radio/"> <img alt="Tailwind 组件" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/radio-1.webp"> </a> </td> <td> <a href="https://tw-elements.com/docs/standard/forms/range/"> <img alt="Tailwind 组件" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/range-1.webp"> </a> </td> <td> <a href="https://tw-elements.com/docs/standard/forms/registration-form/"> <img alt="Tailwind 组件" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/registration-form.webp"> </a> </td> </tr> <tr> <td align="center">单选框</td> <td align="center">范围滑块</td> <td align="center">注册表单</td> </tr>  <tr> <td> <a href="https://tw-elements.com/docs/standard/forms/search/"> <img alt="Tailwind 组件" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/search-1.webp"> </a> </td> <td> <a href="https://tw-elements.com/docs/standard/forms/select/"> <img alt="Tailwind 组件" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-pro/select-1.webp"> </a> </td> <td> <a href="https://tw-elements.com/docs/standard/forms/switch/"> <img alt="Tailwind 组件" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/switch.webp"> </a> </td> </tr> <tr> <td align="center">搜索</td> <td align="center">选择</td> <td align="center">开关</td> </tr>  <tr> <td> <a href="https://tw-elements.com/docs/standard/forms/textarea/"> <img alt="Tailwind 组件" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/textarea.webp"> </a> </td> <td> <a href="https://tw-elements.com/docs/standard/data/tables/"> <img alt="Tailwind 组件" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/table-1.webp"> </a> </td> <td> <a href="https://tw-elements.com/docs/standard/methods/ripple/"> <img alt="Tailwind 组件" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/ripple.webp"> </a> </td> </tr> <tr> <td align="center">文本域</td> <td align="center">表格</td> <td align="center">涟漪效果</td> </tr>  <tr> <td> <a href="https://tw-elements.com/docs/standard/content-styles/animations/"> <img alt="Tailwind 组件" src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/pro/demo-new/assets/images/animations2.webp"> </a> </td> <td> <a href="https://tw-elements.com/docs/standard/content-styles/mask/"> <img alt="Tailwind 组件" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/mask-1.webp"> </a> </td> <td> <a href="https://tw-elements.com/docs/standard/content-styles/shadows/"> <img alt="Tailwind 组件" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/shadow-1.webp"> </a> </td> </tr> <tr> <td align="center">动画</td> <td align="center">遮罩</td> <td align="center">阴影</td> </tr>  <tr> <td> <a href="https://tw-elements.com/docs/standard/data/datatables/"> <img alt="Tailwind 组件" src="https://mdbcdn.b-cdn.net/docs/standard/pro/demo/assets/images/datatable.webp"> </a> </td> <td> <a href="https://tw-elements.com/docs/standard/components/lightbox/"> <img alt="Tailwind 组件" src="https://mdbcdn.b-cdn.net/docs/standard/pro/demo/assets/images/lightbox.webp"> </a> </td> <td> <a href="https://tw-elements.com/docs/standard/components/rating/"> <img alt="Tailwind 组件" src="https://mdbcdn.b-cdn.net/docs/standard/pro/demo/assets/images/rating.webp"> </a> </td> </tr> <tr> <td align="center">数据表格</td> <td align="center">灯箱</td> <td align="center">评分</td> </tr>  <tr> <td> <a href="https://tw-elements.com/docs/standard/methods/scrollbar/"> <img alt="Tailwind 组件" src="https://mdbcdn.b-cdn.net/docs/standard/pro/demo/assets/images/scrollbar.webp"> </a> </td> <td> <a href="https://tw-elements.com/docs/standard/components/popconfirm/"> <img alt="Tailwind 组件" src="https://mdbcdn.b-cdn.net/docs/standard/pro/demo/assets/images/popconfirm.webp"> </a> </td> <td> <a href="https://tw-elements.com/"> <img alt="徽标云" src="https://mdbootstrap.com/img/tw-demo/design-blocks.webp"> </a> </td> </tr> <tr> <td align="center">滚动条</td> <td align="center">气泡确认框</td> <td align="center">更多内容即将推出</td> </tr> </table>

设计模块

使用Tailwind CSS构建的响应式登陆页面模块。提供大量设计模块示例,如团队、服务、项目、常见问题等等。

<table> <tr> <td> <a href="https://tw-elements.com/docs/standard/designblocks/hero-sections/"> <img alt="主页" src="https://mdbootstrap.com/img/tw-demo/hero.webp"> </a> </td> <td> <a href="https://tw-elements.com/docs/standard/designblocks/pricing/"> <img alt="定价" src="https://mdbootstrap.com/img/tw-demo/pricing.webp"> </a> </td> <td> <a href="https://tw-elements.com/docs/standard/designblocks/cta/"> <img alt="行动号召" src="https://mdbootstrap.com/img/tw-demo/cta.webp"> </a> </td> </tr> <tr> <td align="center">主页</td> <td align="center">定价</td> <td align="center">行动号召</td> </tr> <tr> <td> <a href="https://tw-elements.com/docs/standard/designblocks/features/"> <img alt="特性" src="https://mdbootstrap.com/img/tw-demo/features.webp"> </a> </td> <td> <a href="https://tw-elements.com/docs/standard/designblocks/contact/"> <img alt="联系" src="https://mdbootstrap.com/img/tw-demo/contact.webp"> </a> </td> <td> <a href="https://tw-elements.com/docs/standard/designblocks/news/"> <img alt="新闻/博客" src="https://mdbootstrap.com/img/tw-demo/news.webp"> </a> </td> </tr> <tr> <td align="center">特性</td> <td align="center">联系</td> <td align="center">新闻/博客</td> </tr> <tr> <td> <a href="https://tw-elements.com/docs/standard/designblocks/team/"> <img alt="团队" src="https://mdbootstrap.com/img/tw-demo/team.webp"> </a> </td> <td> <a href="https://tw-elements.com/docs/standard/designblocks/stats/"> <img alt="统计" src="https://mdbootstrap.com/img/tw-demo/stats.webp"> </a> </td> <td> <a href="https://tw-elements.com/docs/standard/designblocks/testimonials/"> <img alt="推荐" src="https://mdbootstrap.com/img/tw-demo/testimonials.webp"> </a> </td> </tr> <tr> <td align="center">团队</td> <td align="center">统计</td> <td align="center">推荐</td> </tr> <tr> <td> <a href="https://tw-elements.com/docs/standard/designblocks/content/"> <img alt="内容" src="https://mdbootstrap.com/img/tw-demo/content.webp"> </a> </td> <td> <a href="https://tw-elements.com/docs/standard/designblocks/newsletter/"> <img alt="通讯" src="https://mdbootstrap.com/img/tw-demo/newsletter.webp"> </a> </td> <td> <a href="https://tw-elements.com/docs/standard/designblocks/project-sections/"> <img alt="项目" src="https://mdbootstrap.com/img/tw-demo/projects.webp"> </a> </td> </tr> <tr> <td align="center">内容</td> <td align="center">通讯</td> <td align="center">项目</td> </tr> <tr> <td> <a href="https://tw-elements.com/docs/standard/designblocks/headers/"> <img alt="页眉" src="https://mdbootstrap.com/img/tw-demo/headers.webp"> </a> </td> <td> <a href="https://tw-elements.com/docs/standard/designblocks/faq/"> <img alt="常见问题" src="https://mdbootstrap.com/img/tw-demo/faq.webp"> </a> </td> <td> <a href="https://tw-elements.com/docs/standard/designblocks/logo-clouds/"> <img alt="标志云" src="https://mdbootstrap.com/img/tw-demo/logo-clouds.webp"> </a> </td> </tr> <tr> <td align="center">页眉</td> <td align="center">常见问题</td> <td align="center">标志云</td> </tr> <tr> <td> <a href="https://tw-elements.com/docs/standard/designblocks/banners/"> <img alt="横幅" src="https://mdbootstrap.com/img/tw-demo/banners.webp"> </a> </td> <td> <a href="https://tw-elements.com/docs/standard/designblocks/mega-menu/"> <img alt="大型菜单" src="https://mdbootstrap.com/img/tw-demo/mega-menu.webp"> </a> </td> <td> <a href="https://tw-elements.com/"> <img alt="更多即将推出" src="https://mdbootstrap.com/img/tw-demo/design-blocks.webp"> </a> </td> </tr> <tr> <td align="center">横幅</td> <td align="center">大型菜单</td> <td align="center">更多即将推出</td> </tr> </table>

集成

TW Elements与流行技术的集成。

安装

NPM

在开始项目之前，请确保安装 Node.js (LTS) 和 TailwindCSS。
运行以下命令通过NPM安装软件包：

npm install tw-elements

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

module.exports = {
  content: ["./src/**/*.{html,js}", "./node_modules/tw-elements/js/**/*.js"],
  plugins: [require("tw-elements/plugin.cjs")],
  darkMode: "class",
};

添加js文件后，动态组件将正常工作：

<script src="./TW-ELEMENTS-PATH/js/tw-elements.umd.min.js"></script>

或者，您可以通过以下方式导入它（打包器版本）：

import 'tw-elements';

MDB GO / CLI

使用单个命令创建、部署和托管任何内容。

要开始使用MDB GO / CLI，请使用以下命令安装：

npm install -g mdb-cli

使用您的MDB账户登录CLI：

mdb login

初始化项目并从列表中选择 Tailwind Elements：

mdb init tailwind-elements-free

npm install

运行应用程序：

npm start

准备就绪后发布：

mdb publish

CDN

您可以通过将CDN脚本添加到经典HTML模板中轻松测试TW Elements，无需安装任何软件包。

在 head 部分添加以下样式表文件：

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tw-elements/css/tw-elements.min.css" />
<script src="https://cdn.tailwindcss.com"></script>
<script>
  tailwind.config = {
    darkMode: "class",
    theme: {
      fontFamily: {
        sans: ["Roboto", "sans-serif"],
        body: ["Roboto", "sans-serif"],
        mono: ["ui-monospace", "monospace"],
      },
    },
    corePlugins: {
      preflight: false,
    },
  };
</script>

在 body 结束标签之前引入js打包文件：

<script src="https://cdn.jsdelivr.net/npm/tw-elements/js/tw-elements.umd.min.js"></script>

TW-Elements

目录

社区

即将推出

组件

设计模块

集成

安装

NPM

MDB GO / CLI

CDN

编辑推荐精选

讯飞智文

讯飞星火

Spark-TTS

Trae

咔片PPT

讯飞绘文

材料星

openai-agents-python

Hunyuan3D-2

3FS

探索AI的无限可能

推荐工具精选

Trae

豆包

讯飞文书

讯飞绘文

讯飞绘镜

阿里绘蛙

咔片PPT

AI云服务特惠

火山引擎

阿里云

腾讯云

华为云

百度智能云

AWS

关注微信公众号