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");
    // 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
syntax_error

Structs

BreakPoint
BreakPointSystem
CssAttribute
CssBundle
CssInstance
FontSize
FontSystem
Palette

In general, it is a look-up table.

PaletteSystem
PreflightSystem

https://tailwindcss.com/docs/preflight

SpacingAxis
TailWindGrow
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 how a background image behaves when scrolling.

TailwindBackgroundColor
TailwindBackgroundImage
TailwindBackgroundOrigin
TailwindBackgroundPosition
TailwindBackgroundRepeat
TailwindBackgroundSize
TailwindBasis
TailwindBlend
TailwindBlur

Utilities for applying brightness filters to an element.

TailwindBorder
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
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 an element.

TailwindBreakBefore

Utilities for controlling how a column or page should break an element.

TailwindBreakInside

Utilities for controlling how a column or page should break 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

Utilities for applying brightness filters to an element.

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
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
TailwindGrid
TailwindGridAuto
TailwindGridColumns
TailwindGridFlow
TailwindGridRows
TailwindHueRotate
TailwindIndent

Utilities for controlling the font smoothing of an element.

TailwindInset
TailwindInstruction

v:v:-a-a-[A]

TailwindInvert
TailwindIsolation
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
TailwindList
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 the stack order of an element.

TailwindObjectPosition

Utilities for controlling the stack order of an element.

TailwindOpacity
TailwindOrigin
TailwindOutline
TailwindOutlineOffset
TailwindOutlineStyle
TailwindOutlineWidth
TailwindOverflow
TailwindOverscroll
TailwindPadding
TailwindPlace
TailwindPlaceContent
TailwindPlaceItems
TailwindPlaceSelf
TailwindPointerEvents
TailwindPosition

Utilities for controlling how an element is positioned in the DOM.

TailwindResize
TailwindRight
TailwindRing
TailwindRingColor
TailwindRingInset
TailwindRingOffsetColor
TailwindRingOffsetWidth
TailwindRingWidth
TailwindRotate

Utilities for rotating elements with transform.

TailwindRounded
TailwindRow
TailwindSaturate
TailwindScale

Utilities for scaling elements with transform.

TailwindScreenReader

Utilities for improving accessibility with screen readers.

TailwindScroll
TailwindScrollMargin
TailwindScrollPadding
TailwindSelect
TailwindSelf
TailwindSepia
TailwindShadow

https://tailwindcss.com/docs/box-shadow

TailwindShadowColor

https://tailwindcss.com/docs/box-shadow

TailwindSizing

|width

TailwindSkew

Utilities for skewing elements with transform.

TailwindSnap
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
TailwindTorch
TailwindTracking

Utilities for controlling the font smoothing 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
TailwindWhiteSpace

Utilities for controlling the font smoothing of an element.

TailwindWillChange
TailwindZIndex

Utilities for controlling the stack order of an element.

Enums

AnchorPoint
CssBehavior

The CssBehavior property is specified as one of the CSS global keyword values.

InlineMode
KeywordOnly

Used to represent those attributes that only have keywords

LengthUnit
TailwindColor
TailwindErrorKind

Actual error data for the error

TailwindVariantKind

https://github.com/tw-in-js/twind/blob/main/src/twind/variants.ts

Traits

TailwindInstance

Functions

font_adaptor
text_adaptor

Type Definitions

Result

All result about tailwind