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
] - min-width: [
TailwindSizing
] - max-width: [
TailwindSizing
] - height: [
TailwindSizing
] - min-height: [
TailwindSizing
] - max-height: [
TailwindSizing
]
- width: [
- Typography
- font-family: [
TailwindSizing
] - font-size: [
TailwindSizing
] - font-smoothing: [
TailwindSizing
] - font-style: [
TailwindSizing
] - font-weight: [
TailwindSizing
] - font-variant-numeric: [
TailwindSizing
] - letter-spacing: [
TailwindSizing
] - line-height: [
TailwindSizing
] - list-style-type: [
TailwindSizing
] - list-style-position: [
TailwindSizing
] - text-align: [
TailwindSizing
] - text-color: [
TailwindSizing
] - text-decoration: [
TailwindSizing
] - text-decoration-color: [
TailwindSizing
] - text-decoration-style: [
TailwindSizing
] - text-decoration-thickness: [
TailwindSizing
] - text-underline-offset: [
TailwindSizing
] - text-transform: [
TailwindSizing
] - text-overflow: [
TailwindSizing
] - text-indent: [
TailwindSizing
] - vertical-align: [
TailwindSizing
] - whitespace: [
TailwindSizing
] - word-break: [
TailwindSizing
] - content: [
TailwindSizing
]
- font-family: [
- Backgrounds
- background-attachment: [
TailwindSizing
] - background-clip: [
TailwindSizing
] - background-color: [
TailwindSizing
] - background-origin: [
TailwindSizing
] - background-position: [
TailwindSizing
] - background-repeat: [
TailwindSizing
] - background-size: [
TailwindSizing
] - background-image: [
TailwindSizing
] - background-from: [
TailwindSizing
] - background-via: [
TailwindSizing
] - background-to: [
TailwindSizing
]
- background-attachment: [
- Borders
- border-radius: [
TailwindSizing
] - border-radius: [
TailwindSizing
] - border-radius: [
TailwindSizing
] - border-radius: [
TailwindSizing
] - border-radius: [
TailwindSizing
] - border-radius: [
TailwindSizing
] - border-radius: [
TailwindSizing
] - border-radius: [
TailwindSizing
]
- border-radius: [
- Effects
- box-shadow: [
ShadowSystem
] - box-shadow-color: [
ShadowSystem
] - opacity: [
TailwindOpacity
] - mix-blend-mode: [
TailwindBlender
] - background-blend-mode: [
TailwindBlender
]
- box-shadow: [
- Filters
- blur: [
TailwindBlender
] - brightness: [
TailwindBlender
] - contrast: [
TailwindBlender
] - drop-shadow: [
TailwindBlender
] - grayscale: [
TailwindBlender
] - hue-rotate: [
TailwindBlender
] - invert: [
TailwindBlender
] - saturate: [
TailwindBlender
] - sepia: [
TailwindBlender
]
- blur: [
- Tables
- border-collapse: [
TailwindBorderCollapse
] - table-layout: [
TailwindTableLayout
]
- border-collapse: [
- Transitions & Animation
- transition-property: [
TailwindTableLayout
] - table-layout: [
TailwindTableLayout
] - border-collapse: [
TailwindTableLayout
] - border-collapse: [
TailwindTableLayout
] - table-layout: [
TailwindTableLayout
]
- transition-property: [
- Transforms
- scale: [
TailwindScale
] - rotate: [
TailwindRotate
] - translate: [
TailwindTranslate
] - skew: [
TailwindSkew
] - transform-origin: [
TailwindOrigin
]
- scale: [
- Transforms
- transform-origin: [
TailwindOrigin
]
- transform-origin: [