Tailwind CSS 最流行的9 个基础插件
Tailwind CSS 是一个实用程序优先的 CSS 框架，它正在迅速普及，并且有许多插件可以促进您的工作效率，这里会推荐最流行的9个插件。
如何安装 Tailwind CSS 插件？
安装 Tailwind CSS 插件很容易。
1.1. 首先，安装软件包。例如，要安装 daisyUI 插件，请运行：
npm i daisyui
- 然后，将插件添加到
tailwind.config.js数组中的plugins文件中：
module.exports = {
plugins: [require("daisyui")],
}
这里是最好的 Tailwind CSS 插件列表：
1. daisyUI
daisyUI 是 Tailwind CSS 的免费组件库，可向 Tailwind CSS 添加组件类名称。
它可以帮助您更快地构建网站。daisyUI 使用人性化和描述性的类名，如 btn 、 、 、 card toggle modal 等 alert ，这有助于您使用更少的类名并保持 HTML 干净。
daisyUI 还带有许多内置主题和深色模式支持，因此您无需编写任何其他类名即可启用深色模式。它开箱即用。
2. tailwindcss/typography
tailwindcss/typography 是官方的 Tailwind CSS 插件，它为您的所有文本内容添加默认样式。
该插件由 Tailwind CSS 团队制作，它是任何 Tailwind CSS 项目的必备插件，尤其是当您正在构建包含大量文本内容的博客或网站时。它与 Markdown 内容配合得很好，因为您所要做的就是将类添加到 prose 您的容器中，它会自动设置您的所有文本内容的样式。
3. tailwindcss/container-queries
Tailwind 团队的另一个插件 tailwindcss/container-queries 在 Tailwind CSS 中添加了一个新的很酷的 CSS 功能，称为容器查询。容器查询类似于媒体查询，但不是检查屏幕大小，而是检查容器的大小。如果您想根据容器的大小更改网站的布局，这将非常有用。
所有现代浏览器都支持 tailwindcss/container-queries，很快类名将被添加到 Tailwind CSS 核心中，但现在您可以使用此插件在项目中实现容器查询。
4. tailwindcss-flip
tailwindcss-flip 是一个 Tailwind CSS 插件，它将所有 CSS 属性镜像到相反的方向。例如，如果你有 mr-6 margin-right 而不是 ，它会给你 margin-left .如果您想支持阿拉伯语、波斯语、希伯来语等 RTL 语言，这将很有用。使用 tailwindcss-flip 毫不费力。您所要做的就是安装它并添加到 dir="rtl" <html> 标签中。
5.tailwindcss-animate
tailwindcss-animate 将动画类名添加到 Tailwind CSS。使用这个插件比在 tailwind.config.js 文件中添加自己的动画要容易得多。您所要做的就是安装它并将 animate-<animation-name> 类添加到您的元素中。
6. tailwind-scrollbar-hide
tailwind-scrollbar-hide 插件只是向 Tailwind CSS 添加新的实用程序类名称来隐藏滚动条。
7. tailwindcss/forms
tailwindcss/forms 是 Tailwind 团队的一个插件，它为您的所有表单元素添加了默认样式。请注意，如果您将此插件与任何组件库（如 daisyUI）一起使用，则应启用 strategy: 'class' 此插件，以便它仅将样式添加到您选择的元素中。否则，它将发生冲突，因为两个插件都向相同的元素添加样式。
8. tailwindcss-opentype
tailwindcss-opentype 是一个为 Tailwind CSS 添加 OpenType 功能的插件。如果您使用的字体具有连字、字距调整、替代字形等功能，您肯定需要此插件来充分利用您的字体。
9. tailwindcss-3d
tailwindcss-3d 向 Tailwind CSS 添加了 3D 变换。如果您想对元素进行 3D 转换，这将非常有用。tailwindcss-3d 插件的好处是实用程序类是独立的。您可以单独对 x, y, z 轴使用实用程序类。
感谢您的阅读！
推荐阅读
转载自:https://juejin.cn/post/7337354931479052328