Crate tailwind_css_fixes

Expand description

this is a fork of taikwindrs

link to original repo: https://github.com/oovm/tailwind-rs

the original author can no longer access crates, and encouraged forking: link for more info

§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
- preflight: PreflightSystem
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
Flexbox & Grid
Spacing
Sizing
- width: TailwindSizing
  - [] currently unsupported: keywords for width, like xs
  - [] currently unsupported: max-h-none
- min-width: TailwindSizing
- max-width: TailwindSizing
- height: TailwindSizing
- min-height: TailwindSizing
- max-height: TailwindSizing
Typography

- [x] [font-family](https://tailwindcss.com/docs/font-family): [`TailwindFontFamily`] - [x] [font-size](https://tailwindcss.com/docs/font-size): [`TailwindFontSize`] - [x] [font-smoothing](https://tailwindcss.com/docs/font-smoothing): [`FontSmoothing`] - [x] [font-style](https://tailwindcss.com/docs/font-style): [`TailwindFontStyle`] - [x] [font-weight](https://tailwindcss.com/docs/font-weight): [`TailwindFontWeight`] - [x] [font-variant-numeric](https://tailwindcss.com/docs/font-variant-numeric): [`TailwindFontVariantNumeric`] - [x] [letter-spacing](https://tailwindcss.com/docs/letter-spacing): [`TailwindTracking`] - [x] [line-height](https://tailwindcss.com/docs/line-height): [`TailwindLeading`] - [x] [list-style-type](https://tailwindcss.com/docs/list-style-type): [`TailwindListStyle`] - [x] [list-style-position](https://tailwindcss.com/docs/list-style-position): [`TailwindListPosition`] - [x] [text-align](https://tailwindcss.com/docs/text-align): [`TailwindTextAlignment`] - [x] [text-color](https://tailwindcss.com/docs/text-color): [`TailwindTextColor`] - [x] [text-decoration](https://tailwindcss.com/docs/text-decoration): [`TailwindDecoration`] - [x] [text-decoration-color](https://tailwindcss.com/docs/text-decoration-color): [`TailwindDecorationColor`] - [x] [text-decoration-style](https://tailwindcss.com/docs/text-decoration-style): [`TailwindDecorationThickness`] - [x] [text-decoration-thickness](https://tailwindcss.com/docs/text-decoration-thickness): [`TailwindSizing`] - [x] [text-underline-offset](https://tailwindcss.com/docs/text-underline-offset): [`TailwindUnderlineOffset`] - [x] [text-transform](https://tailwindcss.com/docs/text-transform): [`TailwindTextTransform`] - [x] [text-overflow](https://tailwindcss.com/docs/text-overflow): [`TailwindOverflow`] - [x] [text-indent](https://tailwindcss.com/docs/text-indent): [`TailwindIndent`] - [x] [vertical-align](https://tailwindcss.com/docs/vertical-align): [`TailwindAlign`] - [x] [whitespace](https://tailwindcss.com/docs/whitespace): [`TailwindWhiteSpace`] - [x] [word-break](https://tailwindcss.com/docs/word-break): [`TailwindBreak`] - [x] [content](https://tailwindcss.com/docs/content): [`TailwindContent`]
Backgrounds
Borders
Effects
Filters
Tables
- border-collapse: TailwindBorderCollapse
- table-layout: TailwindTableLayout
Transitions & Animation
Transforms
Interactivity
SVG
Accessibility
- screen-readers: TailwindScreenReader

Macros§

attributes_ensure
css_attributes: Define a css declaration block 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: Tailwind CSS Preflight v4 Style System https://tailwindcss.com/docs/preflight https://github.com/tailwindlabs/tailwindcss/blob/88b9f15b65588a87c5b6b13316530b4aecbc1b0b/packages/tailwindcss/preflight.css
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
TailwindEnd: Utilities for controlling the placement of positioned elements.
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 line-height of an element, based on https://v3.tailwindcss.com/docs/line-height.
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
TailwindMaskImage
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.
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
TailwindStart: Utilities for controlling the placement of positioned elements.
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
TailwindVariantMarker: Variant Markers
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
KeywordClassFormat: Describes an instruction for the write_class function on how to format a CSS classname.
LengthUnit
NumericValue: Used to represent those attributes that only have integers
StandardValue: Used to represent CSS properties that have keyword values.
TailwindColor: Represents a Tailwind color, which can be a themed color, a keyword, or an arbitrary value.
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 Aliases§

Result: All result about tailwind