tailwind-css

Compile tailwind short instructions to css

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

#166 in Web programming

Download history 132/week @ 2023-10-30 24/week @ 2023-11-06 84/week @ 2023-11-13 96/week @ 2023-11-20 180/week @ 2023-11-27 81/week @ 2023-12-04 87/week @ 2023-12-11 20/week @ 2023-12-18 150/week @ 2023-12-25 78/week @ 2024-01-01 24/week @ 2024-01-08 97/week @ 2024-01-15 67/week @ 2024-01-22 157/week @ 2024-01-29 103/week @ 2024-02-05 251/week @ 2024-02-12

596 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
~35K SLoC