什么是 TailwindCSS?

一个实用程序优先的 CSS 框架,包含flex、pt-4、text-center和rotate-90等类,可以直接在您的标记中组合以构建任何设计。

什么是 Preline UI?

Preline UI 是一组基于实用程序优先Tailwind CSS框架的预构建 UI 组件的开源集合。

为什么要使用 Preline UI?

基于 Tailwind CSS 实用程序类,Preline UI 的预构建组件和 UI 元素可帮助您快速设计和自定义具有各种预定义组件(如模式、按钮、警报、卡片等)的响应式移动优先网站。

组件按视觉可用性标准(组件、导航、表单等)进行分组,并直接在 Tailwind CSS 之上设置样式,使其易于扩展和定制。对于希望创建独特且引人注目的设计系统而无需手动创建每个组件的开发人员来说,这是一个救命稻草。

它是新项目和现有项目的绝佳选择。

...而且它完全免费! 🤯

特点

让我们通过几个示例来看看最令人兴奋的功能。

插件 - 我们开发了一些完全没有样式的、完全可访问的 UI 插件,用于出于某种原因不属于核心的流行功能。可用插件(更多插件即将推出):

  • 手风琴

  • 折叠

  • 下拉菜单

  • 超级菜单

  • 模态

  • Offcanvas

  • 移除元素

  • 个标签

  • 弹出框

  • 工具提示

250 多个组件 - 我们在设计所有组件时花了很多心思,使其看起来连贯,并在各种网格布局中很好地协同工作。对于现代 Web 应用程序来说,它是一个非常丰富和完整的 UI 集合。不过,如果根据您的观点,某些组件看起来会有所不同,您可以轻松地对其进行编辑和自定义。学到更多

深色模式 - 现代操作系统都具有浅色和深色模式,为了使这尽可能简单,所有 Preline UI 组件都包含一个深色变体,可让您在启用深色模式时以不同的方式设置您的网站样式。了解更多

[暗模式示例](https://res.cloudinary.com/practicaldev/image/fetch/s--SsQF2VY7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to -uploads.s3.amazonaws.com/uploads/articles/s0k4uprg5ch04kgnkacy.jpg)

代码片段 - 每个组件都带有复制到剪贴板功能。只需单击“复制”按钮并将代码复制到您的文件中。艰苦的工作为您完成,并使过程更容易。

[代码片段示例](https://res.cloudinary.com/practicaldev/image/fetch/s--RO8aVWzj--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to -uploads.s3.amazonaws.com/uploads/articles/k0pq23z3buccubdblnmf.jpg)

文档

我们已尽最大努力使文档尽可能周到和彻底组织,并易于浏览不同的部分,以帮助您在构建不同站点时不会那么费力。

有关 Preline 选项的完整文档,请访问preline.com。

执照

Preline UI 是开源项目,并在 MIT 许可下获得更好的 Web。

在此处了解更多信息。

Preline 与其他框架

快速设置

本指南将帮助您开始使用 Preline UI,包括如何运行、自定义、更新和集成您的项目!

首先,您需要确保已安装工作的 Tailwind CSS 项目,并且您的计算机上还安装了 Node 和 NPM。

需要通过 NPM

1.通过npm安装preline-ui

npm i preline-ui

  1. 在tailwind.config.js文件中包含 Preline UI 作为插件

npm i preline-ui

  1. 在<body>标签的末尾处包含为交互式元素提供支持的 JavaScript<script>:

<script src="./docs/assets/vendor/preline-ui/preline-ui.bundle.js"></script>

即将推出的功能

我们正在努力为设计师和开发人员提供更多节省时间的功能,以下是即将推出的功能列表:

  • 起始页和示例

  • Figma 设计系统

  • 个 Tailwind 插件

  • 更多组件

请随时在下面的评论部分分享您希望在未来更新中看到的功能。

结论

Preline 为每个组件提供广泛的选择,通过为您提供高质量的设计解决方案,让您的生活更轻松。这种多样性在处理复杂的 UI 时非常强大和有用。

最好的是,它不会限制你! 🔥

我们相信效用优先的理念是前进的方向。我们才刚刚开始,未来会有更多令人兴奋的功能。让我们一起建设! 🤘

不要忘记与您的朋友和其他学习 CSS 框架的代码新手分享这篇文章。

如需更多最新的 Web 开发内容,请关注我们的Twitter和Htmlstream in Dev.to和我在 Dev.to!

谢谢阅读! 😎

# scss
Logo
向您推荐>>ModelScope魔搭中文开源社区

ModelScope旨在打造下一代开源的模型即服务共享平台，为泛AI开发者提供灵活、易用、低成本的一站式模型服务产品，让模型应用更简单！

更多推荐

一个开源应用程序导致 XSS 到 RCE 漏洞缺陷

跨站点脚本 (XSS) 是 Web 应用程序中最常遇到的攻击之一。如果攻击者可以将 JavaScript 代码注入到应用程序输出中,这不仅会导致 cookie 盗窃、重定向或网络钓鱼,而且在某些情况下还会导致系统完全受损。 在本文中,我将通过 Evolution CMS、FUDForum 和 GitBucket 的示例展示如何通过 XSS 实现远程代码执行。 进化CMS v3.1.8 链接:git

avatar 开源

我在校园 DevRel 展上的主要收获乔恩·戈特弗里德 E1

嘿嘿👋,欢迎来到校园DevRel 秀的这个博客系列,重点是来自神奇嘉宾DevRels 的经验教训。 在我们开始之前!让我们花点时间了解一下 DevRel 到底是什么。顾名思义,开发者关系(或 DevRel)专注于维护与负责开发组织技术或产品的人员的关系。根据公司及其目标,该领域的角色可以采取各种形式和任务。组织和开发人员之间的沟通通常是 DevRel 的责任,以确保更好的信息流和反馈循环。这是对

avatar 开源

克服心理障碍,为开源做贡献

为开源做贡献是一项艰巨的任务。我已经当了 3 年的软件工程师,并且已经构建了近十年的软件,但我从来没有能够为开源项目做出贡献。 它总是显得如此大胆和令人困惑。 我以前开过 PR,接受过几十个比我优秀的开发者的批评,从不流汗。 但开源似乎总是我无法企及的。 为什么重要? 🤔 我 90% 的代码都是闭源的。很多公司都希望看到我的代码和我从事的项目,但除了部署的应用程序和我 3 年前做的一些全栈项目之

avatar 开源