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-attribute
system. - The
css-global-attribute
system. - 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