TW Elements

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

500+ UI 组件
117+ 设计块
深色模式支持
简易主题设置与自定义
简单，1 分钟安装
个人和商业用途免费

立即开始使用 TW Elements！

社区

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

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

谢谢！

即将推出

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


拖放式构建器	模板

组件

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


日期选择器	下拉菜单	模态框

图表	工具提示	轮播

手风琴	标签页	步骤条

时间选择器	页脚	导航栏

警告框	头像	徽章

按钮组	按钮	卡片

标签	折叠面板	图库

巨幕	链接	列表组

通知	段落	占位符

弹出框	进度条	评分

回到顶部	社交按钮	加载动画

时间线	提示框	工具提示

视频	视频轮播	复选框

文件输入	输入组	登录表单

单选框	范围滑块	注册表单

搜索	选择	开关

文本域	表格	涟漪效果

动画	遮罩	阴影

数据表格	灯箱	评分

滚动条	气泡确认框	更多内容即将推出

设计模块

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


主页	定价	行动号召

特性	联系	新闻/博客

团队	统计	推荐

内容	通讯	项目

页眉	常见问题	标志云

横幅	大型菜单	更多即将推出

集成

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

TW Elements

目录

社区

即将推出

组件

设计模块

集成

安装

NPM

MDB GO / CLI

CDN