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: [
TailwindFontFamily
] - font-size: [
TailwindFontSize
] - font-smoothing: [
FontSmoothing
] - font-style: [
TailwindFontStyle
] - font-weight: [
TailwindFontWeight
] - font-variant-numeric: [
TailwindFontVariantNumeric
] - letter-spacing: [
TailwindTracking
] - line-height: [
TailwindLeading
] - list-style-type: [
TailwindListStyle
] - list-style-position: [
TailwindListPosition
] - text-align: [
TailwindTextAlignment
] - text-color: [
TailwindTextColor
] - text-decoration: [
TailwindDecoration
] - text-decoration-color: [
TailwindDecorationColor
] - text-decoration-style: [
TailwindDecorationThickness
] - text-decoration-thickness: [
TailwindSizing
] - text-underline-offset: [
TailwindUnderlineOffset
] - text-transform: [
TailwindTextTransform
] - text-overflow: [
TailwindOverflow
] - text-indent: [
TailwindIndent
] - vertical-align: [
TailwindAlign
] - whitespace: [
TailwindWhiteSpace
] - word-break: [
TailwindBreak
] - content: [
TailwindContent
]
- font-family: [
- 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: [