Crate tailwind_css
source ·Expand description
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
- 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
- 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
- Define a css record with a map-like syntax
Structs
- A css property is used to remove duplicates.
- The
css-global-attributesystem. - The
css-global-attributesystem. - In general, it is a look-up table.
- Utilities for controlling how flex items grow.
- Utilities for controlling the font smoothing of an element.
- Utilities for rotating elements with transform.
- Utilities for controlling the aspect ratio of an element.
- Utilities for controlling how a background image behaves when scrolling.
- Utilities for controlling the bounding box of an element’s background.
- Utilities for controlling how an element’s background is positioned relative to borders, padding, and content.
- Utilities for controlling the repetition of an element’s background image.
- Utilities for controlling the background size of an element’s background image.
- Utilities for applying blur filters to an element.
- Utilities for controlling whether table borders should collapse or be separated.
- https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-style
- Utilities for controlling the placement of positioned elements.
- Utilities for controlling how element fragments should be rendered across multiple lines, columns, or pages.
- Utilities for controlling how the browser should calculate an element’s total size.
- Utilities for controlling the font smoothing of an element.
- Utilities for controlling how a column or page should break after an element.
- Utilities for controlling how a column or page should break before an element.
- Utilities for controlling how a column or page should break within an element.
- Utilities for applying brightness filters to an element.
- Utilities for controlling the wrapping of content around an element.
- Utilities for controlling the number of columns within an element.
- A component for fixing an element’s width to the current breakpoint.
- https://tailwindcss.com/docs/contrast
- Utilities for controlling the font smoothing of an element.
- Utilities for controlling the font smoothing of an element.
- Utilities for controlling the style of text decorations.
- Utilities for controlling the font smoothing of an element.
- Utilities for controlling the delay of CSS transitions.
- Utilities for controlling how the browser should calculate an element’s total size.
- Utilities for controlling the border width between elements.
- Utilities for controlling the duration of CSS transitions.
- Utilities for controlling the aspect ratio of an element.
- Error type for all tailwind operators
- Utilities for controlling the wrapping of content around an element.
- Utilities for controlling the font family of an element.
- Utilities for controlling the font size of an element.
- Utilities for controlling the font smoothing of an element.
- Utilities for controlling the font smoothing of an element.
- Utilities for controlling the font smoothing of an element.
- Utilities for applying grayscale filters to an element.
- Utilities for applying hue-rotate filters to an element.
- Utilities for controlling the font smoothing of an element.
- Utilities for controlling the placement of positioned elements.
v:v:-a-a-[A]- Utilities for applying invert filters to an element.
- Utilities for controlling whether an element should explicitly create a new stacking context.
- Utilities for controlling how flex and grid items are positioned along a container’s main axis..
- Utilities for controlling how grid items are aligned along their inline axis..
- Utilities for controlling how an individual grid item is aligned along its inline axis.
- Utilities for controlling the font smoothing of an element.
- Utilities for controlling the placement of positioned elements.
- Utilities for controlling the font smoothing of an element.
- Utilities for controlling the font smoothing of an element.
- Utilities for controlling how a replaced element’s content should be resized.
- Utilities for controlling how a replaced element’s content should be positioned within its container.
- Utilities for controlling the opacity of an element.
- Utilities for controlling how an element handles content that is too large for the container.
- Utilities for controlling how the browser behaves when reaching the boundary of a scrolling area.
- Utilities for controlling an element’s padding.
- Utilities for controlling how an element is positioned in the DOM.
- Utilities for controlling the placement of positioned elements.
- Utilities for rotating elements with transform.
- Utilities for applying saturation filters to an element.
- Utilities for scaling elements with transform.
- Utilities for improving accessibility with screen readers.
- Utilities for controlling how an individual flex or grid item is positioned along its container’s cross axis.
- Utilities for applying sepia filters to an element.
- https://tailwindcss.com/docs/box-shadow
- Utilities for controlling the color of a box shadow.
|width- Utilities for skewing elements with transform.
- Utilities for controlling the table layout algorithm.
- Utilities for controlling the font smoothing of an element.
- Utilities for controlling the placement of positioned elements.
- Utilities for controlling the tracking (letter spacing) of an element.
- Utilities for controlling which CSS properties transition.
- Utilities for translating elements with transform.
- Utilities for controlling the font smoothing of an element.
- Utilities for controlling the visibility of an element.
- Utilities for controlling the font smoothing of an element.
- Utilities for controlling the stack order of an element.
Enums
- Anchor points are used to position elements relative to the viewport.
- Used to represent those attributes that only have integers
- Used to represent those attributes that only have keywords
- Actual error data for the error
Constants
Traits
- Encodes a u64 hash to base-62 string.
Functions
Type Aliases
- All result about tailwind