Logo

菜单

发布于 2026-01-06 1 阅读
0

8 个 Tailwind CSS 资源助你下一个项目腾飞：Kutty Windmill 仪表盘 Truncate 多行插件（适用于 Tailwind CSS）、Tailwind CSS 自定义表单、Tailwind CSS 容器尺寸插件、Tailwind 配置查看器、Tailwind CSS 调试屏幕。📱 由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

8 个 Tailwind CSS 资源，助您下一个项目腾飞

库蒂

风车仪表盘

Tailwind CSS 多行截断插件

Tailwind CSS 自定义表单

Tailwind CSS 容器尺寸插件

Tailwind 配置查看器

Tailwind CSS 调试屏幕 📱

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

说实话，无论是第一次还是第一百次，面对空白的 Tailwind CSS 文件都会让人望而生畏。任务的艰巨性会在兴奋之余逐渐显现。以下是我在需要快速推进项目或寻找灵感时首先会参考的八个资源，或许对你也有帮助。

在列表的最后，我会告诉你，无论如何，我都会在每个 Tailwind CSS 项目中添加以下哪些内容！

主题组件

GitHub 标志 praveenjuge / kutty

Kutty 是一个用于构建 Web 应用程序的 Tailwind 插件。它提供了一系列易于访问且可重用的组件，这些组件通常用于 Web 应用程序中。

库蒂

Kutty 是一个用于构建 Web 应用程序的 Tailwind 插件。它提供了一系列易于访问且可重用的组件，这些组件通常用于 Web 应用程序中。

另请参阅mynaui.com

  • 无需任何插件即可制作的 TailwindCSS UI 组件和模板。
  • 开源。
  • 完全响应式设计，易于访问。

安装

npm install kutty --save
Enter fullscreen mode Exit fullscreen mode

此插件需要 Tailwind CSS 3 或更高版本。此软件包不包含 Tailwind CSS。点击此处了解如何安装 Tailwind。

用法

CSS

将已安装的插件直接添加到 Tailwind 配置中：

// tailwind.config.js
plugins: [require("kutty")],
Enter fullscreen mode Exit fullscreen mode

对于 JS

我们的组件集成了 AlpineJS v2.8.0，以实现响应式设计。点击此处了解更多关于 AlpineJS 的信息。请将以下 script 标签放置在 body 标签之前。

<!-- All components in one -->
<script src="https://cdn.jsdelivr.net/npm/kutty@latest/dist/kutty.min.js"></script>
Enter fullscreen mode Exit fullscreen mode 
<!-- Single component -->
<!-- Include AlpineJS first -->
<script src
…
Enter fullscreen mode Exit fullscreen mode
在 GitHub 上查看

GitHub 标志 estevanmaito /风车仪表盘

📊 多主题、完全可访问、可直接用于生产环境的仪表盘。

风车仪表盘

一个多主题、完全可访问、包含组件和页面示例、可直接用于生产环境的仪表板。

🧪 现场观看

  • 🦮 完全可访问
  • 🌗 浅色和深色主题
  • 💅 使用 Tailwind CSS 进行样式设计
  • 🧩 各种组件
  • ❄ React 版本

🚀 用法

克隆或下载此仓库，您需要的一切都在public文件夹内。

🦮 无障碍

该仪表盘从一开始就考虑到了无障碍设计。

  1. 所有文本均符合 WCAG AA 级（至少）标准
  2. 它完全可以通过键盘操作。
  3. 实际上，我在开发过程中使用NVDA来读取屏幕。

良好的无障碍设计实践，例如模态框（可在线测试），能让每个人都受益。它利用焦点陷阱技术，防止用户在使用键盘导航时失去焦点；同时考虑到使用大屏幕设备的移动用户，模态框被放置在屏幕底部。

🌗 多主题

它使用 Tailwind CSS 进行样式设置，并且……

在 GitHub 上查看

文本和排版组件

GitHub 标志 jhta / tailwindcss-truncate-multiline

Tailwind CSS 插件，用于生成截断多行实用程序

Tailwind CSS 多行截断插件

安装

npm install tailwindcss-truncate-multiline --save
Enter fullscreen mode Exit fullscreen mode

或者

yarn add tailwindcss-truncate-multiline
Enter fullscreen mode Exit fullscreen mode

用法

// tailwind.config.js
{
  theme: {
      truncate: {
          lines: {
              3: '3',
              5: '5',
              8: '8',
          }
      }
    
  plugins: [
    require('tailwindcss-truncate-multiline')(),
  ],
}
Enter fullscreen mode Exit fullscreen mode

此插件会生成以下实用程序：

.truncate-[key]-lines {
    'overflow': 'hidden',
    'display': '-webkit-box',
    '-webkit-line-clamp': [value],
    '-webkit-box-orient': 'vertical',
}
Enter fullscreen mode Exit fullscreen mode

变体：

您还可以添加变体：

//tailwind.config.js
{
    ...
    plugins: [
       require('tailwindcss-truncate-multiline')(['responsive', 'hover']), 
    ]
}
Enter fullscreen mode Exit fullscreen mode

在 GitHub 上查看



GitHub 标志 tailwindlabs / tailwindcss-typography

Tailwind CSS排版 Tailwind CSS排版

一个插件，提供一组类，prose可用于向任何您无法控制的纯 HTML 添加漂亮的默认排版样式，例如从 Markdown 渲染的 HTML 或从 CMS 中提取的 HTML。

文档

如需完整文档，请访问tailwindcss.com/docs/typography-plugin。

社区

如需帮助、讨论最佳实践，或进行任何其他有利于搜索的对话：

在 GitHub 上讨论 Tailwind CSS Typography 插件

用于与他人进行非正式闲聊，请使用以下框架：

加入 Tailwind CSS Discord 服务器

在 GitHub 上查看

布局组件

GitHub 标志 tailwindlabs / tailwindcss-custom-forms

使用 Tailwind CSS 为表单元素设置样式提供了一个更好的基础。

本项目与 Tailwind CSS v2.0+ 不兼容，已被弃用，建议使用@tailwindcss/forms。

如果您使用的是 Tailwind CSS v1.x，仍然可以使用此功能，但我们建议您升级到 v2.0 并@tailwindcss/forms尽可能进行迁移。

Tailwind CSS 自定义表单

Tailwind 默认的下拉列表、复选框和单选按钮看起来很糟糕，唯一能让它们看起来更好的方法是使用自定义 CSS。

该项目的目标是为表单元素提供一个更好的起点，该起点仍然相当客观，并且可以通过添加实用程序轻松进行自定义，而无需编写复杂的 CSS 规则。

演示

截屏

安装

  1. 安装插件：
# Using npm
npm install @tailwindcss/custom-forms --save-dev
# Using Yarn
yarn add @tailwindcss/custom-forms -D
Enter fullscreen mode Exit fullscreen mode
  1. 将其添加到您的tailwind.config.js文件中：
// tailwind.config.js
module.exports = {
  // ...
  plugins: [
    require('@tailwindcss/custom-forms')
  ]
}
Enter fullscreen mode Exit fullscreen mode

文档

…

在 GitHub 上查看

GitHub 标志 Log1x / tailwindcss-container-sizes

一个简单的 Tailwind 插件，用于生成容器尺寸

Tailwind CSS 容器尺寸插件

软件包版本 软件包总下载量

要求

安装

通过 Yarn 安装：

$ yarn add tailwindcss-container-sizes
Enter fullscreen mode Exit fullscreen mode

用法

// tailwind.config.js
{
  theme: {
    screens: {
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
    },
    container: {
      center: true,
      padding: '1.5rem',
      sizes: {}, // defaults to breakpoint (screens) sizes
    },
  },
  plugins: [
    require('tailwindcss-container-sizes')(),
  ],
}
Enter fullscreen mode Exit fullscreen mode

此插件会生成以下实用程序：

.container-sm {
  max-width: 640px
  margin-right: auto;
  margin-left: auto;
  padding-right: 1.5rem;
  padding-left: 1.5rem
}

.container-md {
  max-width: 768px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1.5rem;
  padding-left: 1.5rem
}

.container-lg {
  max-width: 1024px;
  margin-right: auto;
…
Enter fullscreen mode Exit fullscreen mode
在 GitHub 上查看

奖励：开发者经验值

GitHub 标志 rogden / tailwind-config-viewer

一个用于可视化 Tailwind CSS 配置文件的本地 UI 工具。

Tailwind 配置查看器

用户界面截图

Tailwind 配置查看器是一个本地 UI 工具，用于可视化您的 Tailwind CSS 配置文件。在开发过程中，请保持其打开状态，以便快速引用自定义的 Tailwind 值/类。您可以轻松地在配置的不同部分之间导航，并通过单击将类名复制到剪贴板。

使用默认 Tailwind 配置的演示

安装

NPX

npx tailwind-config-viewer请从包含 Tailwind 配置文件的目录下运行。

全球

npm i tailwind-config-viewer -g

本地

npm i tailwind-config-viewer -D

本地安装时，您可以在 package.json 的 scripts 字段中添加一个条目来运行并打开查看器：

"scripts": {
  "tailwind-config-viewer": "tailwind-config-viewer -o"
}
Enter fullscreen mode Exit fullscreen mode

用法

tailwind-config-viewer在包含 Tailwind 配置文件的目录中运行该命令。

命令

服务（默认）

该serve命令是默认命令。运行tailwind-config-viewer方式与tailwind-config-viewer serve.

选项

选项 默认 描述
-p，--port 3000 港口
…
在 GitHub 上查看

GitHub 标志 jorenvanhee / tailwindcss-debug-screens

一个用于显示当前活动屏幕（响应式断点）的 Tailwind CSS 组件。

Tailwind CSS 调试屏幕 📱

一个用于显示当前活动屏幕（响应式断点）的 Tailwind CSS 组件。

演示

安装

需要Tailwind v1.0或更高版本。

  1. 安装插件：
npm install tailwindcss-debug-screens --save-dev
Enter fullscreen mode Exit fullscreen mode
  1. 将其添加到您的tailwind.config.js文件中：
// tailwind.config.js
module.exports = {
  //...
  plugins: [
    require('tailwindcss-debug-screens'),
  ]
}
Enter fullscreen mode Exit fullscreen mode

用法

将该类添加debug-screens到您的<body>标签中。

<body class="debug-screens">
Enter fullscreen mode Exit fullscreen mode

确保该类仅在开发期间存在。以下是在 Craft CMS 中如何实现此操作的示例：

<body class="{{ devMode ? 'debug-screens' : '' }}">
Enter fullscreen mode Exit fullscreen mode

定制

您可以在文件theme.debugScreens的相应部分自定义此插件tailwind.config.js。

忽略屏幕

要忽略特定屏幕（例如深色模式），请将屏幕名称添加到ignore配置数组中。dark默认情况下会被忽略。

//
…
Enter fullscreen mode Exit fullscreen mode
在 GitHub 上查看

在所有这些优秀的资源中，我发现Tailwind Debug Screens 插件在大多数情况下最有帮助。除了节省时间之外，它还能帮助你创建更好的响应式设计，并让你更熟悉 Tailwind 中的尺寸调整。

祝您编程愉快！

文章来源：https://dev.to/andrewmcodes/8-tailwind-css-resources-to-help-your-next-project-takeoff-2b92
Flutter 数据库检查器 st...
庆祝六月节