Lib.rs

› Web programming
#tailwind #css #css-class #instructions #compile #compiler #jit-compiler

tailwind-css

Compile tailwind short instructions to css

by SasakiSaki and 2 contributors

66 releases

0.13.0 Sep 30, 2022
0.12.7 Nov 27, 2023
0.12.6 Oct 21, 2023
0.12.4 Mar 9, 2022

#248 in Web programming

Download history 3/week @ 2024-08-30 23/week @ 2024-09-20 14/week @ 2024-09-27 4/week @ 2024-10-04

255 downloads per month
Used in 3 crates

MPL-2.0 license

475KB
12K SLoC

Rust 10K SLoC // 0.0% comments Objective-C 2K SLoC

Tailwind CSS

Tailwind style tracer, JIT + AOT Interpreter!

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();
}

Notice

Tailwind++ Grammar

This library is not strictly implemented according to the original version.

Especially when some writing methods can be simplified or generalized.

For example arbitrary values of z-index needs brackets, but rs version does not.

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

Bundle or Inline?

For example, there are style overrides in p-auto px-px pt-2 pb-2.

In inline mode, the latter will overwrite the former, and finally get padding:.5rem 1px

In Bundle mode, the final result depends on the browser.

Implement Progress

tailwind-rs needs your help!

A lot of documentation and test cases are missing, you are welcome to pr!

See the tests folder for details.

Dependencies

~2MB
~37K SLoC