Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit bbef38b

Browse files
feat(snippets): ✨ add tailwind flexbox utilities (#27)
* feat(snippets): ✨ add tailwind flexbox utilities * chore(lerna): 🔧 add publish gitmoji closes #26 closes #28 
1 parent abe2a15 commit bbef38b

File tree

4 files changed

+370
-1
lines changed

4 files changed

+370
-1
lines changed

‎README.md

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,17 @@ You can enable tab completion (recommended) by opening
5656
- [Top / Right / Bottom / Left](#top--right--bottom--left)
5757
- [Visibility](#visibility)
5858
- [Z-Index](#z-index)
59+
- [Tailwind FlexBox](#tailwind-flexbox)
60+
- [Flex Direction](#flex-direction)
61+
- [Flex Wrap](#flex-wrap)
62+
- [Align Items](#align-items)
63+
- [Align Content](#align-content)
64+
- [Align Self](#align-self)
65+
- [Justify Content](#justify-content)
66+
- [Flex](#flex)
67+
- [Flex Grow](#flex-grow)
68+
- [Flex Shrink](#flex-shrink)
69+
- [Flex Order](#flex-order)
5970
- [1 line layouts](#1-line-layouts)
6071
- [Extra Guides](#extra-guides)
6172
- [Snippets generation from Selected line/lines](#snippets-generation-from-selected-linelines)
@@ -258,6 +269,108 @@ You can enable tab completion (recommended) by opening
258269
| `z-50` | z-index: 50; |
259270
| `z-auto` | z-index: auto; |
260271

272+
### [Tailwind](https://tailwindcss.com/) FlexBox
273+
274+
#### [Flex Direction](https://tailwindcss.com/docs/flex-direction)
275+
276+
| Snippet | Purpose |
277+
| ------------------ | ------------------------------- |
278+
| `flex-row` | flex-direction: row; |
279+
| `flex-row-reverse` | flex-direction: row-reverse; |
280+
| `flex-col` | flex-direction: column; |
281+
| `flex-col-reverse` | flex-direction: column-reverse; |
282+
283+
#### [Flex Wrap](https://tailwindcss.com/docs/flex-wrap)
284+
285+
| Snippet | Purpose |
286+
| ------------------- | ------------------------ |
287+
| `flex-no-wrap` | flex-wrap: nowrap; |
288+
| `flex-wrap` | flex-wrap: wrap; |
289+
| `flex-wrap-reverse` | flex-wrap: wrap-reverse; |
290+
291+
#### [Align Items](https://tailwindcss.com/docs/align-items)
292+
293+
| Snippet | Purpose |
294+
| ---------------- | ------------------------ |
295+
| `items-stretch` | align-items: stretch; |
296+
| `items-start` | align-items: flex-start; |
297+
| `items-center` | align-items: center; |
298+
| `items-end` | align-items: flex-end; |
299+
| `items-baseline` | align-items: baseline; |
300+
301+
#### [Align Content](https://tailwindcss.com/docs/align-content)
302+
303+
| Snippet | Purpose |
304+
| ----------------- | ----------------------------- |
305+
| `content-start` | align-content: flex-start; |
306+
| `content-center` | align-content: center; |
307+
| `content-end` | align-content: flex-end; |
308+
| `content-between` | align-content: space-between; |
309+
| `content-around` | align-content: space-around; |
310+
311+
#### [Align Self](https://tailwindcss.com/docs/align-self)
312+
313+
| Snippet | Purpose |
314+
| -------------- | ----------------------- |
315+
| `self-auto` | align-self: auto; |
316+
| `self-start` | align-self: flex-start; |
317+
| `self-center` | align-self: center; |
318+
| `self-end` | align-self: flex-end; |
319+
| `self-stretch` | align-self: stretch; |
320+
321+
#### [Justify Content](https://tailwindcss.com/docs/justify-content)
322+
323+
| Snippet | Purpose |
324+
| ----------------- | ------------------------------- |
325+
| `justify-start` | justify-content: flex-start; |
326+
| `justify-center` | justify-content: center; |
327+
| `justify-end` | justify-content: flex-end; |
328+
| `justify-between` | justify-content: space-between; |
329+
| `justify-around` | justify-content: space-around; |
330+
331+
#### [Flex](https://tailwindcss.com/docs/flex)
332+
333+
| Snippet | Purpose |
334+
| -------------- | --------------- |
335+
| `flex-initial` | flex: 0 1 auto; |
336+
| `flex-1` | flex: 1 1 0%; |
337+
| `flex-auto` | flex: 1 1 auto; |
338+
| `flex-none` | flex: none; |
339+
340+
#### [Flex Grow](https://tailwindcss.com/docs/flex-grow)
341+
342+
| Snippet | Purpose |
343+
| ------------- | ------------- |
344+
| `flex-grow` | flex-grow: 1; |
345+
| `flex-grow-0` | flex-grow: 0; |
346+
347+
#### [Flex Shrink](https://tailwindcss.com/docs/flex-shrink)
348+
349+
| Snippet | Purpose |
350+
| --------------- | --------------- |
351+
| `flex-shrink` | flex-shrink: 1; |
352+
| `flex-shrink-0` | flex-shrink: 0; |
353+
354+
#### [Flex Order](https://tailwindcss.com/docs/order)
355+
356+
| Snippet | Purpose |
357+
| ------------- | ------------- |
358+
| `order-first` | order: -9999; |
359+
| `order-last` | order: 9999; |
360+
| `order-none` | order: 0; |
361+
| `order-1` | order: 1; |
362+
| `order-2` | order: 2; |
363+
| `order-3` | order: 3; |
364+
| `order-4` | order: 4; |
365+
| `order-5` | order: 5; |
366+
| `order-6` | order: 6; |
367+
| `order-7` | order: 7; |
368+
| `order-8` | order: 8; |
369+
| `order-9` | order: 9; |
370+
| `order-10` | order: 10; |
371+
| `order-11` | order: 11; |
372+
| `order-12` | order: 12; |
373+
261374
### [1 line layouts](https://1linelayouts.glitch.me/)
262375

263376
**[Learn 1linelayouts in detail from Web Dev →](https://web.dev/one-line-layouts/)**

‎lerna.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
"registry": "https://registry.npmjs.org/",
77
"command": {
88
"version": {
9-
"message": "chore(release): publish %s",
9+
"message": "chore(release): 🚀 publish %s",
1010
"conventionalCommits": true
1111
}
1212
}

‎package.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,10 @@
4343
"language": "css",
4444
"path": "./snippets/tailwind/layout.json"
4545
},
46+
{
47+
"language": "css",
48+
"path": "./snippets/tailwind/flexbox.json"
49+
},
4650
{
4751
"language": "css",
4852
"path": "./snippets/1linelayouts/snippets.json"

‎snippets/tailwind/flexbox.json

Lines changed: 252 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,252 @@
1+
{
2+
"order-12": {
3+
"prefix": "order-12",
4+
"body": ["order: 12;", ""],
5+
"description": "order-12"
6+
},
7+
"order-11": {
8+
"prefix": "order-11",
9+
"body": ["order: 11;", ""],
10+
"description": "order-11"
11+
},
12+
"order-10": {
13+
"prefix": "order-10",
14+
"body": ["order: 10;", ""],
15+
"description": "order-10"
16+
},
17+
"order-9": {
18+
"prefix": "order-9",
19+
"body": ["order: 9;", ""],
20+
"description": "order-9"
21+
},
22+
"order-8": {
23+
"prefix": "order-8",
24+
"body": ["order: 8;", ""],
25+
"description": "order-8"
26+
},
27+
"order-7": {
28+
"prefix": "order-7",
29+
"body": ["order: 7;", ""],
30+
"description": "order-7"
31+
},
32+
"order-6": {
33+
"prefix": "order-6",
34+
"body": ["order: 6;", ""],
35+
"description": "order-6"
36+
},
37+
"order-5": {
38+
"prefix": "order-5",
39+
"body": ["order: 5;", ""],
40+
"description": "order-5"
41+
},
42+
"order-4": {
43+
"prefix": "order-4",
44+
"body": ["order: 4;", ""],
45+
"description": "order-4"
46+
},
47+
"order-3": {
48+
"prefix": "order-3",
49+
"body": ["order: 3;", ""],
50+
"description": "order-3"
51+
},
52+
"order-2": {
53+
"prefix": "order-2",
54+
"body": ["order: 2;", ""],
55+
"description": "order-2"
56+
},
57+
"order-1": {
58+
"prefix": "order-1",
59+
"body": ["order: 1;", ""],
60+
"description": "order-1"
61+
},
62+
"order-last": {
63+
"prefix": "order-last",
64+
"body": ["order: 9999;", ""],
65+
"description": "order-last"
66+
},
67+
"order-first": {
68+
"prefix": "order-first",
69+
"body": ["order: -9999;", ""],
70+
"description": "order-first"
71+
},
72+
"order-none": {
73+
"prefix": "order-none",
74+
"body": ["order: 0;", ""],
75+
"description": "order-none"
76+
},
77+
"flex-shrink-0": {
78+
"prefix": "flex-shrink-0",
79+
"body": ["flex-shrink: 0;", ""],
80+
"description": "flex-shrink-0"
81+
},
82+
"flex-shrink": {
83+
"prefix": "flex-shrink",
84+
"body": ["flex-shrink: 1;", ""],
85+
"description": "flex-shrink"
86+
},
87+
"flex-grow-0": {
88+
"prefix": "flex-grow-0",
89+
"body": ["flex-grow: 0;", ""],
90+
"description": "flex-grow-0"
91+
},
92+
"flex-grow": {
93+
"prefix": "flex-grow",
94+
"body": ["flex-grow: 1;", ""],
95+
"description": "flex-grow"
96+
},
97+
"flex-none": {
98+
"prefix": "flex-none",
99+
"body": ["flex: none;", ""],
100+
"description": "flex-none"
101+
},
102+
"flex-1": {
103+
"prefix": "flex-1",
104+
"body": ["flex: 1 1 0%;", ""],
105+
"description": "flex-1"
106+
},
107+
"flex-initial": {
108+
"prefix": "flex-initial",
109+
"body": ["flex: 0 1 auto;", ""],
110+
"description": "flex-initial"
111+
},
112+
"flex-auto": {
113+
"prefix": "flex-auto",
114+
"body": ["flex: 1 1 auto;", ""],
115+
"description": "flex-auto"
116+
},
117+
"justify-around": {
118+
"prefix": "justify-around",
119+
"body": ["justify-content: space-around;", ""],
120+
"description": "justify-around"
121+
},
122+
"justify-between": {
123+
"prefix": "justify-between",
124+
"body": ["justify-content: space-between;", ""],
125+
"description": "justify-between"
126+
},
127+
"justify-end": {
128+
"prefix": "justify-end",
129+
"body": ["justify-content: flex-end;", ""],
130+
"description": "justify-end"
131+
},
132+
"justify-start": {
133+
"prefix": "justify-start",
134+
"body": ["justify-content: flex-start;", ""],
135+
"description": "justify-start"
136+
},
137+
"justify-center": {
138+
"prefix": "justify-center",
139+
"body": ["justify-content: center;", ""],
140+
"description": "justify-center"
141+
},
142+
"content-around": {
143+
"prefix": "content-around",
144+
"body": ["align-content: space-around;", ""],
145+
"description": "content-around"
146+
},
147+
"content-between": {
148+
"prefix": "content-between",
149+
"body": ["align-content: space-between;", ""],
150+
"description": "content-between"
151+
},
152+
"content-end": {
153+
"prefix": "content-end",
154+
"body": ["align-content: flex-end;", ""],
155+
"description": "content-end"
156+
},
157+
"content-start": {
158+
"prefix": "content-start",
159+
"body": ["align-content: flex-start;", ""],
160+
"description": "content-start"
161+
},
162+
"content-center": {
163+
"prefix": "content-center",
164+
"body": ["align-content: center;", ""],
165+
"description": "content-center"
166+
},
167+
"self-end": {
168+
"prefix": "self-end",
169+
"body": ["align-self: flex-end;", ""],
170+
"description": "self-end"
171+
},
172+
"self-start": {
173+
"prefix": "self-start",
174+
"body": ["align-self: flex-start;", ""],
175+
"description": "self-start"
176+
},
177+
"self-center": {
178+
"prefix": "self-center",
179+
"body": ["align-self: center;", ""],
180+
"description": "self-center"
181+
},
182+
"self-auto": {
183+
"prefix": "self-auto",
184+
"body": ["align-self: auto;", ""],
185+
"description": "self-auto"
186+
},
187+
"self-stretch": {
188+
"prefix": "self-stretch",
189+
"body": ["align-self: stretch;", ""],
190+
"description": "self-stretch"
191+
},
192+
"items-end": {
193+
"prefix": "items-end",
194+
"body": ["align-items: flex-end;", ""],
195+
"description": "items-end"
196+
},
197+
"items-start": {
198+
"prefix": "items-start",
199+
"body": ["align-items: flex-start;", ""],
200+
"description": "items-start"
201+
},
202+
"items-center": {
203+
"prefix": "items-center",
204+
"body": ["align-items: center;", ""],
205+
"description": "items-center"
206+
},
207+
"items-baseline": {
208+
"prefix": "items-baseline",
209+
"body": ["align-items: baseline;", ""],
210+
"description": "items-baseline"
211+
},
212+
"items-stretch": {
213+
"prefix": "items-stretch",
214+
"body": ["align-items: stretch;", ""],
215+
"description": "items-stretch"
216+
},
217+
"flex-wrap-reverse": {
218+
"prefix": "flex-wrap-reverse",
219+
"body": ["flex-wrap: wrap-reverse;", ""],
220+
"description": "flex-wrap-reverse"
221+
},
222+
"flex-no-wrap": {
223+
"prefix": "flex-no-wrap",
224+
"body": ["flex-wrap: nowrap;", ""],
225+
"description": "flex-no-wrap"
226+
},
227+
"flex-wrap": {
228+
"prefix": "flex-wrap",
229+
"body": ["flex-wrap: wrap;", ""],
230+
"description": "flex-wrap"
231+
},
232+
"flex-col-reverse": {
233+
"prefix": "flex-col-reverse",
234+
"body": ["flex-direction: column-reverse;", ""],
235+
"description": "flex-col-reverse"
236+
},
237+
"flex-row-reverse": {
238+
"prefix": "flex-row-reverse",
239+
"body": ["flex-direction: row-reverse;", ""],
240+
"description": "flex-row-reverse"
241+
},
242+
"flex-col": {
243+
"prefix": "flex-col",
244+
"body": ["flex-direction: column;", ""],
245+
"description": "flex-col"
246+
},
247+
"flex-row": {
248+
"prefix": "flex-row",
249+
"body": ["flex-direction: row;", ""],
250+
"description": "flex-row"
251+
}
252+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /