前 10 个 Tailwind CSS 插件

Tailwind CSS：这被称为实用程序优先的 CSS 框架，用于构建自定义 UI。它是一个非常可定制的低级 CSS 框架，gIt 为您提供构建块，帮助您构建出色的设计而没有任何烦人的样式。

排名前 10 位的 Tailwind CSS 插件如下：

1. Tailwind CSS 排版：

• 如果你想为一篇文章或文档设置样式，或者它可能是一篇博客文章，在 tailwind 的帮助下，这非常困难，需要更多地关注排版和大量复杂的自定义 CSS。
• 此功能有助于在其前端构建应用程序，因为您花在设计组件上的时间非常少。

您可以通过以下命令下载它：

// Using npm
npm install @tailwindcss/typography

// Using Yarn
yarn add @tailwindcss/typography.

2. Tailwind CSS 自定义表单：

• Tailwind CSS 自定义表单用于提供更好的外观，并通过添加一些实用程序帮助提供更好的自定义
• 它用于轻松定制和制作更好的表格。

您可以通过以下命令下载它：

// Using npm
npm install @tailwindcss/custom-forms --save-dev

// Using Yarn
yarn add @tailwindcss/custom-forms -D

3. Tailwind CSS 表格插件：

• 此插件用于在 Tailwind css 中创建引导表。
• 它在 Bootstrap 中继承，并在帮助下，您可以使嵌套表与父表相同。

您可以通过以下命令下载它：

// With using NPM
npm install tailwindcss-tables --save

// With usingYarn
yarn add tailwindcss-tables

4. Tailwind CSS 主题插件：

• Tailwind-theming 是一个 CSS 插件，负责更改网站中的多个主题。
• 它通常用于制作网站中的深色主题。

您可以通过以下命令下载它：

$ yarn add tailwindcss-theming@next --dev

5. Tailwind CSS 截断多行：

• 当我们想要截断某些卡片中的文本并了解到仅使用 CSS 可能很难做到这一点时，它会有所帮助。
• 为此，我们可以使用 Tailwind CSS，它是一个高级插件，用于自定义。它用于截断多行文本元素是添加类 .truncate-key-lines ，其中键是截断之前显示的行数

您可以通过以下命令下载它：

// With using npm
npm install tailwindcss-truncate-multiline --save

// With using yarn
yarn add tailwindcss-truncate-multiline 

6.顺风CSS-Elevation：

• 这个插件提供了两个不同图像或组件的高度。
• 无论何时要应用高程，都需要使用 .elevation 实用程序。
• 这是在按钮 Click me ! 中添加 CSS 高程的基本示例

您可以通过以下命令下载它：

npm install tailwindcss-elevation

7. Tailwind CSS 纵横比：

• 这种类型的插件是在纵横比之前创建的，任何浏览器都支持它。
• 此插件需要 Tailwind CSS 1.2 或更高版本。它提供不同形状的定制尺寸。
• 该插件使用配置的主题和变体对象来创建纵横比实用程序。

您可以通过以下命令下载它：

npm install tailwindcss-aspect-ratio

8.顺风 CSS 渐变：

• 此插件可帮助您在添加的两种颜色之间提供非常平滑的过渡。
• 这些插件由开发人员定期更新。

您可以通过以下命令下载它：

npm install tailwindcss-gradients

9. Tailwind CSS 调试屏幕：

• Tailwind CSS 调试屏幕是一个显示响应断点的插件。
• 它可以很容易地定制一个主题和调试tailwind.config.js 文件。
• 您可以设置调试器选项以轻松找出断点。

您可以通过以下命令下载它：

npm install tailwindcss-debug-screens --save-dev

10. 顺风 CSS 微调器：

• 所有的 Web 应用程序都需要一个旧版本来加载数据，因此 Tailwind CSS 微调器是一个非常容易根据用户要求定制的加载器。您还可以根据您的要求更改其颜色、尺寸宽度等。
• 它可以与单个实用程序类一起使用。

// With using yarn
yarn add -D tailwindcss-spinner

// With using npm
npm install --save-dev tailwindcss-spinner