Lib.rs

› 网页开发
#tailwind #css #instructions #compile #class #compiler #properties

tailwind-css

编译 Tailwind 短指令到 CSS

作者：SasakiSaki 和 2 位贡献者

66 个版本

0.13.0 2022 年 9 月 30 日
0.12.7 2023 年 11 月 27 日
0.12.6 2023 年 10 月 21 日
0.12.4 2022 年 3 月 9 日

#973 在 网页开发 中

Download history • Rust 包仓库 36/week @ 2024-04-01 • Rust 包仓库 34/week @ 2024-04-08 • Rust 包仓库 1/week @ 2024-05-27 • Rust 包仓库

每月 255 次下载
在 3 crates 中使用

MPL-2.0 许可证

475KB
12K SLoC

Rust 10K SLoC // 0.0% comments • Rust 包仓库 Objective-C 2K SLoC • Rust 包仓库

Tailwind CSS

Tailwind 风格追踪器，JIT + AOT 解释器！

use tailwind_css::TailwindBuilder;

fn build() {
    let mut tailwind = TailwindBuilder::default();
    // The compiler will expand directly into the final css property
    // Inline style will not be tracked
    let inline = tailwind.inline("py-2 px-4 bg-green-500");
    // The compiler will expand into a `class`, and record the style class used
    tailwind.trace("py-2 px-4 bg-green-500", false);
    // Compile all traced classes into bundle
    let bundle = tailwind.bundle();
}

注意

Tailwind++ 语法

此库并非严格按照原始版本实现。

特别是在一些写法可以简化或泛化的时候。

例如，z-index 的任意值需要括号，但 rs 版本不需要。

  • js: z-[100]
  • rs: z-100

打包还是内联？

例如，在 p-auto px-px pt-2 pb-2 中存在样式覆盖。

在内联模式下，后者将覆盖前者，最终得到 padding:.5rem 1px

在打包模式下，最终结果取决于浏览器。

实现进度

tailwind-rs 需要您的帮助！

很多文档和测试用例都缺失，欢迎您提交 pr！

详情请查看 tests 文件夹。

依赖项

~2MB
~38K SLoC