Tailwind Elements：首选的Tailwind组件库

发表时间: 2023-10-15 06:20

大家好，很高兴又见面了，我是"高级前端‬进阶‬"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

什么是 Tailwind Elements

Tailwind Elements 是 Tailwind CSS 的一个巨大的免费交互式组件集合，其包含以下内容：

500+ UI 组件
117+ 设计模块
深色模式支持
轻松主题化和定制
简单，1 分钟安装
免费供个人和商业用途

本质上，Tailwind Elements 是一个插件，它通过许多交互式组件扩展了库的功能。

在一些动态组件（如下拉菜单或模式）中，开发者通过添加自定义 JavaScript。但是，无需任何额外安装，所有必要的代码始终包含在示例中并支持复制到任何 Tailwind 项目。

目前 Tailwind Elements 在 Github 上开源，有超过 12k 的 star、1.6k 的 fork、是一个优秀的前端开源项目。

Tailwind Elements 格式

为了满足新的模块化方法，Tailwind Elements 允许开发者使用 ES 和 UMD 格式。这些格式的不同之处在于组件的初始化方式以及在不同情况下的使用方式。

何时使用 ES 或 UMD 格式？

如果应用程序：

基于模块
使用捆绑器功能
需要 treeshaking

那么 ES 格式最适合，否则 UMD 是最佳选择。

Tailwind Elements ES 和 UMD 格式之间有什么区别？

简而言之，就是初始化组件的方式。为了允许捆绑器执行适当的 treeshaking，Tailwind Elements 已将组件初始化移至 initTE 方法。 UMD 格式的 Tailwind Elements 无需添加更多元素即可工作，但缺乏 treeshaking。另一方面，ES 格式的 Tailwind Elements 允许将组件用作单独的模块，从而导致构建尺寸小得多。

initTE 方法

要使用 initTE 方法，需要从 tw-element 导入它，与组件相同。开发者可以提供第二个参数，该参数是一个带有要传递给 init 方法的选项的对象。选项对象可以包含以下属性：

allowedReinits ：默认情况下它的值设置为 false。通过将该值更改为 true，initTE 方法将不会检查组件是否已初始化。例如，当将 Tailwind Elements 包与使用路由的框架（例如 Vue SPA）一起使用时，它会很有帮助
checkOtherImports ：默认情况下该值也设置为 false。如果 initTE 找到应该初始化但尚未作为参数传递的组件（例如，它找到建议应自动初始化的数据属性），它将在控制台中显示警告。鼓励在 initTE 方法的最后一次调用中使用它，因为它显示了当前 init 所缺少的内容。

如何使用 initTE 方法？

从项目 js 文件内的 tw-elements 包导入该方法，并使用要初始化的组件调用它。

import { Datepicker, Input, initTE } from 'tw-elements';initTE({ Datepicker, Input }, { allowReinits: true });

NPM

NPM 是使用 Tailwind Elements 和其他库的推荐方式。

确保已安装 Node.js。为了验证这一点，请打开命令行并输入 node -v。如果安装了 Node，可以在控制台中看到它的版本。

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

npm install tw-elements

Tailwind Elements 是一个插件，应包含在 tailwind.config.js 中。还建议使用加载动态组件类的 js 文件模式来扩展内容数组。配置文件的最终版本应如下所示：

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

在 body 元素末尾之前包含以下 JavaScript 文件。请记住，根据项目的文件结构，文件的路径可能会有所不同。

<script  type="text/javascript"  src="../node_modules/tw-elements/dist/js/tw-elements.umd.min.js"></script>

现在，该库已准备好使用并可通过全局 te 变量进行访问。

集成 Vite

注意：确保安装了 Node.js 版本 16.17.0 + / 18.1.0 +。如果软件包管理器要求，请更新。如果您预计 vite.config.js 会出现问题并且不想更新 npm，请尝试使用 4.3.9 版本的 vite。

Vite 是一个构建工具，旨在为现代 Web 项目提供更快、更精简的开发体验。 Tailwind 元素可以按照以下流程导入到 Vite 应用中：

1、新建一个 vite 项目，进入新建的目录。选择 Vanilla 框架和 JavaScript 变体。如果您已安装，则可以跳过此步骤。

npm create vite@latest my-projectcd my-project

安装 tailwind CSS 及其依赖项。之后，使用 Tailwind CLI 工具初始化 tailwind 以创建 tailwind.config.cjs 文件。

npm install -D tailwindcss postcss autoprefixernpx tailwindcss init -p

转到 tailwind.config.cjs 文件并添加要存储 html 文件的路径。可以更改 index.html 位置，但请确保更改为 vite.config.js 文件内的根文件夹。

/** @type {import('tailwindcss').Config} */module.exports = {  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],  theme: {    extend: {},  },  plugins: [],};

将必要的 Tailwind 指令添加到您的 style.css 文件中，以便能够在网站上使用 Tailwind 类。除非您更改它，否则 style.css 应位于应用程序的根目录中。如果需要，您还可以删除 style.css 文件的默认内容。

@tailwind base;@layer base {  html {    @apply text-neutral-800;  }  html.dark {    @apply text-neutral-50;    @apply bg-neutral-800;  }}@tailwind components;@tailwind utilities;

链接 index.html 内的 css 文件。

<head>  ...  <link rel="stylesheet" href="style.css" />  ...</head>

Tailwind 与 vite 应用正常连接。如果您输入下面的代码，您将看到默认的 vite index.html 页面（如果您从 style.css 中删除了样式，则没有任何样式）。

npm run dev

安装 tw-elements 包

npm install tw-elements

将加载动态组件类的 js 文件模式添加到 tailwind.config.cjs 内的内容数组中。通过添加 Tailwind Elements 插件来扩展默认的 tailwind 类。

/** @type {import('tailwindcss').Config} */module.exports = {  content: [    './index.html',    './src/**/*.{html,js}',    './node_modules/tw-elements/dist/js/**/*.js',  ],  plugins: [require('tw-elements/dist/plugin.cjs')],  darkMode: 'class',};

现在可以开始开发应用程序了。由于 vite 创建的 package.json 的类型设置为 module，因此将使用 ES。让我们尝试导入一些代码并查看一切是否正常工作。不要忘记调用 initTE 方法。轮播组件应具有适当的样式，并在单击箭头或延迟一段时间后更改当前图像。

import { Carousel, initTE } from "tw-elements";initTE({ Carousel }, true ); // set second parameter to true if you want to use a debugger

参考资料

https://github.com/mdbootstrap/Tailwind-Elements/

https://tailwind-elements.com/docs/standard/getting-started/quick-start/

https://dev.to/cruip/25-places-where-you-can-get-free-tailwind-css-components-47lm