encre-css

一个用Rust编写的兼容TailwindCSS的实用优先CSS生成库

目录

• 实用优先CSS框架简介
• 入门
• 命令行界面
• 关于名称
• 许可证

实用优先CSS框架简介

传统上，无论何时您需要在网页上对某些内容进行样式设计，您都需要在专用文件中编写CSS，并使用HTML中的类来应用规则，如下所示

<div class="notification">
  <div class="notification-header">
    <div class="app-icon"></div>
    A new Javascript library has been released!
  </div>
  <div class="notification-body">
    The library <code>react</code> has just been released, did you know it?
    It is <i>a JavaScript library for creating user interfaces</i>.
  </div>
  <div class="notification-footer">
    <a href="#" class="dismiss-button">Dismiss</a>
    <a href="#" class="try-button">Try it here!</a>
  </div>
</div>

然而，这种方式进行样式设计相当无聊，因为您需要考虑良好的类名，并且需要反复在几个文件之间切换，这可以更好。实用优先CSS框架通过使用最小化和预定义的类名直接链接到其CSS规则内容来采用新的方法。然后，CSS文件将按需生成，使类非常灵活和可定制。这种方法让您能够快速原型化视觉HTML元素，并鼓励您使用您最喜欢的Web框架将它们转换为组件。它还使构建响应式网站变得更容易，并使其更接近您的系统（如果您有系统的话）

<div class="w-128 text-md shadow-[1px_1px_10px_2px_#e5e7eb] rounded-xl">
  <div class="p-3 flex items-center">
    <div class="bg-blue-500 rounded-full w-5 h-5 mr-3"></div>
    A new Javascript library has been released!
  </div>
  <div class="p-6 pt-4">
    The library <code>react</code> has just been released, did you know it?
    It is <i>a JavaScript library for creating user interfaces</i>.
  </div>
  <div class="flex justify-between">
    <a href="#" class="p-3 text-rose-600">Dismiss</a>
    <a href="#" class="p-3 bg-blue-600 text-white rounded-br-xl rounded-tl-xl shadow shadow-blue-600">Try it here!</a>
  </div>
</div>

已经有许多实用优先框架，如Tailwind CSS、Windi CSS、Twind和Uno CSS，但encre-css是独一无二的，因为它是用Rust编写的，并使用了一种新的架构，使其成为最快的实用优先框架（根据此处的基准测试，基于Uno CSS的基准测试）。

入门

将encre-css添加到您的Cargo.toml

[dependencies]
encre-css = "0.13.0"

生成样式需要两个步骤

• 您需要通过创建一个Config结构来配置CSS生成。可以通过使用Config::from_file从TOML文件中读取来创建它，或者通过使用Config::default使用默认值。
• 然后，您需要使用 generate 函数根据一些来源生成 样式。此函数将扫描来源的内容，提取原子类，并为每个类生成所需的样式。

示例

use encre_css::Config;

let config = Config::default();
let css = encre_css::generate(
    [r#"<p class="w-auto bg-red-200 rounded-md">Hello world!</p>"#],
    &config,
);

assert!(css.expect("failed to generate the CSS").ends_with(r#"
.w-auto {
  width: auto;
}

.rounded-md {
  border-radius: 0.375rem;
}

.bg-red-200 {
  --en-bg-opacity: 1;
  background-color: rgb(254 202 202 / var(--en-bg-opacity));
}"#));

命令行界面

还提供了命令行界面。使用以下命令安装：

cargo install encre-css-cli

然后运行 encrecss --help 以获取使用说明。

插件

encre-css 设计时考虑了模块化，因此可以编写或使用自定义插件。了解更多信息请访问 这里

关于名称

encre 在法语中意为 ink。

许可证

encre-css 在 MIT 许可证 下发布。