this is a fork of taikwindrs
link to original repo: https://github.com/oovm/tailwind-rs
the original author can no longer access crates, and encouraged forking: link for more info
Tailwind CSS
Tailwind style tracer, JIT + AOT Interpreter!
use TailwindBuilder;
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.
- Preflight
- Layout
- aspect-ratio: [
TailwindAspect] - container: [
TailwindContainer] - columns: [
TailwindColumns] - break-after: [
TailwindBreakAfter] - break-before: [
TailwindBreakBefore] - break-inside: [
TailwindBreakInside] - box-decoration-break: [
TailwindBoxDecoration] - box-sizing: [
TailwindBoxSize] - display: [
TailwindDisplay] - float: [
TailwindFloat] - clear: [
TailwindClear] - isolation: [
TailwindIsolation] - object-fit: [
TailwindObjectFit] - object-position: [
TailwindObjectPosition] - overflow: [
TailwindOverflow] - overscroll-behavior: [
TailwindOverscroll] - position: [
TailwindPosition] - inset: [
TailwindInset] - left: [
TailwindLeft] - right: [
TailwindRight] - top: [
TailwindTop] - bottom: [
TailwindBottom] - visibility: [
TailwindVisibility] - z-index: [
TailwindZIndex]
- aspect-ratio: [
- Flexbox & Grid
- flex-basis: [
TailwindBasis] - flex-direction: [
TailwindFlexDirection] - flex-wrap: [
TailwindFlexWrap] - flex: [
TailwindFlex] - flex-grow: [
TailWindGrow] - flex-shrink: [
TailWindShrink] - order: [
TailWindOrder] - grid-template-columns: [
TailwindGridColumns] - grid-template-rows: [
TailwindGridRows] - grid-column: [
TailwindColumn] - grid-row: [
TailwindRow] - grid-auto-flow: [
TailwindGridFlow] - grid-auto-columns: [
TailwindGridAuto] - grid-auto-rows: [
TailwindGridAuto] - gap: [
TailwindGap] - justify-content: [
TailwindJustifyContent] - justify-items: [
TailwindJustifyItems] - justify-self: [
TailwindJustifySelf] - justify-content: [
TailwindContent] - align-items: [
TailwindContent] - align-self: [
TailwindItems] - place-content: [
TailwindPlaceContent] - place-items: [
TailwindPlaceItems] - place-self: [
TailwindPlaceSelf]
- flex-basis: [
- Spacing
- Sizing
- width: [
TailwindSizing]- [] currently unsupported: keywords for width, like
xs - [] currently unsupported: max-h-none
- [] currently unsupported: keywords for width, like
- min-width: [
TailwindSizing] - max-width: [
TailwindSizing] - height: [
TailwindSizing] - min-height: [
TailwindSizing] - max-height: [
TailwindSizing]
- width: [
- Typography
- Backgrounds
- background-attachment: [
TailwindBackgroundAttachment] - background-clip: [
TailwindBackgroundClip] - background-color: [
TailwindBackgroundColor] - background-origin: [
TailwindBackgroundOrigin] - background-position: [
TailwindBackgroundPosition] - background-repeat: [
TailwindBackgroundRepeat] - background-size: [
TailwindBackgroundSize] - background-image: [
TailwindBackgroundImage] - background-from: [
TailwindFrom] - background-via: [
TailwindVia] - background-to: [
TailwindTo]
- background-attachment: [
- Borders
- border-radius: [
TailwindRounded] - border-width: [
TailwindBorderWidth] - border-color: [
TailwindBorderColor] - border-style: [
TailwindBorderStyle] - divide-width: [
TailwindDivideWidth] - divide-color: [
TailwindDivideColor] - divide-style: [
TailwindDivideStyle] - outline-width: [
TailwindOutlineWidth] - outline-color: [
TailwindOutlineColor] - outline-style: [
TailwindOutlineStyle] - ring-width: [
TailwindRingWidth] - ring-color: [
TailwindRingColor] - ring-offset-width: [
TailwindRingOffsetWidth] - ring-offset-width: [
TailwindRingOffsetColor]
- border-radius: [
- Effects
- box-shadow: [
TailwindShadow] - box-shadow-color: [
TailwindShadowColor] - opacity: [
TailwindOpacity] - mix-blend-mode: [
TailwindBlend] - background-blend-mode: [
TailwindBackgroundBlend]
- box-shadow: [
- Filters
- blur: [
TailwindBlur] - brightness: [
TailwindBrightness] - contrast: [
TailwindContrast] - drop-shadow: [
TailwindShadow] - grayscale: [
TailwindGrayscale] - hue-rotate: [
TailwindHueRotate] - invert: [
TailwindInvert] - saturate: [
TailwindSaturate] - sepia: [
TailwindSepia] - backdrop-blur: [
TailwindBlur] - backdrop-brightness: [
TailwindBrightness] - backdrop-contrast: [
TailwindContrast] - backdrop-grayscale: [
TailwindGrayscale] - backdrop-hue-rotate: [
TailwindHueRotate] - backdrop-invert: [
TailwindInvert] - backdrop-opacity: [
TailwindOpacity] - backdrop-saturate: [
TailwindSaturate] - backdrop-sepia: [
TailwindSepia]
- blur: [
- Tables
- border-collapse: [
TailwindBorderCollapse] - table-layout: [
TailwindTableLayout]
- border-collapse: [
- Transitions & Animation
- transition-property: [
TailwindTransition] - transition-duration: [
TailwindDuration] - transition-timing-function: [
TailwindEase] - transition-delay: [
TailwindDelay] - animation: [
TailwindAnimate]
- transition-property: [
- Transforms
- scale: [
TailwindScale] - rotate: [
TailwindRotate] - translate: [
TailwindTranslate] - skew: [
TailwindSkew] - transform-origin: [
TailwindOrigin]
- scale: [
- Interactivity
- accent-color: [
TailwindAccentColor] - appearance: [
TailwindAppearance] - cursor: [
TailwindCursor] - caret-color: [
TailwindCaretColor] - pointer-events: [
TailwindPointerEvents] - resize: [
TailwindResize] - scroll-behavior: [
TailwindOverscroll] - scroll-margin: [
TailwindScrollMargin] - scroll-padding: [
TailwindScrollPadding] - scroll-snap-align: [
TailwindSnapAlign] - scroll-snap-stop: [
TailwindSnapStop] - scroll-snap-type: [
TailwindSnapType] - touch-action: [
TailwindTorch] - user-select: [
TailwindSelect] - will-change: [
TailwindWillChange]
- accent-color: [
- SVG
- fill: [
TailwindFillColor] - stroke: [
TailwindStrokeColor] - stroke-width: [
TailwindStrokeWidth]
- fill: [
- Accessibility
- screen-readers: [
TailwindScreenReader]
- screen-readers: [