tailwind-rs 0.2.0

Tailwind translater for html and more
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <link rel="icon" href="https://upload.wikimedia.org/wikipedia/commons/d/d5/Tailwind_CSS_Logo.svg"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Flexbox tests</title>
</head>
<body>
<!-- https://tailwindcss.com/docs/flex-basis -->
<div class="basis-0"></div>
<div class="basis-2.5"></div>
<div class="basis-0/12"></div>
<div class="basis-6/12"></div>
<div class="basis-12/12"></div>
<div class="basis-full"></div>
<div class="basis-auto"></div>
<div class="basis-min"></div>
<div class="basis-max"></div>
<div class="basis-fit"></div>
<div class="basis-fit-content"></div>
<div class="basis-px"></div>
<div class="basis-unset"></div>
<div class="basis-[unset]"></div>
<div class="basis-[calc(20% - 30px)]"></div>
<!-- https://tailwindcss.com/docs/flex-direction -->
<div class="flex-col"></div>
<div class="flex-col-reverse"></div>
<div class="flex-row"></div>
<div class="flex-row-reverse"></div>
<div class="flex-direction-row-reverse"></div>
<div class="flex-direction-unset"></div>
<div class="flex-direction-[unset]"></div>
<!-- https://tailwindcss.com/docs/flex-wrap -->
<div class="flex-wrap"></div>
<div class="flex-wrap-reverse"></div>
<div class="flex-wrap-wrap-reverse"></div>
<div class="flex-nowrap"></div>
<div class="flex-wrap-none"></div>
<div class="flex-wrap-unset"></div>
<div class="flex-wrap-[unset]"></div>
<!-- https://tailwindcss.com/docs/flex -->
<div class="flex-0"></div>
<div class="-flex-0"></div>
<div class="flex-1"></div>
<div class="-flex-1"></div>
<div class="flex-auto"></div>
<div class="flex-initial"></div>
<div class="flex-none"></div>
<div class="flex-[10 30px]"></div>
<div class="flex-[2 2 10%]"></div>
<!-- https://tailwindcss.com/docs/flex-grow -->
<div class="grow"></div>
<div class="grow-0"></div>
<div class="-grow-0"></div>
<div class="-grow-1"></div>
<div class="grow-1"></div>
<div class="grow-unset"></div>
<div class="grow-[unset]"></div>
<!-- https://tailwindcss.com/docs/flex-shrink -->
<div class="shrink"></div>
<div class="shrink-0"></div>
<div class="-shrink-0"></div>
<div class="-shrink-1"></div>
<div class="shrink-1"></div>
<div class="shrink-unset"></div>
<div class="shrink-[unset]"></div>
<!-- https://tailwindcss.com/docs/order -->
<div class="order-none"></div>
<div class="order-0"></div>
<div class="-order-0"></div>
<div class="order-1"></div>
<div class="-order-1"></div>
<div class="order-first"></div>
<div class="order-last"></div>
<div class="order-unset"></div>
<div class="order-[unset]"></div>
<!-- https://tailwindcss.com/docs/grid-template-columns -->
<div class="grid-cols-1"></div>
<div class="grid-cols-0"></div>
<div class="grid-cols-none"></div>
<div class="grid-cols-unset"></div>
<div class="grid-cols-[unset]"></div>
<!-- https://tailwindcss.com/docs/grid-column -->
<div class="col-auto"></div>
<!-- https://tailwindcss.com/docs/grid-template-rows -->
<div class="grid-rows-1"></div>
<!-- https://tailwindcss.com/docs/grid-row -->
<div class="row-auto"></div>
<!-- https://tailwindcss.com/docs/grid-auto-flow -->
<div class="grid-flow-row"></div>
<div class="grid-flow-col"></div>
<div class="grid-flow-row-dense"></div>
<div class="grid-flow-col-dense"></div>
<!-- https://tailwindcss.com/docs/grid-auto-columns -->
<div class="auto-cols-auto"></div>
<div class="auto-cols-min"></div>
<div class="auto-cols-max"></div>
<div class="auto-cols-fr"></div>
<!-- https://tailwindcss.com/docs/grid-auto-rows -->
<div class="auto-rows-auto"></div>
<div class="auto-rows-min"></div>
<div class="auto-rows-max"></div>
<div class="auto-rows-fr"></div>
<!-- https://tailwindcss.com/docs/gap -->
<div class="gap-0"></div>
<div class="gap-x-0"></div>
<div class="gap-y-0"></div>
<!-- https://tailwindcss.com/docs/justify-content -->
<div class="justify-start"></div>
<!-- https://tailwindcss.com/docs/justify-items -->
<div class="justify-items-start"></div>
<!-- https://tailwindcss.com/docs/justify-self -->
<div class="justify-self-start"></div>
<!-- https://tailwindcss.com/docs/align-content -->
<div class="content-start"></div>
<!-- https://tailwindcss.com/docs/align-items -->
<div class="self-start"></div>
<!-- https://tailwindcss.com/docs/place-content -->
<div class="place-content-start"></div>
<!-- https://tailwindcss.com/docs/place-items -->
<div class="place-items-start"></div>
<!-- https://tailwindcss.com/docs/place-self -->
<div class="place-self-start"></div>
</body>
</html>