Open Props 是 Tailwind CSS 的免费开源替代品。如果您是字体端设计师，那么 Google 开发人员创建了 Tailwind CSS 的替代品，这对您来说可能是个好消息。这里也是一个 CSS 框架，但它的工作方式与 Tailwind 或传统 CSS 略有不同。与 Tailwind 不同，它没有预构建的类，因为您必须创建它们。相反，它使用了在网站主样式表中使用“vars”的不同概念。Open Props 强制您使用自己的样式表，但您现在必须使用 Open Props 变量，而不是对 CSS 属性（如颜色、边距、填充、边框等）使用传统的值。此外，您必须将其库包含在网站的头部部分，然后您就可以开始了。Open Props 的每个变量都以 “var” 关键字开头，并且不同的属性有不同的值可用。Open Props 中还有一些您可能喜欢的其他功能，例如对浅色和深色模式的内置支持。如果您是字体端开发人员，那么您现在可以在您的网站上包含此框架提供的切换开关。有了这个，您现在可以轻松地在夜间和灯光模式之间切换，而无需编写复杂的 CSS 代码。Google 的 Tailwind CSS 的免费开源替代品：开放道具使用开放式道具非常简单。就像任何框架一样，您首先要将其包含在您的网站中。你可以使用标签。只需将以下代码粘贴到您网站的部分，然后您就可以开始使用它了。现在，当您包含主文件后，就可以使用它了。您可以在标签或网站正在使用的主 CSS 文件中编写 CSS 代码。语法非常简单。请参阅下面的代码，使用 Open Props 指定颜色、边距、边框和填充。这个 CSS 框架的主页有详细的文档。在那里，您可以了解一切。它必须提供的所有变量都列在那里。您只需搜索您需要的内容，然后只需将其插入网站的主 CSS 代码中即可。Open Props 还有一个规范化版本，其中包含它必须提供的最酷的东西之一。这就是深色模式。有一个用于深色和浅色模式的预构建代码。事实上，您可以在任何网站上尝试此作。只需打开 Chrome DevTools 并在命令面板 （Ctrl+Shift+P） 中找到模拟的深色模式。现在，通过这种方式，您可以使用 Open Props 继续扩展您网站的 CSS 代码。它涵盖了所有 CSS 功能，也支持 CSS 动画。您只需在文档中查找您需要的内容，然后立即使用它。最后的想法：我真的很喜欢这个 CSS 框架的独特性，因为它强制用户在 CSS 文件中进行更改，而不是直接在 HTML 中进行更改，这就是它与其他流行框架的区别。正是这个属性也使它对初学者友好。所以，如果你对 CSS 有一点了解，那么我建议你尝试一下，并使用 Open Props 来设计美观的网站。
