9 essential Tailwind CSS plugins for developers

去年发布作者：Pouya Saadeghi

9 个开发者必备的 Tailwind CSS 插件

在这篇文章中，我们将了解在你的下一个项目中使用的最佳 Tailwind CSS 插件列表

Tailwind CSS 是一个实用至上的 CSS 框架，它正迅速普及，并且有很多插件可以提升你的工作流程，让你的生活更轻松。

让我们开始吧！

如何安装 Tailwind CSS 插件？

安装 Tailwind CSS 插件很容易。

首先，你安装软件包。例如，要安装 daisyUI 插件，你运行

npm i daisyui

然后你将插件添加到tailwind.config.js文件中的plugins数组

module.exports = {
  plugins: [require("daisyui")],
}

这里是最佳 Tailwind CSS 插件列表：

daisyUI is the best Tailwind CSS component library

1. daisyUI

daisyUI是一个免费的 Tailwind CSS 组件库，它为 Tailwind CSS 添加了组件类名。它可以帮助你更快地构建网站。daisyUI 使用人性化和描述性的类名，例如btn,card,toggle,alert,modal等等。这可以帮助你使用更少的类名，并保持你的 HTML 代码简洁。 daisyUI 还带有许多内置主题和暗黑模式支持，因此你无需编写任何额外的类名即可启用暗黑模式。它可以开箱即用。

了解更多关于 daisyUI 的信息

tailwindcss/typography Tailwind CSS plugin

2. tailwindcss/typography

tailwindcss/typography是官方的 Tailwind CSS 插件，它为你的所有文本内容添加默认样式。 Typography 插件由 Tailwind CSS 团队制作，是任何 Tailwind CSS 项目的必备插件，特别是如果你正在构建博客或包含大量文本内容的网站。它与 Markdown 内容完美配合，因为你所要做的就是添加prose类到你的容器，它将自动样式化你的所有文本内容。

了解更多关于 Typography 插件的信息

tailwindcss/container-queries Tailwind CSS plugin

3. tailwindcss/container-queries

来自 Tailwind 团队的另一个插件，tailwindcss/container-queries添加了新的酷炫 CSS 功能，称为容器查询到 Tailwind CSS。容器查询类似于媒体查询，但它们不是检查屏幕尺寸，而是检查容器的尺寸。如果你想根据容器的尺寸更改网站的布局，这将非常有用。

容器查询被所有现代浏览器支持并且很快类名将被添加到 Tailwind CSS 核心中，但目前你可以使用此插件在你的项目中实现容器查询。

了解更多关于 tailwindcss/container-queries 的信息

tailwindcss-flip Tailwind CSS plugin

4. tailwindcss-flip

tailwindcss-flip是一个 Tailwind CSS 插件，它可以将你的所有 CSS 属性镜像到相反的方向。例如，如果你有mr-6而不是margin-right，它会给你margin-left。如果你想支持 RTL 语言（如阿拉伯语、波斯语、希伯来语等），这将非常有用。使用 tailwindcss-flip 非常轻松。你所要做的就是安装它并添加dir="rtl"到<html>标签。

阅读更多关于 tailwindcss-flip 的信息

GitHub

tailwindcss-animate Tailwind CSS plugin

5. tailwindcss-animate

tailwindcss-animate为 Tailwind CSS 添加了动画类名。使用此插件比在tailwind.config.js文件中添加你自己的动画要容易得多。你所要做的就是安装它并添加animate-<animation-name>类到你的元素。

了解更多关于 tailwindcss-animate 的信息

GitHub

tailwind-scrollbar-hide Tailwind CSS plugin

6. tailwind-scrollbar-hide

tailwind-scrollbar-hide插件只是为 Tailwind CSS 添加了新的实用类名，以隐藏滚动条。

了解更多关于 tailwind-scrollbar-hide 的信息

GitHub

tailwindcss/forms Tailwind CSS plugin

7. tailwindcss/forms

tailwindcss/forms是来自 Tailwind 团队的插件，它为你的所有表单元素添加默认样式。请注意，如果你将此插件与任何组件库（如 daisyUI）一起使用，你应该为此插件启用 strategy: 'class'，以便它仅将样式添加到你选择的元素。否则，它会产生冲突，因为两个插件都将样式添加到相同的元素。

了解更多关于 tailwindcss/forms 的信息

GitHub

tailwindcss-opentype Tailwind CSS plugin

8. tailwindcss-opentype

tailwindcss-opentype是一个为 Tailwind CSS 添加 OpenType 功能的插件。如果你的字体具有连字、字距调整、替代字形等功能，你绝对需要此插件才能充分利用你的字体。

阅读更多关于 tailwindcss-opentype 的信息

tailwindcss-3d Tailwind CSS plugin

9. tailwindcss-3d

tailwindcss-3d为 Tailwind CSS 添加了 3D 变换。如果你想为元素添加 3D 变换，这将非常有用。tailwindcss-3d 插件的好处是实用类是独立的。你可以分别使用x, y, z轴的实用类。

了解更多关于 tailwindcss-3d 的信息

GitHub

结论

Tailwind CSS 插件是扩展 Tailwind CSS 并为其添加新功能的好方法。你可以在 GitHub 和 NPM 上搜索更多插件，但如果你没有找到你想要的，你也可以使用Tailwind CSS API!

创建你自己的插件

标签评论

daisyUI 博客