logo

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.

Macros

attributes_ensure
css_attributes
Define a css record with a map-like syntax
syntax_error

Structs

BreakPoint
BreakPointSystem
CssAttributes
A css property is used to remove duplicates.
EffectSystem
FontSize
FontSystem
ImportantMap
The css-global-attribute system.
ImportantSet
The css-global-attribute system.
Negative
Palette
In general, it is a look-up table.
PaletteSystem
PreflightSystem
https://tailwindcss.com/docs/preflight
SpacingAxis
TailWindGrow
Utilities for controlling how flex items grow.
TailWindOrder
TailWindShrink
TailwindAccentColor
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.
TailwindBackgroundAttachment
Utilities for controlling how a background image behaves when scrolling.
TailwindBackgroundBlend
TailwindBackgroundClip
Utilities for controlling the bounding box of an element’s background.
TailwindBackgroundColor
TailwindBackgroundImage
TailwindBackgroundOrigin
Utilities for controlling how an element’s background is positioned relative to borders, padding, and content.
TailwindBackgroundPosition
TailwindBackgroundRepeat
Utilities for controlling the repetition of an element’s background image.
TailwindBackgroundSize
Utilities for controlling the background size of an element’s background image.
TailwindBasis
TailwindBlend
TailwindBlur
Utilities for applying blur filters to an element.
TailwindBorderCollapse
Utilities for controlling whether table borders should collapse or be separated.
TailwindBorderColor
TailwindBorderStyle
https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-style
TailwindBorderWidth
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.
TailwindBreakAfter
Utilities for controlling how a column or page should break after an element.
TailwindBreakBefore
Utilities for controlling how a column or page should break before an element.
TailwindBreakInside
Utilities for controlling how a column or page should break within an element.
TailwindBrightness
Utilities for applying brightness filters to an element.
TailwindBuilder
TailwindCaretColor
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
TailwindContentAlign
TailwindContrast
https://tailwindcss.com/docs/contrast
TailwindCursor
TailwindDecoration
TailwindDecorationColor
Utilities for controlling the font smoothing of an element.
TailwindDecorationLine
Utilities for controlling the font smoothing of an element.
TailwindDecorationStyle
Utilities for controlling the style of text decorations.
TailwindDecorationThickness
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
TailwindDivideColor
TailwindDivideReverse
TailwindDivideStyle
TailwindDivideWidth
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
TailwindError
Error type for all tailwind operators
TailwindFillColor
TailwindFlex
TailwindFlexDirection
TailwindFlexWrap
TailwindFloat
Utilities for controlling the wrapping of content around an element.
TailwindFontFamily
Utilities for controlling the font family of an element.
TailwindFontSize
Utilities for controlling the font size of an element.
TailwindFontSmoothing
Utilities for controlling the font smoothing of an element.
TailwindFontStyle
Utilities for controlling the font smoothing of an element.
TailwindFontVariantNumeric
Utilities for controlling the font smoothing of an element.
TailwindFontWeight
TailwindFrom
TailwindGap
TailwindGrayscale
Utilities for applying grayscale filters to an element.
TailwindGrid
TailwindGridAuto
TailwindGridColumns
TailwindGridFlow
TailwindGridRows
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
TailwindJustifyContent
Utilities for controlling how flex and grid items are positioned along a container’s main axis..
TailwindJustifyItems
Utilities for controlling how grid items are aligned along their inline axis..
TailwindJustifySelf
Utilities for controlling how an individual grid item is aligned along its inline axis.
TailwindLeading
Utilities for controlling the font smoothing of an element.
TailwindLeft
Utilities for controlling the placement of positioned elements.
TailwindListPosition
Utilities for controlling the font smoothing of an element.
TailwindListStyle
Utilities for controlling the font smoothing of an element.
TailwindMargin
TailwindObjectFit
Utilities for controlling how a replaced element’s content should be resized.
TailwindObjectPosition
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
TailwindOutlineColor
TailwindOutlineOffset
TailwindOutlineStyle
TailwindOutlineWidth
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
TailwindPlaceContent
TailwindPlaceItems
TailwindPlaceSelf
TailwindPointerEvents
TailwindPosition
Utilities for controlling how an element is positioned in the DOM.
TailwindResize
TailwindRight
Utilities for controlling the placement of positioned elements.
TailwindRing
TailwindRingColor
TailwindRingInset
TailwindRingOffsetColor
TailwindRingOffsetWidth
TailwindRingWidth
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.
TailwindScreenReader
Utilities for improving accessibility with screen readers.
TailwindScrollBehavior
TailwindScrollMargin
TailwindScrollPadding
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
TailwindShadowColor
Utilities for controlling the color of a box shadow.
TailwindSizing
|width
TailwindSkew
Utilities for skewing elements with transform.
TailwindSnapAlign
TailwindSnapStop
TailwindSnapType
TailwindSpace
TailwindSpaceReverse
TailwindStroke
TailwindStrokeColor
TailwindStrokeWidth
TailwindTableLayout
Utilities for controlling the table layout algorithm.
TailwindTextAlignment
TailwindTextColor
TailwindTextOverflow
Utilities for controlling the font smoothing of an element.
TailwindTextTransform
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.
TailwindUnderlineOffset
Utilities for controlling the font smoothing of an element.
TailwindVariant
TailwindVia
TailwindVisibility
Utilities for controlling the visibility of an element.
TailwindWhiteSpace
Utilities for controlling the font smoothing of an element.
TailwindWillChange
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
LengthUnit
NumericValue
Used to represent those attributes that only have integers
StandardValue
Used to represent those attributes that only have keywords
TailwindColor
TailwindErrorKind
Actual error data for the error
TailwindVariantKind
https://github.com/tw-in-js/twind/blob/main/src/twind/variants.ts
UnitValue

Constants

BASE62

Traits

Base62
Encodes a u64 hash to base-62 string.
TailwindInstance

Functions

font_adaptor
text_adaptor

Type Definitions

Result
All result about tailwind