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
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.
|
widthUtilities 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 Definitions
All result about tailwind