Crate tailwind_css
source · [−]Expand description
Tailwind to Css
Tailwind style tracer, JIT + AOT compiler!
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 {}
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: [``]
- columns: [``]
-
break-after: [
TailwindBreak::After] -
break-before: [
TailwindBreak::Before] -
break-inside: [
TailwindBreak::Inside] - box-decoration-break
- box-sizing
- display
- float
- clear
- isolation
- object-fit
- object-position
- overflow
- overscroll-behavior
- position
- top-right-bottom-left
- visibility
- z-index
-
aspect-ratio:
- Flexbox & Grid
- Spacing
- Sizing
-
width: [
TailwindWidth] -
min-width: [
TailwindWidth] -
max-width: [
TailwindWidth] -
height: [
TailwindHeight] -
min-height: [
TailwindHeight] -
max-height: [
TailwindHeight]
-
width: [
- Typography
- Backgrounds
- Borders
- Effects
-
box-shadow: [
ShadowSystem] -
box-shadow-color: [
ShadowSystem] -
opacity:
TailwindOpacity -
mix-blend-mode: [
TailwindBlender] -
background-blend-mode: [
TailwindBlender]
-
box-shadow: [
- Filters
- Tables
- Transitions & Animation
- Transforms
Macros
Structs
In general, it is a look-up table.
https://tailwindcss.com/docs/preflight
Utilities for controlling the stack order of an element.
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 how a background image behaves when scrolling.
Utilities for applying brightness filters to an element.
Utilities for controlling whether table borders should collapse or be separated.
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 how a column or page should break an element.
Utilities for controlling how a column or page should break an element.
Utilities for controlling how a column or page should break 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.
Utilities for applying brightness filters to an element.
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 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 smoothing of an element.
Utilities for controlling the font smoothing of an element.
Utilities for controlling the font smoothing of an element.
v:v:-a-a-[A]
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 font smoothing of an element.
Utilities for controlling the font smoothing of an element.
Uncategorized tailwind property
Utilities for controlling the stack order of an element.
Utilities for controlling the stack order of an element.
Utilities for controlling how an element is positioned in the DOM.
Utilities for rotating elements with transform.
Utilities for scaling elements with transform.
Utilities for improving accessibility with screen readers.
https://tailwindcss.com/docs/box-shadow
https://tailwindcss.com/docs/box-shadow
|width
Utilities for skewing elements with transform.
Utilities for controlling an element’s padding.
Utilities for controlling the table layout algorithm.
Utilities for controlling the font smoothing of an element.
Utilities for controlling the font smoothing 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.
https://tailwindcss.com/docs/visibility
Enums
The CssBehavior property is specified as one of the CSS global keyword values.
Utilities for controlling the font smoothing of an element.
Actual error data for the error
Utilities for controlling the font smoothing of an element.
https://github.com/tw-in-js/twind/blob/main/src/twind/variants.ts
Utilities for controlling the font smoothing of an element.