Expand description
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
Macros§
- attributes_ensure 
- css_attributes 
- Define a css declaration block with a map-like syntax
- syntax_error 
Structs§
- BreakPoint 
- BreakPoint System 
- CssAttributes
- A css property is used to remove duplicates.
- EffectSystem 
- FontSize 
- FontSystem 
- ImportantMap 
- The css-global-attributesystem.
- ImportantSet 
- The css-global-attributesystem.
- Negative
- Palette
- In general, it is a look-up table.
- PaletteSystem 
- PreflightSystem 
- Tailwind CSS Preflight v4 Style System https://tailwindcss.com/docs/preflight https://github.com/tailwindlabs/tailwindcss/blob/88b9f15b65588a87c5b6b13316530b4aecbc1b0b/packages/tailwindcss/preflight.css
- SpacingAxis 
- TailWind Grow 
- Utilities for controlling how flex items grow.
- TailWind Order 
- TailWind Shrink 
- TailwindAccent Color 
- TailwindAlign 
- Utilities for controlling the font smoothing of an element.
- TailwindAnimate 
- Utilities for rotating elements with transform.
- TailwindAppearance 
- TailwindArbitrary 
- TailwindAspect 
- Utilities for controlling the aspect ratio of an element.
- TailwindBackground Attachment 
- Utilities for controlling how a background image behaves when scrolling.
- TailwindBackground Blend 
- TailwindBackground Clip 
- Utilities for controlling the bounding box of an element’s background.
- TailwindBackground Color 
- TailwindBackground Image 
- TailwindBackground Origin 
- Utilities for controlling how an element’s background is positioned relative to borders, padding, and content.
- TailwindBackground Position 
- TailwindBackground Repeat 
- Utilities for controlling the repetition of an element’s background image.
- TailwindBackground Size 
- Utilities for controlling the background size of an element’s background image.
- TailwindBasis 
- TailwindBlend 
- TailwindBlur 
- Utilities for applying blur filters to an element.
- TailwindBorder Collapse 
- Utilities for controlling whether table borders should collapse or be separated.
- TailwindBorder Color 
- TailwindBorder Style 
- https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-style
- TailwindBorder Width 
- TailwindBottom 
- Utilities for controlling the placement of positioned elements.
- TailwindBoxDecoration 
- Utilities for controlling how element fragments should be rendered across multiple lines, columns, or pages.
- TailwindBoxSizing 
- Utilities for controlling how the browser should calculate an element’s total size.
- TailwindBreak 
- Utilities for controlling the font smoothing of an element.
- TailwindBreak After 
- Utilities for controlling how a column or page should break after an element.
- TailwindBreak Before 
- Utilities for controlling how a column or page should break before an element.
- TailwindBreak Inside 
- Utilities for controlling how a column or page should break within an element.
- TailwindBrightness 
- Utilities for applying brightness filters to an element.
- TailwindBuilder 
- TailwindCaret Color 
- TailwindClear 
- Utilities for controlling the wrapping of content around an element.
- TailwindColumn 
- TailwindColumns 
- Utilities for controlling the number of columns within an element.
- TailwindContainer 
- A component for fixing an element’s width to the current breakpoint.
- TailwindContent 
- TailwindContent Align 
- TailwindContrast 
- https://tailwindcss.com/docs/contrast
- TailwindCursor 
- TailwindDecoration 
- TailwindDecoration Color 
- Utilities for controlling the font smoothing of an element.
- TailwindDecoration Line 
- Utilities for controlling the font smoothing of an element.
- TailwindDecoration Style 
- Utilities for controlling the style of text decorations.
- TailwindDecoration Thickness 
- Utilities for controlling the font smoothing of an element.
- TailwindDelay 
- Utilities for controlling the delay of CSS transitions.
- TailwindDisplay 
- Utilities for controlling how the browser should calculate an element’s total size.
- TailwindDivide 
- TailwindDivide Color 
- TailwindDivide Reverse 
- TailwindDivide Style 
- TailwindDivide Width 
- Utilities for controlling the border width between elements.
- TailwindDuration 
- Utilities for controlling the duration of CSS transitions.
- TailwindEase 
- Utilities for controlling the aspect ratio of an element.
- TailwindElements 
- TailwindEnd 
- Utilities for controlling the placement of positioned elements.
- TailwindError 
- Error type for all tailwind operators
- TailwindFill Color 
- TailwindFlex 
- TailwindFlex Direction 
- TailwindFlex Wrap 
- TailwindFloat 
- Utilities for controlling the wrapping of content around an element.
- TailwindFont Family 
- Utilities for controlling the font family of an element.
- TailwindFont Size 
- Utilities for controlling the font size of an element.
- TailwindFont Smoothing 
- Utilities for controlling the font smoothing of an element.
- TailwindFont Style 
- Utilities for controlling the font smoothing of an element.
- TailwindFont Variant Numeric 
- Utilities for controlling the font smoothing of an element.
- TailwindFont Weight 
- TailwindFrom 
- TailwindGap 
- TailwindGrayscale 
- Utilities for applying grayscale filters to an element.
- TailwindGrid 
- TailwindGrid Auto 
- TailwindGrid Columns 
- TailwindGrid Flow 
- TailwindGrid Rows 
- TailwindHueRotate 
- Utilities for applying hue-rotate filters to an element.
- TailwindIndent 
- Utilities for controlling the font smoothing of an element.
- TailwindInset 
- Utilities for controlling the placement of positioned elements.
- TailwindInstruction 
- v:v:-a-a-[A]
- TailwindInvert 
- Utilities for applying invert filters to an element.
- TailwindIsolation 
- Utilities for controlling whether an element should explicitly create a new stacking context.
- TailwindItems 
- TailwindJustify Content 
- Utilities for controlling how flex and grid items are positioned along a container’s main axis..
- TailwindJustify Items 
- Utilities for controlling how grid items are aligned along their inline axis..
- TailwindJustify Self 
- Utilities for controlling how an individual grid item is aligned along its inline axis.
- TailwindLeading 
- Utilities for controlling the line-height of an element, based on https://v3.tailwindcss.com/docs/line-height.
- TailwindLeft 
- Utilities for controlling the placement of positioned elements.
- TailwindList Position 
- Utilities for controlling the font smoothing of an element.
- TailwindList Style 
- Utilities for controlling the font smoothing of an element.
- TailwindMargin 
- TailwindMask Image 
- TailwindObject Fit 
- Utilities for controlling how a replaced element’s content should be resized.
- TailwindObject Position 
- Utilities for controlling how a replaced element’s content should be positioned within its container.
- TailwindOpacity 
- Utilities for controlling the opacity of an element.
- TailwindOrigin 
- TailwindOutline Color 
- TailwindOutline Offset 
- TailwindOutline Style 
- TailwindOutline Width 
- TailwindOverflow 
- Utilities for controlling how an element handles content that is too large for the container.
- TailwindOverscroll 
- Utilities for controlling how the browser behaves when reaching the boundary of a scrolling area.
- TailwindPadding 
- Utilities for controlling an element’s padding.
- TailwindPlace 
- TailwindPlace Content 
- TailwindPlace Items 
- TailwindPlace Self 
- TailwindPointer Events 
- TailwindPosition 
- Utilities for controlling how an element is positioned in the DOM.
- TailwindResize 
- TailwindRight 
- Utilities for controlling the placement of positioned elements.
- TailwindRing Color 
- TailwindRing Inset 
- TailwindRing Offset Color 
- TailwindRing Offset Width 
- TailwindRing Width 
- TailwindRotate 
- Utilities for rotating elements with transform.
- TailwindRounded 
- TailwindRow 
- TailwindSaturate 
- Utilities for applying saturation filters to an element.
- TailwindScale 
- Utilities for scaling elements with transform.
- TailwindScreen Reader 
- Utilities for improving accessibility with screen readers.
- TailwindScroll Behavior 
- TailwindScroll Margin 
- TailwindScroll Padding 
- TailwindSelect 
- TailwindSelf 
- Utilities for controlling how an individual flex or grid item is positioned along its container’s cross axis.
- TailwindSepia 
- Utilities for applying sepia filters to an element.
- TailwindShadow 
- https://tailwindcss.com/docs/box-shadow
- TailwindShadow Color 
- Utilities for controlling the color of a box shadow.
- TailwindSizing 
- |width
- TailwindSkew 
- Utilities for skewing elements with transform.
- TailwindSnap Align 
- TailwindSnap Stop 
- TailwindSnap Type 
- TailwindSpace 
- TailwindSpace Reverse 
- TailwindStart 
- Utilities for controlling the placement of positioned elements.
- TailwindStroke 
- TailwindStroke Color 
- TailwindStroke Width 
- TailwindTable Layout 
- Utilities for controlling the table layout algorithm.
- TailwindText Alignment 
- TailwindText Color 
- TailwindText Overflow 
- Utilities for controlling the font smoothing of an element.
- TailwindText Transform 
- TailwindTo 
- TailwindTop 
- Utilities for controlling the placement of positioned elements.
- TailwindTorch 
- TailwindTracking 
- Utilities for controlling the tracking (letter spacing) of an element.
- TailwindTransition 
- Utilities for controlling which CSS properties transition.
- TailwindTranslate 
- Utilities for translating elements with transform.
- TailwindUnderline Offset 
- Utilities for controlling the font smoothing of an element.
- TailwindVariant 
- TailwindVariant Marker 
- Variant Markers
- TailwindVia 
- TailwindVisibility 
- Utilities for controlling the visibility of an element.
- TailwindWhite Space 
- Utilities for controlling the font smoothing of an element.
- TailwindWill Change 
- TailwindZIndex 
- Utilities for controlling the stack order of an element.
Enums§
- AnchorPoint 
- Anchor points are used to position elements relative to the viewport.
- AxisXY
- CssInlineMode 
- KeywordClass Format 
- Describes an instruction for the write_classfunction on how to format a CSS classname.
- LengthUnit 
- NumericValue 
- Used to represent those attributes that only have integers
- StandardValue 
- Used to represent CSS properties that have keyword values.
- TailwindColor 
- Represents a Tailwind color, which can be a themed color, a keyword, or an arbitrary value.
- TailwindError Kind 
- Actual error data for the error
- TailwindVariant Kind 
- https://github.com/tw-in-js/twind/blob/main/src/twind/variants.ts
- UnitValue 
Constants§
Traits§
- Base62
- Encodes a u64 hash to base-62 string.
- TailwindInstance 
Functions§
Type Aliases§
- Result
- All result about tailwind