@mixd-id/web-scaffold 0.1.230406085 → 0.1.230406087
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/components/Article.vue +69 -0
- package/src/components/Flex.vue +6 -0
- package/src/components/HTMLEditor.vue +27 -6
- package/src/components/Paragraph.vue +5 -1
- package/src/index.js +3 -0
- package/src/widgets/ArticleItem.vue +25 -0
- package/src/widgets/ArticleSetting.vue +175 -0
- package/src/widgets/FeatureList.vue +1 -1
- package/src/widgets/GridSetting.vue +6 -0
- package/src/widgets/IconList.vue +7 -0
- package/src/widgets/WebPageBuilder.vue +1 -0
- package/tailwind.config.js +243 -0
package/package.json
CHANGED
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<article :class="compClass" v-html="htmlText"></article>
|
|
3
|
+
</template>
|
|
4
|
+
|
|
5
|
+
<script>
|
|
6
|
+
|
|
7
|
+
import { componentMixin } from '../mixin/component';
|
|
8
|
+
|
|
9
|
+
export default{
|
|
10
|
+
|
|
11
|
+
mixins: [ componentMixin ],
|
|
12
|
+
|
|
13
|
+
props: {
|
|
14
|
+
|
|
15
|
+
htmlText: String
|
|
16
|
+
|
|
17
|
+
},
|
|
18
|
+
|
|
19
|
+
computed: {
|
|
20
|
+
|
|
21
|
+
compClass(){
|
|
22
|
+
return [
|
|
23
|
+
this.$style.comp,
|
|
24
|
+
this.extClass
|
|
25
|
+
]
|
|
26
|
+
.join(' ')
|
|
27
|
+
},
|
|
28
|
+
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
</script>
|
|
35
|
+
|
|
36
|
+
<style module>
|
|
37
|
+
|
|
38
|
+
.comp{
|
|
39
|
+
background-image: v-bind(bgImages[0]);
|
|
40
|
+
}
|
|
41
|
+
.comp *{
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.comp a{
|
|
45
|
+
@apply text-primary underline;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.comp ul li{
|
|
49
|
+
@apply list-disc list-inside;
|
|
50
|
+
}
|
|
51
|
+
.comp ol li{
|
|
52
|
+
@apply list-decimal list-inside;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
font[size='1']{ @apply text-xs; }
|
|
56
|
+
font[size='2']{ @apply text-sm; }
|
|
57
|
+
font[size='3']{ @apply text-lg; }
|
|
58
|
+
font[size='4']{ @apply text-xl; }
|
|
59
|
+
font[size='5']{ @apply text-2xl; }
|
|
60
|
+
font[size='6']{ @apply text-3xl; }
|
|
61
|
+
font[size='7']{ @apply text-4xl; }
|
|
62
|
+
|
|
63
|
+
@media screen(md){
|
|
64
|
+
.comp{
|
|
65
|
+
background-image: v-bind(bgImages[1]);
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
</style>
|
package/src/components/Flex.vue
CHANGED
|
@@ -35,24 +35,45 @@
|
|
|
35
35
|
|
|
36
36
|
<ContextMenu ref="headingContext">
|
|
37
37
|
<div class="flex flex-col">
|
|
38
|
-
<button class="p-3 text-4xl text-left hover:bg-primary-200" type="button" @click="format('
|
|
38
|
+
<button class="p-3 text-4xl text-left hover:bg-primary-200" type="button" @click="format('formatBlock', 'h1')">
|
|
39
39
|
Heading 1
|
|
40
40
|
</button>
|
|
41
|
-
<button class="p-3 text-3xl text-left hover:bg-primary-200" type="button" @click="format('
|
|
41
|
+
<button class="p-3 text-3xl text-left hover:bg-primary-200" type="button" @click="format('formatBlock', 'h2')">
|
|
42
42
|
Heading 2
|
|
43
43
|
</button>
|
|
44
|
-
<button class="p-3 text-2xl text-left hover:bg-primary-200" type="button" @click="format('
|
|
44
|
+
<button class="p-3 text-2xl text-left hover:bg-primary-200" type="button" @click="format('formatBlock', 'h3')">
|
|
45
45
|
Heading 3
|
|
46
46
|
</button>
|
|
47
|
-
<button class="p-3 text-xl text-left hover:bg-primary-200" type="button" @click="format('
|
|
47
|
+
<button class="p-3 text-xl text-left hover:bg-primary-200" type="button" @click="format('formatBlock', 'h4')">
|
|
48
48
|
Heading 4
|
|
49
49
|
</button>
|
|
50
|
-
<button class="p-3 text-lg text-left hover:bg-primary-200" type="button" @click="format('
|
|
50
|
+
<button class="p-3 text-lg text-left hover:bg-primary-200" type="button" @click="format('formatBlock', 'h5')">
|
|
51
51
|
Heading 5
|
|
52
52
|
</button>
|
|
53
|
-
<button class="p-3 text-left hover:bg-primary-200" type="button" @click="format('
|
|
53
|
+
<button class="p-3 text-left hover:bg-primary-200" type="button" @click="format('formatBlock', 'p')">
|
|
54
54
|
Normal
|
|
55
55
|
</button>
|
|
56
|
+
<button class="p-3 text-left text-xs hover:bg-primary-200" type="button" @click="format('formatBlock', 'p');format('fontSize', '1')">
|
|
57
|
+
Font 1
|
|
58
|
+
</button>
|
|
59
|
+
<button class="p-3 text-left text-sm hover:bg-primary-200" type="button" @click="format('formatBlock', 'p');format('fontSize', '2')">
|
|
60
|
+
Font 2
|
|
61
|
+
</button>
|
|
62
|
+
<button class="p-3 text-left text-lg hover:bg-primary-200" type="button" @click="format('formatBlock', 'p');format('fontSize', '3')">
|
|
63
|
+
Font 3
|
|
64
|
+
</button>
|
|
65
|
+
<button class="p-3 text-left text-xl hover:bg-primary-200" type="button" @click="format('formatBlock', 'p');format('fontSize', '4')">
|
|
66
|
+
Font 4
|
|
67
|
+
</button>
|
|
68
|
+
<button class="p-3 text-left text-2xl hover:bg-primary-200" type="button" @click="format('formatBlock', 'p');format('fontSize', '5')">
|
|
69
|
+
Font 5
|
|
70
|
+
</button>
|
|
71
|
+
<button class="p-3 text-left text-3xl hover:bg-primary-200" type="button" @click="format('formatBlock', 'p');format('fontSize', '6')">
|
|
72
|
+
Font 6
|
|
73
|
+
</button>
|
|
74
|
+
<button class="p-3 text-left text-4xl hover:bg-primary-200" type="button" @click="format('formatBlock', 'p');format('fontSize', '7')">
|
|
75
|
+
Font 7
|
|
76
|
+
</button>
|
|
56
77
|
</div>
|
|
57
78
|
</ContextMenu>
|
|
58
79
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<
|
|
2
|
+
<article :class="compClass" v-html="htmlText"></article>
|
|
3
3
|
</template>
|
|
4
4
|
|
|
5
5
|
<script>
|
|
@@ -41,6 +41,10 @@ export default{
|
|
|
41
41
|
.comp *{
|
|
42
42
|
}
|
|
43
43
|
|
|
44
|
+
.comp a{
|
|
45
|
+
@apply text-primary underline;
|
|
46
|
+
}
|
|
47
|
+
|
|
44
48
|
@media screen(md){
|
|
45
49
|
.comp{
|
|
46
50
|
background-image: v-bind(bgImages[1]);
|
package/src/index.js
CHANGED
|
@@ -248,6 +248,7 @@ export default{
|
|
|
248
248
|
app.config.globalProperties.info = consoleInfo
|
|
249
249
|
|
|
250
250
|
app.component('Alert', defineAsyncComponent(() => import("./components/Alert.vue")))
|
|
251
|
+
app.component('Article', defineAsyncComponent(() => import("./components/Article.vue")))
|
|
251
252
|
app.component('Block', defineAsyncComponent(() => import("./components/Block.vue")))
|
|
252
253
|
app.component('Button', defineAsyncComponent(() => import("./components/Button.vue")))
|
|
253
254
|
app.component('Box', defineAsyncComponent(() => import("./components/Box.vue")))
|
|
@@ -313,6 +314,8 @@ export default{
|
|
|
313
314
|
|
|
314
315
|
app.component('WebPageBuilder', defineAsyncComponent(() => import("./widgets/WebPageBuilder.vue")))
|
|
315
316
|
app.component('ComponentSetting', defineAsyncComponent(() => import("./widgets/ComponentSetting.vue")))
|
|
317
|
+
app.component('ArticleItem', defineAsyncComponent(() => import("./widgets/ArticleItem.vue")))
|
|
318
|
+
app.component('ArticleSetting', defineAsyncComponent(() => import("./widgets/ArticleSetting.vue")))
|
|
316
319
|
app.component('BlockItem', defineAsyncComponent(() => import("./widgets/BlockItem.vue")))
|
|
317
320
|
app.component('BlockSetting', defineAsyncComponent(() => import("./widgets/BlockSetting.vue")))
|
|
318
321
|
app.component('BoxItem', defineAsyncComponent(() => import("./widgets/BoxItem.vue")))
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="flex-1 flex flex-row items-center gap-2">
|
|
3
|
+
{{ item.props.name ?? item.type }}
|
|
4
|
+
</div>
|
|
5
|
+
</template>
|
|
6
|
+
|
|
7
|
+
<script>
|
|
8
|
+
|
|
9
|
+
export default{
|
|
10
|
+
|
|
11
|
+
props: {
|
|
12
|
+
item: Object
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
</script>
|
|
18
|
+
|
|
19
|
+
<style module>
|
|
20
|
+
|
|
21
|
+
.comp{
|
|
22
|
+
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
</style>
|
|
@@ -0,0 +1,175 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div :class="$style.comp">
|
|
3
|
+
|
|
4
|
+
<div>
|
|
5
|
+
<label class="text-text-400">Text</label>
|
|
6
|
+
<HTMLEditor class="mt-1" v-model="item.props.htmlText" @change="$emit('change')"/>
|
|
7
|
+
</div>
|
|
8
|
+
|
|
9
|
+
<div class="flex flex-row gap-4">
|
|
10
|
+
<label class="flex-1 text-text-400">Color</label>
|
|
11
|
+
<ColorPicker v-for="(_viewType, index) in viewTypes"
|
|
12
|
+
v-show="_viewType.value === viewType"
|
|
13
|
+
v-model="textColor[index]"
|
|
14
|
+
@change="$emit('change')"
|
|
15
|
+
:prefix="viewType === 'desktop' ? 'md:text-' : 'text-'"
|
|
16
|
+
:custom-color="true">
|
|
17
|
+
</ColorPicker>
|
|
18
|
+
</div>
|
|
19
|
+
|
|
20
|
+
<div class="grid grid-cols-2 gap-4">
|
|
21
|
+
<div>
|
|
22
|
+
<label class="text-text-400">Font</label>
|
|
23
|
+
<Dropdown v-for="(_, index) in viewTypes"
|
|
24
|
+
v-show="_.value === viewType"
|
|
25
|
+
v-model="fontFamily[index]"
|
|
26
|
+
@change="$emit('change')">
|
|
27
|
+
<option :value="`${viewType}font-sans`">Sans</option>
|
|
28
|
+
<option :value="`${viewType}font-serif`">Serif</option>
|
|
29
|
+
<option :value="`${viewType}font-mono`">Mono</option>
|
|
30
|
+
<option value="">Not Set</option>
|
|
31
|
+
</Dropdown>
|
|
32
|
+
</div>
|
|
33
|
+
|
|
34
|
+
<div>
|
|
35
|
+
<label class="text-text-400">Size</label>
|
|
36
|
+
<Dropdown v-for="(_, index) in viewTypes"
|
|
37
|
+
v-show="_.value === viewType"
|
|
38
|
+
v-model="fontSize[index]"
|
|
39
|
+
@change="$emit('change')">
|
|
40
|
+
<option :value="`${viewType}text-xs`">Extra Small</option>
|
|
41
|
+
<option :value="`${viewType}text-sm`">Small</option>
|
|
42
|
+
<option :value="`${viewType}text-base`">Normal</option>
|
|
43
|
+
<option :value="`${viewType}text-lg`">Large</option>
|
|
44
|
+
<option :value="`${viewType}text-xl`">Extra Large</option>
|
|
45
|
+
<option :value="`${viewType}text-2xl`">Extra Large 2</option>
|
|
46
|
+
<option :value="`${viewType}text-3xl`">Extra Large 3</option>
|
|
47
|
+
<option :value="`${viewType}text-4xl`">Extra Large 4</option>
|
|
48
|
+
<option :value="`${viewType}text-5xl`">Extra Large 5</option>
|
|
49
|
+
<option :value="`${viewType}text-6xl`">Extra Large 6</option>
|
|
50
|
+
<option value="">Not Set</option>
|
|
51
|
+
</Dropdown>
|
|
52
|
+
</div>
|
|
53
|
+
|
|
54
|
+
<div>
|
|
55
|
+
<label class="text-text-400">Weight</label>
|
|
56
|
+
<Dropdown v-for="(_, index) in viewTypes"
|
|
57
|
+
v-show="_.value === viewType"
|
|
58
|
+
v-model="fontWeight[index]"
|
|
59
|
+
@change="$emit('change')">
|
|
60
|
+
<option :value="`${viewType}font-thin`">Thin</option>
|
|
61
|
+
<option :value="`${viewType}font-extralight`">Extra Light</option>
|
|
62
|
+
<option :value="`${viewType}font-light`">Light</option>
|
|
63
|
+
<option :value="`${viewType}font-normal`">Normal</option>
|
|
64
|
+
<option :value="`${viewType}font-medium`">Medium</option>
|
|
65
|
+
<option :value="`${viewType}font-semibold`">Semi Bold</option>
|
|
66
|
+
<option :value="`${viewType}font-bold`">Bold</option>
|
|
67
|
+
<option :value="`${viewType}font-extrabold`">Extra Bold</option>
|
|
68
|
+
<option :value="`${viewType}font-black`">Black</option>
|
|
69
|
+
</Dropdown>
|
|
70
|
+
</div>
|
|
71
|
+
|
|
72
|
+
<div>
|
|
73
|
+
<label class="text-text-400">Line Height</label>
|
|
74
|
+
<Dropdown v-for="(_, index) in viewTypes"
|
|
75
|
+
v-show="_.value === viewType"
|
|
76
|
+
v-model="lineHeight[index]"
|
|
77
|
+
class="mt-1"
|
|
78
|
+
@change="$emit('change')">
|
|
79
|
+
<option :value="`${viewType}leading-3`">Leading 3</option>
|
|
80
|
+
<option :value="`${viewType}leading-4`">Leading 4</option>
|
|
81
|
+
<option :value="`${viewType}leading-5`">Leading 5</option>
|
|
82
|
+
<option :value="`${viewType}leading-6`">Leading 6</option>
|
|
83
|
+
<option :value="`${viewType}leading-7`">Leading 7</option>
|
|
84
|
+
<option :value="`${viewType}leading-8`">Leading 8</option>
|
|
85
|
+
<option :value="`${viewType}leading-9`">Leading 9</option>
|
|
86
|
+
<option :value="`${viewType}leading-10`">Leading 10</option>
|
|
87
|
+
<option :value="`${viewType}leading-tight`">Tight</option>
|
|
88
|
+
<option :value="`${viewType}leading-snug`">Snug</option>
|
|
89
|
+
<option :value="`${viewType}leading-normal`">Normal</option>
|
|
90
|
+
<option :value="`${viewType}leading-relaxed`">Relaxed</option>
|
|
91
|
+
<option :value="`${viewType}leading-loose`">Loose</option>
|
|
92
|
+
<option value="">Not Set</option>
|
|
93
|
+
</Dropdown>
|
|
94
|
+
</div>
|
|
95
|
+
|
|
96
|
+
</div>
|
|
97
|
+
|
|
98
|
+
<ComponentSetting :item="item"
|
|
99
|
+
:view-type="viewType"
|
|
100
|
+
:view-types="viewTypes"
|
|
101
|
+
defaultDisplay="block"
|
|
102
|
+
@change="$emit('change')" />
|
|
103
|
+
|
|
104
|
+
</div>
|
|
105
|
+
</template>
|
|
106
|
+
|
|
107
|
+
<script>
|
|
108
|
+
|
|
109
|
+
export default{
|
|
110
|
+
|
|
111
|
+
emits: [ 'change' ],
|
|
112
|
+
|
|
113
|
+
props: {
|
|
114
|
+
|
|
115
|
+
item: {
|
|
116
|
+
type: Object,
|
|
117
|
+
required: true
|
|
118
|
+
},
|
|
119
|
+
|
|
120
|
+
viewType: String,
|
|
121
|
+
|
|
122
|
+
viewTypes: Array,
|
|
123
|
+
|
|
124
|
+
},
|
|
125
|
+
|
|
126
|
+
computed: {
|
|
127
|
+
|
|
128
|
+
fontFamily(){
|
|
129
|
+
if(!Array.isArray(this.item.props.fontFamily))
|
|
130
|
+
this.item.props.fontFamily = []
|
|
131
|
+
|
|
132
|
+
return this.item.props.fontFamily
|
|
133
|
+
},
|
|
134
|
+
|
|
135
|
+
fontSize(){
|
|
136
|
+
if(!Array.isArray(this.item.props.fontSize))
|
|
137
|
+
this.item.props.fontSize = []
|
|
138
|
+
|
|
139
|
+
return this.item.props.fontSize
|
|
140
|
+
},
|
|
141
|
+
|
|
142
|
+
fontWeight(){
|
|
143
|
+
if(!Array.isArray(this.item.props.fontWeight))
|
|
144
|
+
this.item.props.fontWeight = []
|
|
145
|
+
|
|
146
|
+
return this.item.props.fontWeight
|
|
147
|
+
},
|
|
148
|
+
|
|
149
|
+
lineHeight(){
|
|
150
|
+
if(!Array.isArray(this.item.props.lineHeight))
|
|
151
|
+
this.item.props.lineHeight = []
|
|
152
|
+
|
|
153
|
+
return this.item.props.lineHeight
|
|
154
|
+
},
|
|
155
|
+
|
|
156
|
+
textColor(){
|
|
157
|
+
if(!Array.isArray(this.item.props.textColor))
|
|
158
|
+
this.item.props.textColor = []
|
|
159
|
+
|
|
160
|
+
return this.item.props.textColor
|
|
161
|
+
},
|
|
162
|
+
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
</script>
|
|
168
|
+
|
|
169
|
+
<style module>
|
|
170
|
+
|
|
171
|
+
.comp{
|
|
172
|
+
@apply flex flex-col gap-4;
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
</style>
|
package/src/widgets/IconList.vue
CHANGED
|
@@ -0,0 +1,243 @@
|
|
|
1
|
+
module.exports = {
|
|
2
|
+
content: [
|
|
3
|
+
"./index.html",
|
|
4
|
+
"./src/**/*.{vue,js,ts,jsx,tsx}",
|
|
5
|
+
"./node_modules/@mixd-id/web-scaffold/src/**/*.{vue,js,ts,jsx,tsx}",
|
|
6
|
+
],
|
|
7
|
+
plugins: [
|
|
8
|
+
/*require('@tailwindcss/line-clamp'),*/
|
|
9
|
+
/*require('@mixd-id/web-scaffold/themes/default'),*/
|
|
10
|
+
require('./src/views/themes')
|
|
11
|
+
],
|
|
12
|
+
darkMode: 'class',
|
|
13
|
+
important: true,
|
|
14
|
+
theme: {
|
|
15
|
+
extend: {
|
|
16
|
+
height: {
|
|
17
|
+
'10vh': '10vh',
|
|
18
|
+
'20vh': '20vh',
|
|
19
|
+
'30vh': '30vh',
|
|
20
|
+
'40vh': '40vh',
|
|
21
|
+
'50vh': '50vh',
|
|
22
|
+
'60vh': '60vh',
|
|
23
|
+
'70vh': '70vh',
|
|
24
|
+
'80vh': '80vh',
|
|
25
|
+
'90vh': '90vh',
|
|
26
|
+
'100vh': '100vh',
|
|
27
|
+
},
|
|
28
|
+
backgroundSize: {
|
|
29
|
+
'50%': '50%',
|
|
30
|
+
'40%' : '40%',
|
|
31
|
+
'30%' : '30%',
|
|
32
|
+
'20%' : '20%',
|
|
33
|
+
'10%' : '10%',
|
|
34
|
+
},
|
|
35
|
+
minWidth: {
|
|
36
|
+
'0': '0',
|
|
37
|
+
'1/12': '8%',
|
|
38
|
+
'2/12': '16%',
|
|
39
|
+
'3/12': '25%',
|
|
40
|
+
'4/12': '33%',
|
|
41
|
+
'5/12': '41%',
|
|
42
|
+
'6/12': '50%',
|
|
43
|
+
'7/12': '58%',
|
|
44
|
+
'8/12': '66%',
|
|
45
|
+
'9/12': '75%',
|
|
46
|
+
'10/12': '83%',
|
|
47
|
+
'11/12': '91%',
|
|
48
|
+
'full': '100%',
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
},
|
|
52
|
+
safelist: [
|
|
53
|
+
'rounded-l-none', 'rounded-r-none',
|
|
54
|
+
|
|
55
|
+
'p-1', 'p-2', 'p-3', 'p-4', 'p-5', 'p-6', 'p-7', 'p-8',
|
|
56
|
+
'md:p-1', 'md:p-2', 'md:p-3', 'md:p-4', 'md:p-5', 'md:p-6', 'md:p-7', 'md:p-8',
|
|
57
|
+
'px-1', 'px-2', 'px-3', 'px-4', 'px-5', 'px-6', 'px-7', 'px-8',
|
|
58
|
+
'md:px-1', 'md:px-2', 'md:px-3', 'md:px-4', 'md:px-5', 'md:px-6', 'md:px-7', 'md:px-8',
|
|
59
|
+
'py-1', 'py-2', 'py-3', 'py-4', 'py-5', 'py-6', 'py-7', 'py-8',
|
|
60
|
+
'md:py-1', 'md:py-2', 'md:py-3', 'md:py-4', 'md:py-5', 'md:py-6', 'md:py-7', 'md:py-8',
|
|
61
|
+
'pl-1', 'pl-2', 'pl-3', 'pl-4', 'pl-5', 'pl-6', 'pl-7', 'pl-8',
|
|
62
|
+
'md:pl-1', 'md:pl-2', 'md:pl-3', 'md:pl-4', 'md:pl-5', 'md:pl-6', 'md:pl-7', 'md:pl-8',
|
|
63
|
+
'pt-1', 'pt-2', 'pt-3', 'pt-4', 'pt-5', 'pt-6', 'pt-7', 'pt-8',
|
|
64
|
+
'md:pt-1', 'md:pt-2', 'md:pt-3', 'md:pt-4', 'md:pt-5', 'md:pt-6', 'md:pt-7', 'md:pt-8',
|
|
65
|
+
'pr-1', 'pr-2', 'pr-3', 'pr-4', 'pr-5', 'pr-6', 'pr-7', 'pr-8',
|
|
66
|
+
'md:pr-1', 'md:pr-2', 'md:pr-3', 'md:pr-4', 'md:pr-5', 'md:pr-6', 'md:pr-7', 'md:pr-8',
|
|
67
|
+
'pb-1', 'pb-2', 'pb-3', 'pb-4', 'pb-5', 'pb-6', 'pb-7', 'pb-8',
|
|
68
|
+
'md:pb-1', 'md:pb-2', 'md:pb-3', 'md:pb-4', 'md:pb-5', 'md:pb-6', 'md:pb-7', 'md:pb-8',
|
|
69
|
+
|
|
70
|
+
'block', 'grid', 'flex',
|
|
71
|
+
'md:block', 'md:grid', 'md:flex',
|
|
72
|
+
|
|
73
|
+
'm-1', 'm-2', 'm-3', 'm-4', 'm-5', 'm-6', 'm-7', 'm-8',
|
|
74
|
+
'md:m-1', 'md:m-2', 'md:m-3', 'md:m-4', 'md:m-5', 'md:m-6', 'md:m-7', 'md:m-8',
|
|
75
|
+
'mx-1', 'mx-2', 'mx-3', 'mx-4', 'mx-5', 'mx-6', 'mx-7', 'mx-8',
|
|
76
|
+
'md:mx-1', 'md:mx-2', 'md:mx-3', 'md:mx-4', 'md:mx-5', 'md:mx-6', 'md:mx-7', 'md:mx-8',
|
|
77
|
+
'my-1', 'my-2', 'my-3', 'my-4', 'my-5', 'my-6', 'my-7', 'my-8',
|
|
78
|
+
'md:my-1', 'md:my-2', 'md:my-3', 'md:my-4', 'md:my-5', 'md:my-6', 'md:my-7', 'md:my-8',
|
|
79
|
+
'ml-1', 'ml-2', 'ml-3', 'ml-4', 'ml-5', 'ml-6', 'ml-7', 'ml-8',
|
|
80
|
+
'md:ml-1', 'md:ml-2', 'md:ml-3', 'md:ml-4', 'md:ml-5', 'md:ml-6', 'md:ml-7', 'md:ml-8',
|
|
81
|
+
'mt-1', 'mt-2', 'mt-3', 'mt-4', 'mt-5', 'mt-6', 'mt-7', 'mt-8',
|
|
82
|
+
'md:mt-1', 'md:mt-2', 'md:mt-3', 'md:mt-4', 'md:mt-5', 'md:mt-6', 'md:mt-7', 'md:mt-8',
|
|
83
|
+
'mr-1', 'mr-2', 'mr-3', 'mr-4', 'mr-5', 'mr-6', 'mr-7', 'mr-8',
|
|
84
|
+
'md:mr-1', 'md:mr-2', 'md:mr-3', 'md:mr-4', 'md:mr-5', 'md:mr-6', 'md:mr-7', 'md:mr-8',
|
|
85
|
+
'mb-1', 'mb-2', 'mb-3', 'mb-4', 'mb-5', 'mb-6', 'mb-7', 'mb-8',
|
|
86
|
+
'md:mb-1', 'md:mb-2', 'md:mb-3', 'md:mb-4', 'md:mb-5', 'md:mb-6', 'md:mb-7', 'md:mb-8',
|
|
87
|
+
'mx-auto',
|
|
88
|
+
'md:mx-auto',
|
|
89
|
+
|
|
90
|
+
'grid-cols-1', 'grid-cols-2', 'grid-cols-3', 'grid-cols-4', 'grid-cols-5', 'grid-cols-6', 'grid-cols-7', 'grid-cols-8',
|
|
91
|
+
'md:grid-cols-1', 'md:grid-cols-2', 'md:grid-cols-3', 'md:grid-cols-4', 'md:grid-cols-5', 'md:grid-cols-6', 'md:grid-cols-7', 'md:grid-cols-8',
|
|
92
|
+
|
|
93
|
+
'aspect-[2/1]', 'aspect-[4/1]', 'aspect-[4/3]', 'aspect-[8/1]', 'aspect-[8/3]', 'aspect-[8/5.6]',
|
|
94
|
+
'md:aspect-[2/1]', 'md:aspect-[4/1]', 'md:aspect-[4/3]', 'md:aspect-[8/1]', 'md:aspect-[8/3]', 'md:aspect-[8/5.6]',
|
|
95
|
+
|
|
96
|
+
'gap-0', 'gap-1', 'gap-2', 'gap-3', 'gap-4', 'gap-5', 'gap-6', 'gap-7', 'gap-8',
|
|
97
|
+
'md:gap-0', 'md:gap-1', 'md:gap-2', 'md:gap-3', 'md:gap-4', 'md:gap-5', 'md:gap-6', 'md:gap-7', 'md:gap-8',
|
|
98
|
+
|
|
99
|
+
'justify-start', 'justify-center', 'justify-end',
|
|
100
|
+
'md:justify-start', 'md:justify-center', 'md:justify-end',
|
|
101
|
+
|
|
102
|
+
'max-w-none', 'max-w-0', 'max-w-xs', 'max-w-sm', 'max-w-md', 'max-w-lg', 'max-w-xl', 'max-w-2xl', 'max-w-3xl', 'max-w-4xl',
|
|
103
|
+
'max-w-screen-sm', 'max-w-screen-md', 'max-w-screen-lg', 'max-w-screen-xl', 'max-w-screen-2xl',
|
|
104
|
+
'md:max-w-none', 'md:max-w-0', 'md:max-w-xs', 'md:max-w-sm', 'md:max-w-md', 'md:max-w-lg', 'md:max-w-xl', 'md:max-w-2xl', 'md:max-w-3xl', 'md:max-w-4xl',
|
|
105
|
+
'md:max-w-screen-sm', 'md:max-w-screen-md', 'md:max-w-screen-lg', 'md:max-w-screen-xl', 'md:max-w-screen-2xl',
|
|
106
|
+
|
|
107
|
+
'bg-primary-50', 'bg-primary-100', 'bg-primary-200', 'bg-primary-300', 'bg-primary-400', 'bg-primary-500',
|
|
108
|
+
'bg-primary-600', 'bg-primary-700', 'bg-primary-800', 'bg-primary-900',
|
|
109
|
+
'md:bg-primary-50', 'md:bg-primary-100', 'md:bg-primary-200', 'md:bg-primary-300', 'md:bg-primary-400', 'md:bg-primary-500',
|
|
110
|
+
'md:bg-primary-600', 'md:bg-primary-700', 'md:bg-primary-800', 'md:bg-primary-900',
|
|
111
|
+
'border-primary-50', 'border-primary-100', 'border-primary-200', 'border-primary-300', 'border-primary-400', 'border-primary-500',
|
|
112
|
+
'border-primary-600', 'border-primary-700', 'border-primary-800', 'border-primary-900',
|
|
113
|
+
'md:border-primary-50', 'md:border-primary-100', 'md:border-primary-200', 'md:border-primary-300', 'md:border-primary-400', 'md:border-primary-500',
|
|
114
|
+
'md:border-primary-600', 'md:border-primary-700', 'md:border-primary-800', 'md:border-primary-900',
|
|
115
|
+
'text-primary-50', 'text-primary-100', 'text-primary-200', 'text-primary-300', 'text-primary-400', 'text-primary-500',
|
|
116
|
+
'text-primary-600', 'text-primary-700', 'text-primary-800', 'text-primary-900',
|
|
117
|
+
'md:text-primary-50', 'md:text-primary-100', 'md:text-primary-200', 'md:text-primary-300', 'md:text-primary-400', 'md:text-primary-500',
|
|
118
|
+
'md:text-primary-600', 'md:text-primary-700', 'md:text-primary-800', 'md:text-primary-900',
|
|
119
|
+
|
|
120
|
+
'bg-auto', 'bg-cover', 'bg-contain', 'bg-50%', 'bg-40%', 'bg-30%', 'bg-20%', 'bg-10%',
|
|
121
|
+
'md:bg-auto', 'md:bg-cover', 'md:bg-contain', 'md:bg-50%', 'md:bg-40%', 'md:bg-30%', 'md:bg-20%', 'md:bg-10%',
|
|
122
|
+
|
|
123
|
+
'bg-gray-50', 'bg-gray-100', 'bg-gray-200', 'bg-gray-300', 'bg-gray-400', 'bg-gray-500',
|
|
124
|
+
'bg-gray-600', 'bg-gray-700', 'bg-gray-800', 'bg-gray-900',
|
|
125
|
+
'md:bg-gray-50', 'md:bg-gray-100', 'md:bg-gray-200', 'md:bg-gray-300', 'md:bg-gray-400', 'md:bg-gray-500',
|
|
126
|
+
'md:bg-gray-600', 'md:bg-gray-700', 'md:bg-gray-800', 'md:bg-gray-900',
|
|
127
|
+
'border-gray-50', 'border-gray-100', 'border-gray-200', 'border-gray-300', 'border-gray-400', 'border-gray-500',
|
|
128
|
+
'border-gray-600', 'border-gray-700', 'border-gray-800', 'border-gray-900',
|
|
129
|
+
'md:border-gray-50', 'md:border-gray-100', 'md:border-gray-200', 'md:border-gray-300', 'md:border-gray-400', 'md:border-gray-500',
|
|
130
|
+
'md:border-gray-600', 'md:border-gray-700', 'md:border-gray-800', 'md:border-gray-900',
|
|
131
|
+
'text-gray-50', 'text-gray-100', 'text-gray-200', 'text-gray-300', 'text-gray-400', 'text-gray-500',
|
|
132
|
+
'text-gray-600', 'text-gray-700', 'text-gray-800', 'text-gray-900',
|
|
133
|
+
'md:text-gray-50', 'md:text-gray-100', 'md:text-gray-200', 'md:text-gray-300', 'md:text-gray-400', 'md:text-gray-500',
|
|
134
|
+
'md:text-gray-600', 'md:text-gray-700', 'md:text-gray-800', 'md:text-gray-900',
|
|
135
|
+
|
|
136
|
+
'bg-red-50', 'bg-red-100', 'bg-red-200', 'bg-red-300', 'bg-red-400', 'bg-red-500',
|
|
137
|
+
'bg-red-600', 'bg-red-700', 'bg-red-800', 'bg-red-900',
|
|
138
|
+
'md:bg-red-50', 'md:bg-red-100', 'md:bg-red-200', 'md:bg-red-300', 'md:bg-red-400', 'md:bg-red-500',
|
|
139
|
+
'md:bg-red-600', 'md:bg-red-700', 'md:bg-red-800', 'md:bg-red-900',
|
|
140
|
+
'border-red-50', 'border-red-100', 'border-red-200', 'border-red-300', 'border-red-400', 'border-red-500',
|
|
141
|
+
'border-red-600', 'border-red-700', 'border-red-800', 'border-red-900',
|
|
142
|
+
'md:border-red-50', 'md:border-red-100', 'md:border-red-200', 'md:border-red-300', 'md:border-red-400', 'md:border-red-500',
|
|
143
|
+
'md:border-red-600', 'md:border-red-700', 'md:border-red-800', 'md:border-red-900',
|
|
144
|
+
'text-red-50', 'text-red-100', 'text-red-200', 'text-red-300', 'text-red-400', 'text-red-500',
|
|
145
|
+
'text-red-600', 'text-red-700', 'text-red-800', 'text-red-900',
|
|
146
|
+
'md:text-red-50', 'md:text-red-100', 'md:text-red-200', 'md:text-red-300', 'md:text-red-400', 'md:text-red-500',
|
|
147
|
+
'md:text-red-600', 'md:text-red-700', 'md:text-red-800', 'md:text-red-900',
|
|
148
|
+
|
|
149
|
+
'bg-lime-50', 'bg-lime-100', 'bg-lime-200', 'bg-lime-300', 'bg-lime-400', 'bg-lime-500',
|
|
150
|
+
'bg-lime-600', 'bg-lime-700', 'bg-lime-800', 'bg-lime-900',
|
|
151
|
+
'md:bg-lime-50', 'md:bg-lime-100', 'md:bg-lime-200', 'md:bg-lime-300', 'md:bg-lime-400', 'md:bg-lime-500',
|
|
152
|
+
'md:bg-lime-600', 'md:bg-lime-700', 'md:bg-lime-800', 'md:bg-lime-900',
|
|
153
|
+
'border-lime-50', 'border-lime-100', 'border-lime-200', 'border-lime-300', 'border-lime-400', 'border-lime-500',
|
|
154
|
+
'border-lime-600', 'border-lime-700', 'border-lime-800', 'border-lime-900',
|
|
155
|
+
'md:border-lime-50', 'md:border-lime-100', 'md:border-lime-200', 'md:border-lime-300', 'md:border-lime-400', 'md:border-lime-500',
|
|
156
|
+
'md:border-lime-600', 'md:border-lime-700', 'md:border-lime-800', 'md:border-lime-900',
|
|
157
|
+
'text-lime-50', 'text-lime-100', 'text-lime-200', 'text-lime-300', 'text-lime-400', 'text-lime-500',
|
|
158
|
+
'text-lime-600', 'text-lime-700', 'text-lime-800', 'text-lime-900',
|
|
159
|
+
'md:text-lime-50', 'md:text-lime-100', 'md:text-lime-200', 'md:text-lime-300', 'md:text-lime-400', 'md:text-lime-500',
|
|
160
|
+
'md:text-lime-600', 'md:text-lime-700', 'md:text-lime-800', 'md:text-lime-900',
|
|
161
|
+
|
|
162
|
+
'bg-blue-50', 'bg-blue-100', 'bg-blue-200', 'bg-blue-300', 'bg-blue-400', 'bg-blue-500',
|
|
163
|
+
'bg-blue-600', 'bg-blue-700', 'bg-blue-800', 'bg-blue-900',
|
|
164
|
+
'md:bg-blue-50', 'md:bg-blue-100', 'md:bg-blue-200', 'md:bg-blue-300', 'md:bg-blue-400', 'md:bg-blue-500',
|
|
165
|
+
'md:bg-blue-600', 'md:bg-blue-700', 'md:bg-blue-800', 'md:bg-blue-900',
|
|
166
|
+
'border-blue-50', 'border-blue-100', 'border-blue-200', 'border-blue-300', 'border-blue-400', 'border-blue-500',
|
|
167
|
+
'border-blue-600', 'border-blue-700', 'border-blue-800', 'border-blue-900',
|
|
168
|
+
'md:border-blue-50', 'md:border-blue-100', 'md:border-blue-200', 'md:border-blue-300', 'md:border-blue-400', 'md:border-blue-500',
|
|
169
|
+
'md:border-blue-600', 'md:border-blue-700', 'md:border-blue-800', 'md:border-blue-900',
|
|
170
|
+
'text-blue-50', 'text-blue-100', 'text-blue-200', 'text-blue-300', 'text-blue-400', 'text-blue-500',
|
|
171
|
+
'text-blue-600', 'text-blue-700', 'text-blue-800', 'text-blue-900',
|
|
172
|
+
'md:text-blue-50', 'md:text-blue-100', 'md:text-blue-200', 'md:text-blue-300', 'md:text-blue-400', 'md:text-blue-500',
|
|
173
|
+
'md:text-blue-600', 'md:text-blue-700', 'md:text-blue-800', 'md:text-blue-900',
|
|
174
|
+
|
|
175
|
+
'bg-amber-50', 'bg-amber-100', 'bg-amber-200', 'bg-amber-300', 'bg-amber-400', 'bg-amber-500',
|
|
176
|
+
'bg-amber-600', 'bg-amber-700', 'bg-amber-800', 'bg-amber-900',
|
|
177
|
+
'md:bg-amber-50', 'md:bg-amber-100', 'md:bg-amber-200', 'md:bg-amber-300', 'md:bg-amber-400', 'md:bg-amber-500',
|
|
178
|
+
'md:bg-amber-600', 'md:bg-amber-700', 'md:bg-amber-800', 'md:bg-amber-900',
|
|
179
|
+
'border-amber-50', 'border-amber-100', 'border-amber-200', 'border-amber-300', 'border-amber-400', 'border-amber-500',
|
|
180
|
+
'border-amber-600', 'border-amber-700', 'border-amber-800', 'border-amber-900',
|
|
181
|
+
'md:border-amber-50', 'md:border-amber-100', 'md:border-amber-200', 'md:border-amber-300', 'md:border-amber-400', 'md:border-amber-500',
|
|
182
|
+
'md:border-amber-600', 'md:border-amber-700', 'md:border-amber-800', 'md:border-amber-900',
|
|
183
|
+
'text-amber-50', 'text-amber-100', 'text-amber-200', 'text-amber-300', 'text-amber-400', 'text-amber-500',
|
|
184
|
+
'text-amber-600', 'text-amber-700', 'text-amber-800', 'text-amber-900',
|
|
185
|
+
'md:text-amber-50', 'md:text-amber-100', 'md:text-amber-200', 'md:text-amber-300', 'md:text-amber-400', 'md:text-amber-500',
|
|
186
|
+
'md:text-amber-600', 'md:text-amber-700', 'md:text-amber-800', 'md:text-amber-900',
|
|
187
|
+
|
|
188
|
+
'basis-1/12', 'basis-2/12', 'basis-3/12', 'basis-4/12', 'basis-5/12', 'basis-6/12', 'basis-7/12',
|
|
189
|
+
'basis-8/12', 'basis-9/12', 'basis-10/12', 'basis-11/12', 'basis-full', 'flex-0', 'flex-1',
|
|
190
|
+
'md:basis-1/12', 'md:basis-2/12', 'md:basis-3/12', 'md:basis-4/12', 'md:basis-5/12', 'md:basis-6/12', 'md:basis-7/12',
|
|
191
|
+
'md:basis-8/12', 'md:basis-9/12', 'md:basis-10/12', 'md:basis-11/12', 'md:basis-full', 'md:flex-0', 'md:flex-1',
|
|
192
|
+
|
|
193
|
+
'min-w-1/12', 'min-w-2/12', 'min-w-3/12', 'min-w-4/12', 'min-w-5/12', 'min-w-6/12',
|
|
194
|
+
'min-w-7/12', 'min-w-8/12', 'min-w-9/12', 'min-w-10/12', 'min-w-11/12', 'min-w-full',
|
|
195
|
+
'md:min-w-1/12', 'md:min-w-2/12', 'md:min-w-3/12', 'md:min-w-4/12', 'md:min-w-5/12', 'md:min-w-6/12',
|
|
196
|
+
'md:min-w-7/12', 'md:min-w-8/12', 'md:min-w-9/12', 'md:min-w-10/12', 'md:min-w-11/12', 'md:min-w-full',
|
|
197
|
+
|
|
198
|
+
'w-1', 'w-2', 'w-3', 'w-4', 'w-5', 'w-20', 'w-24', 'w-28', 'w-32', 'w-36', 'w-48', 'w-screen', 'w-full',
|
|
199
|
+
'md:w-1', 'md:w-2', 'md:w-3', 'md:w-4', 'md:w-5', 'md:w-20', 'md:w-24', 'md:w-28', 'md:w-32', 'md:w-36', 'md:w-48', 'md:w-screen', 'md:w-full',
|
|
200
|
+
|
|
201
|
+
'font-sans', 'font-serif', 'font-mono',
|
|
202
|
+
'md:font-sans', 'md:font-serif', 'md:font-mono',
|
|
203
|
+
|
|
204
|
+
'font-thin', 'font-extralight', 'font-light', 'font-normal', 'font-medium', 'font-semibold', 'font-bold', 'font-extrabold', 'font-black',
|
|
205
|
+
'md:font-thin', 'md:font-extralight', 'md:font-light', 'md:font-normal', 'md:font-medium', 'md:font-semibold', 'md:font-bold', 'md:font-extrabold', 'md:font-black',
|
|
206
|
+
|
|
207
|
+
'text-xs', 'text-sm', 'text-base', 'text-lg', 'text-xl', 'text-2xl', 'text-3xl',
|
|
208
|
+
'text-4xl', 'text-5xl', 'text-6xl',
|
|
209
|
+
'md:text-xs', 'md:text-sm', 'md:text-base', 'md:text-lg', 'md:text-xl', 'md:text-2xl', 'md:text-3xl',
|
|
210
|
+
'md:text-4xl', 'md:text-5xl', 'md:text-6xl',
|
|
211
|
+
|
|
212
|
+
'h-1', 'h-2', 'h-3', 'h-4', 'h-5', 'h-6', 'h-7', 'h-8', 'h-1/4',
|
|
213
|
+
'h-10vh', 'h-20vh', 'h-30vh', 'h-40vh', 'h-50vh', 'h-60vh', 'h-70vh', 'h-80vh', 'h-90vh', 'h-100vh',
|
|
214
|
+
'md:h-1', 'md:h-2', 'md:h-3', 'md:h-4', 'md:h-5', 'md:h-6', 'md:h-7', 'md:h-8', 'md:h-1/4',
|
|
215
|
+
'md:h-10vh', 'md:h-20vh', 'md:h-30vh', 'md:h-40vh', 'md:h-50vh', 'md:h-60vh', 'md:h-70vh', 'md:h-80vh', 'md:h-90vh', 'md:h-100vh',
|
|
216
|
+
|
|
217
|
+
'min-h-0', 'min-h-full', 'min-h-screen', 'min-h-min', 'min-h-max', 'min-h-fit',
|
|
218
|
+
'md:min-h-0', 'md:min-h-full', 'md:min-h-screen', 'md:min-h-min', 'md:min-h-max', 'md:min-h-fit',
|
|
219
|
+
|
|
220
|
+
'max-h-0', 'max-h-1', 'max-h-2', 'max-h-3', 'max-h-4', 'max-h-5',
|
|
221
|
+
'md:max-h-0', 'md:max-h-1', 'md:max-h-2', 'md:max-h-3', 'md:max-h-4', 'md:max-h-5',
|
|
222
|
+
|
|
223
|
+
'leading-3', 'leading-4', 'leading-5', 'leading-6', 'leading-7', 'leading-8', 'leading-9',
|
|
224
|
+
'leading-10', 'leading-tight', 'leading-snug', 'leading-normal', 'leading-relaxed', 'leading-loose',
|
|
225
|
+
'md:leading-3', 'md:leading-4', 'md:leading-5', 'md:leading-6', 'md:leading-7', 'md:leading-8', 'md:leading-9',
|
|
226
|
+
'md:leading-10', 'md:leading-tight', 'md:leading-snug', 'md:leading-normal', 'md:leading-relaxed', 'md:leading-loose',
|
|
227
|
+
|
|
228
|
+
'overflow-auto', 'overflow-hidden', 'overflow-clip', 'overflow-visible', 'overflow-scroll', 'overflow-x-auto',
|
|
229
|
+
'overflow-y-auto', 'overflow-x-hidden', 'overflow-y-hidden', 'overflow-x-clip', 'overflow-y-clip',
|
|
230
|
+
'overflow-x-visible', 'overflow-y-visible', 'overflow-x-scroll', 'overflow-y-scroll',
|
|
231
|
+
'md:overflow-auto', 'md:overflow-hidden', 'md:overflow-clip', 'md:overflow-visible', 'md:overflow-scroll', 'md:overflow-x-auto',
|
|
232
|
+
'md:overflow-y-auto', 'md:overflow-x-hidden', 'md:overflow-y-hidden', 'md:overflow-x-clip', 'md:overflow-y-clip',
|
|
233
|
+
'md:overflow-x-visible', 'md:overflow-y-visible', 'md:overflow-x-scroll', 'md:overflow-y-scroll',
|
|
234
|
+
|
|
235
|
+
'shadow-none', 'shadow-xs', 'shadow-sm', 'shadow', 'shadow-md', 'shadow-lg', 'shadow-xl', 'shadow-2xl',
|
|
236
|
+
'md:shadow-none', 'md:shadow-xs', 'md:shadow-sm', 'shadow', 'md:shadow-md', 'md:shadow-lg', 'md:shadow-xl', 'md:shadow-2xl',
|
|
237
|
+
|
|
238
|
+
'opacity-0', 'opacity-10', 'opacity-20', 'opacity-30', 'opacity-40', 'opacity-50',
|
|
239
|
+
'opacity-60', 'opacity-70', 'opacity-75', 'opacity-80', 'opacity-90', 'opacity-100',
|
|
240
|
+
'md:opacity-0', 'md:opacity-10', 'md:opacity-20', 'md:opacity-30', 'md:opacity-40', 'md:opacity-50',
|
|
241
|
+
'md:opacity-60', 'md:opacity-70', 'md:opacity-75', 'md:opacity-80', 'md:opacity-90', 'md:opacity-100',
|
|
242
|
+
]
|
|
243
|
+
}
|