Preline：一套开源的预构建 UI 组件，基于实用优先的 Tailwind CSS 框架

嘿，你有没有听说过Preline UI？如果你是一个开发者，尤其是喜欢用Tailwind CSS的朋友，那你可真得了解一下这个神器。Preline UI是一套开源的预构建UI组件，完全基于实用优先的Tailwind CSS框架。简单来说，就是它能帮你快速设计和定制响应式的移动优先网站，省去你从零开始设计每个组件的麻烦。

为什么选择Preline UI？

你可能会问，市面上那么多UI组件库，为什么偏偏要选Preline UI呢？首先，它是基于Tailwind CSS的，这意味着你可以利用Tailwind的所有强大功能。Preline UI提供了各种预构建的组件和UI元素，比如按钮、下拉菜单、导航栏、模态框等等。这些组件都是根据视觉可用性标准分组的，直接在Tailwind CSS的基础上进行样式化，易于扩展和定制。

盒子里有什么？

Preline UI的组件按视觉可用性标准分组，比如组件、导航、表单等。由于它们直接在Tailwind CSS的基础上进行样式化，所以你可以轻松地扩展和定制它们。对于那些想要创建独特且引人注目的设计系统的开发者来说，这简直就是个救星。

如何开始使用？

想要开始使用Preline UI？别担心，我来帮你搞定。首先，你得确保你的机器上已经安装了一个可用的Tailwind CSS项目，同时还需要Node和NPM。接下来，就可以通过NPM安装Preline了：

    bash
    npm i preline

然后呢，你需要在你的tailwind.config.js文件中把Preline UI作为一个插件引入：

    javascript
    module.exports = {
  content: [
    'node_modules/preline/dist/*.js'
  ],
  plugins: [
    require('preline/plugin')
  ],
}

最后，在你的<body>标签的末尾附近，包含那些让交互元素动起来的JavaScript：

    html
    <script src="./node_modules/preline/dist/preline.js"></script>

文档和社区

想要了解Preline UI的所有选项？去他们的官网preline.co看看吧。那儿还有关于TailwindCSS项目的各种插件的信息。如果你在使用过程中遇到问题，或者想讨论最佳实践，可以去GitHub Discussions找找答案。

许可证

Preline UI对个人和商业项目都是免费的，采用MIT和Preline UI公平使用许可证双重许可条款发布。所有品牌图标都是其各自所有者的商标，使用这些商标并不表示Preline UI对商标持有者的认可，反之亦然。

最后嘛

在我看来，Preline UI是一个非常值得尝试的工具，特别是如果你已经在使用Tailwind CSS的话。它不仅能节省你的时间，还能让你的网站看起来更加专业和现代化。试试看吧，也许你会爱上它哦！