Crate tailwind_css

Tailwind to Css

Tailwind style tracer + compiler!

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");
    // 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.

• raw: 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 {}

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.

• preflight: PreflightSystem
• Layout
  • aspect-ratio: TailwindAspect
  • container: [``]
  • columns: [``]
  • break-after: TailwindBreak::After
  • break-before: TailwindBreak::Before
  • break-inside: TailwindBreak::Inside
  • box-decoration-break
  • box-sizing
  • display
  • float
  • clear
  • isolation
  • object-fit
  • object-position
  • overflow
  • overscroll-behavior
  • position
  • top-right-bottom-left
  • visibility
  • z-index
• Flexbox & Grid
  • z-index: TailWindZIndex
• Spacing
  • padding: TailwindSpacing
  • margin: TailwindSpacing
  • space: TailwindSpacing
• Sizing
  • width: TailwindWidth
  • min-width: TailwindWidth
  • max-width: TailwindWidth
  • height: TailwindHeight
  • min-height: TailwindHeight
  • max-height: TailwindHeight
• Typography
  • font-family
• Backgrounds
  • background-attachment
• Borders
  • border-radius
• Effects
  • box-shadow: ShadowSystem
  • box-shadow-color: ShadowSystem
  • opacity: TailwindOpacity
  • mix-blend-mode: TailwindBlender
  • background-blend-mode: TailwindBlender
• Filters
  • blur
• Tables
  • border-collapse: TailwindBorderCollapse
  • table-layout: TailwindTableLayout
• Transitions & Animation
  • box-shadow

Macros

css_attributes

Structs

BreakPoint

BreakPointSystem

CssAttribute

FontSystem

Palette

In general, it is a look-up table.

PaletteSystem

PreflightSystem

https://tailwindcss.com/docs/preflight

ShadowSystem

https://tailwindcss.com/docs/box-shadow

TailwindAspect

Utilities for controlling the aspect ratio of an element.

TailwindBlender

https://tailwindcss.com/docs/mix-blend-mode

TailwindBuilder

TailwindError

Error type for all tailwind operators

TailwindObject

Uncategorized tailwind property

TailwindOpacity

https://tailwindcss.com/docs/opacity

TailwindSpacing

Utilities for controlling an element’s padding.

Enums

TailWindZIndex

Utilities for controlling the stack order of an element.

TailwindBlendKind

TailwindBlendMode

TailwindBorderCollapse

Utilities for controlling whether table borders should collapse or be separated.

TailwindBreak

TailwindErrorKind

Actual error data for the error

TailwindHeight

https://tailwindcss.com/docs/width

TailwindSizing

used to express sizing

TailwindSpacingKind

TailwindSpacingSize

TailwindTableLayout

Utilities for controlling the table layout algorithm.

TailwindWidth

https://tailwindcss.com/docs/height

Traits

TailwindInstance

Type Definitions

ParsedItem

Tailwind Parsed Result

ParsedList

Tailwind Parsed Result

Result

All result about tailwind