24 releases
| 0.12.31 | Oct 7, 2025 |
|---|---|
| 0.12.30 | Sep 19, 2025 |
| 0.12.14 | Aug 29, 2025 |
#515 in Web programming
484 downloads per month
560KB
13K
SLoC
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 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.
- 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 - [x] [font-family](https://tailwindcss.com/docs/font-family): [`TailwindFontFamily`] - [x] [font-size](https://tailwindcss.com/docs/font-size): [`TailwindFontSize`] - [x] [font-smoothing](https://tailwindcss.com/docs/font-smoothing): [`FontSmoothing`] - [x] [font-style](https://tailwindcss.com/docs/font-style): [`TailwindFontStyle`] - [x] [font-weight](https://tailwindcss.com/docs/font-weight): [`TailwindFontWeight`] - [x] [font-variant-numeric](https://tailwindcss.com/docs/font-variant-numeric): [`TailwindFontVariantNumeric`] - [x] [letter-spacing](https://tailwindcss.com/docs/letter-spacing): [`TailwindTracking`] - [x] [line-height](https://tailwindcss.com/docs/line-height): [`TailwindLeading`] - [x] [list-style-type](https://tailwindcss.com/docs/list-style-type): [`TailwindListStyle`] - [x] [list-style-position](https://tailwindcss.com/docs/list-style-position): [`TailwindListPosition`] - [x] [text-align](https://tailwindcss.com/docs/text-align): [`TailwindTextAlignment`] - [x] [text-color](https://tailwindcss.com/docs/text-color): [`TailwindTextColor`] - [x] [text-decoration](https://tailwindcss.com/docs/text-decoration): [`TailwindDecoration`] - [x] [text-decoration-color](https://tailwindcss.com/docs/text-decoration-color): [`TailwindDecorationColor`] - [x] [text-decoration-style](https://tailwindcss.com/docs/text-decoration-style): [`TailwindDecorationThickness`] - [x] [text-decoration-thickness](https://tailwindcss.com/docs/text-decoration-thickness): [`TailwindSizing`] - [x] [text-underline-offset](https://tailwindcss.com/docs/text-underline-offset): [`TailwindUnderlineOffset`] - [x] [text-transform](https://tailwindcss.com/docs/text-transform): [`TailwindTextTransform`] - [x] [text-overflow](https://tailwindcss.com/docs/text-overflow): [`TailwindOverflow`] - [x] [text-indent](https://tailwindcss.com/docs/text-indent): [`TailwindIndent`] - [x] [vertical-align](https://tailwindcss.com/docs/vertical-align): [`TailwindAlign`] - [x] [whitespace](https://tailwindcss.com/docs/whitespace): [`TailwindWhiteSpace`] - [x] [word-break](https://tailwindcss.com/docs/word-break): [`TailwindBreak`] - [x] [content](https://tailwindcss.com/docs/content): [`TailwindContent`]
- 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
- 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
- Transitions & Animation
- Transforms
- 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
- Accessibility
Dependencies
~2.5MB
~38K SLoC