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§
- Break
Point - Break
Point System - CssAttributes
- A css property is used to remove duplicates.
- Effect
System - Font
Size - Font
System - Important
Map - The
css-global-attributesystem. - Important
Set - The
css-global-attributesystem. - Negative
- Palette
- In general, it is a look-up table.
- Palette
System - Preflight
System - Tailwind CSS Preflight v4 Style System https://tailwindcss.com/docs/preflight https://github.com/tailwindlabs/tailwindcss/blob/88b9f15b65588a87c5b6b13316530b4aecbc1b0b/packages/tailwindcss/preflight.css
- Spacing
Axis - Tail
Wind Grow - Utilities for controlling how flex items grow.
- Tail
Wind Order - Tail
Wind Shrink - Tailwind
Accent Color - Tailwind
Align - Utilities for controlling the font smoothing of an element.
- Tailwind
Animate - Utilities for rotating elements with transform.
- Tailwind
Appearance - Tailwind
Arbitrary - Tailwind
Aspect - Utilities for controlling the aspect ratio of an element.
- Tailwind
Background Attachment - Utilities for controlling how a background image behaves when scrolling.
- Tailwind
Background Blend - Tailwind
Background Clip - Utilities for controlling the bounding box of an element’s background.
- Tailwind
Background Color - Tailwind
Background Image - Tailwind
Background Origin - Utilities for controlling how an element’s background is positioned relative to borders, padding, and content.
- Tailwind
Background Position - Tailwind
Background Repeat - Utilities for controlling the repetition of an element’s background image.
- Tailwind
Background Size - Utilities for controlling the background size of an element’s background image.
- Tailwind
Basis - Tailwind
Blend - Tailwind
Blur - Utilities for applying blur filters to an element.
- Tailwind
Border Collapse - Utilities for controlling whether table borders should collapse or be separated.
- Tailwind
Border Color - Tailwind
Border Style - https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-style
- Tailwind
Border Width - Tailwind
Bottom - Utilities for controlling the placement of positioned elements.
- Tailwind
BoxDecoration - Utilities for controlling how element fragments should be rendered across multiple lines, columns, or pages.
- Tailwind
BoxSizing - Utilities for controlling how the browser should calculate an element’s total size.
- Tailwind
Break - Utilities for controlling the font smoothing of an element.
- Tailwind
Break After - Utilities for controlling how a column or page should break after an element.
- Tailwind
Break Before - Utilities for controlling how a column or page should break before an element.
- Tailwind
Break Inside - Utilities for controlling how a column or page should break within an element.
- Tailwind
Brightness - Utilities for applying brightness filters to an element.
- Tailwind
Builder - Tailwind
Caret Color - Tailwind
Clear - Utilities for controlling the wrapping of content around an element.
- Tailwind
Column - Tailwind
Columns - Utilities for controlling the number of columns within an element.
- Tailwind
Container - A component for fixing an element’s width to the current breakpoint.
- Tailwind
Content - Tailwind
Content Align - Tailwind
Contrast - https://tailwindcss.com/docs/contrast
- Tailwind
Cursor - Tailwind
Decoration - Tailwind
Decoration Color - Utilities for controlling the font smoothing of an element.
- Tailwind
Decoration Line - Utilities for controlling the font smoothing of an element.
- Tailwind
Decoration Style - Utilities for controlling the style of text decorations.
- Tailwind
Decoration Thickness - Utilities for controlling the font smoothing of an element.
- Tailwind
Delay - Utilities for controlling the delay of CSS transitions.
- Tailwind
Display - Utilities for controlling how the browser should calculate an element’s total size.
- Tailwind
Divide - Tailwind
Divide Color - Tailwind
Divide Reverse - Tailwind
Divide Style - Tailwind
Divide Width - Utilities for controlling the border width between elements.
- Tailwind
Duration - Utilities for controlling the duration of CSS transitions.
- Tailwind
Ease - Utilities for controlling the aspect ratio of an element.
- Tailwind
Elements - Tailwind
End - Utilities for controlling the placement of positioned elements.
- Tailwind
Error - Error type for all tailwind operators
- Tailwind
Fill Color - Tailwind
Flex - Tailwind
Flex Direction - Tailwind
Flex Wrap - Tailwind
Float - Utilities for controlling the wrapping of content around an element.
- Tailwind
Font Family - Utilities for controlling the font family of an element.
- Tailwind
Font Size - Utilities for controlling the font size of an element.
- Tailwind
Font Smoothing - Utilities for controlling the font smoothing of an element.
- Tailwind
Font Style - Utilities for controlling the font smoothing of an element.
- Tailwind
Font Variant Numeric - Utilities for controlling the font smoothing of an element.
- Tailwind
Font Weight - Tailwind
From - Tailwind
Gap - Tailwind
Grayscale - Utilities for applying grayscale filters to an element.
- Tailwind
Grid - Tailwind
Grid Auto - Tailwind
Grid Columns - Tailwind
Grid Flow - Tailwind
Grid Rows - Tailwind
HueRotate - Utilities for applying hue-rotate filters to an element.
- Tailwind
Indent - Utilities for controlling the font smoothing of an element.
- Tailwind
Inset - Utilities for controlling the placement of positioned elements.
- Tailwind
Instruction v:v:-a-a-[A]- Tailwind
Invert - Utilities for applying invert filters to an element.
- Tailwind
Isolation - Utilities for controlling whether an element should explicitly create a new stacking context.
- Tailwind
Items - Tailwind
Justify Content - Utilities for controlling how flex and grid items are positioned along a container’s main axis..
- Tailwind
Justify Items - Utilities for controlling how grid items are aligned along their inline axis..
- Tailwind
Justify Self - Utilities for controlling how an individual grid item is aligned along its inline axis.
- Tailwind
Leading - Utilities for controlling the line-height of an element, based on https://v3.tailwindcss.com/docs/line-height.
- Tailwind
Left - Utilities for controlling the placement of positioned elements.
- Tailwind
List Position - Utilities for controlling the font smoothing of an element.
- Tailwind
List Style - Utilities for controlling the font smoothing of an element.
- Tailwind
Margin - Tailwind
Object Fit - Utilities for controlling how a replaced element’s content should be resized.
- Tailwind
Object Position - Utilities for controlling how a replaced element’s content should be positioned within its container.
- Tailwind
Opacity - Utilities for controlling the opacity of an element.
- Tailwind
Origin - Tailwind
Outline Color - Tailwind
Outline Offset - Tailwind
Outline Style - Tailwind
Outline Width - Tailwind
Overflow - Utilities for controlling how an element handles content that is too large for the container.
- Tailwind
Overscroll - Utilities for controlling how the browser behaves when reaching the boundary of a scrolling area.
- Tailwind
Padding - Utilities for controlling an element’s padding.
- Tailwind
Place - Tailwind
Place Content - Tailwind
Place Items - Tailwind
Place Self - Tailwind
Pointer Events - Tailwind
Position - Utilities for controlling how an element is positioned in the DOM.
- Tailwind
Resize - Tailwind
Right - Utilities for controlling the placement of positioned elements.
- Tailwind
Ring Color - Tailwind
Ring Inset - Tailwind
Ring Offset Color - Tailwind
Ring Offset Width - Tailwind
Ring Width - Tailwind
Rotate - Utilities for rotating elements with transform.
- Tailwind
Rounded - Tailwind
Row - Tailwind
Saturate - Utilities for applying saturation filters to an element.
- Tailwind
Scale - Utilities for scaling elements with transform.
- Tailwind
Screen Reader - Utilities for improving accessibility with screen readers.
- Tailwind
Scroll Behavior - Tailwind
Scroll Margin - Tailwind
Scroll Padding - Tailwind
Select - Tailwind
Self - Utilities for controlling how an individual flex or grid item is positioned along its container’s cross axis.
- Tailwind
Sepia - Utilities for applying sepia filters to an element.
- Tailwind
Shadow - https://tailwindcss.com/docs/box-shadow
- Tailwind
Shadow Color - Utilities for controlling the color of a box shadow.
- Tailwind
Sizing |width- Tailwind
Skew - Utilities for skewing elements with transform.
- Tailwind
Snap Align - Tailwind
Snap Stop - Tailwind
Snap Type - Tailwind
Space - Tailwind
Space Reverse - Tailwind
Start - Utilities for controlling the placement of positioned elements.
- Tailwind
Stroke - Tailwind
Stroke Color - Tailwind
Stroke Width - Tailwind
Table Layout - Utilities for controlling the table layout algorithm.
- Tailwind
Text Alignment - Tailwind
Text Color - Tailwind
Text Overflow - Utilities for controlling the font smoothing of an element.
- Tailwind
Text Transform - Tailwind
To - Tailwind
Top - Utilities for controlling the placement of positioned elements.
- Tailwind
Torch - Tailwind
Tracking - Utilities for controlling the tracking (letter spacing) of an element.
- Tailwind
Transition - Utilities for controlling which CSS properties transition.
- Tailwind
Translate - Utilities for translating elements with transform.
- Tailwind
Underline Offset - Utilities for controlling the font smoothing of an element.
- Tailwind
Variant - Tailwind
Variant Marker - Variant Markers
- Tailwind
Via - Tailwind
Visibility - Utilities for controlling the visibility of an element.
- Tailwind
White Space - Utilities for controlling the font smoothing of an element.
- Tailwind
Will Change - TailwindZ
Index - Utilities for controlling the stack order of an element.
Enums§
- Anchor
Point - Anchor points are used to position elements relative to the viewport.
- AxisXY
- CssInline
Mode - Keyword
Class Format - Describes an instruction for the
write_classfunction on how to format a CSS classname. - Length
Unit - Numeric
Value - Used to represent those attributes that only have integers
- Standard
Value - Used to represent CSS properties that have keyword values.
- Tailwind
Color - Represents a Tailwind color, which can be a themed color, a keyword, or an arbitrary value.
- Tailwind
Error Kind - Actual error data for the error
- Tailwind
Variant Kind - https://github.com/tw-in-js/twind/blob/main/src/twind/variants.ts
- Unit
Value
Constants§
Traits§
- Base62
- Encodes a u64 hash to base-62 string.
- Tailwind
Instance
Functions§
Type Aliases§
- Result
- All result about tailwind