-
Notifications
You must be signed in to change notification settings - Fork 1
/
tailwind.config.ts
154 lines (152 loc) · 6.09 KB
/
tailwind.config.ts
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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
/* eslint-disable unused-imports/no-unused-vars */
import type { Config } from 'tailwindcss'
import plugin from 'tailwindcss/plugin'
export default <Partial<Config>> {
theme: {
extend: {
colors: {
kuning: {
DEFAULT: '#F2A516',
50: '#FCE8C4',
100: '#FBE1B1',
200: '#F8D28A',
300: '#F6C363',
400: '#F4B43D',
500: '#F2A516',
600: '#C5840B',
700: '#906008',
800: '#5B3D05',
900: '#261902',
950: '#0B0701',
},
merah: {
DEFAULT: '#F22727',
50: '#FCD4D4',
100: '#FBC1C1',
200: '#F99A9A',
300: '#F77474',
400: '#F44D4D',
500: '#F22727',
600: '#D40D0D',
700: '#9F0A0A',
800: '#6A0606',
900: '#350303',
950: '#1B0202',
},
gelap: {
DEFAULT: '#0e1426',
50: '#b4bfdc',
100: '#a6b0d8',
200: '#8b95cc',
300: '#6f7ac0',
400: '#545fb4',
500: '#3a479a',
600: '#2f3b7e',
700: '#232e61',
800: '#182244',
900: '#0e1426',
950: '#080b12',
},
},
fontFamily: {
title: ['Montserrat'], // Mengganti Poppins dengan Montserrat untuk heading
body: ['Plus Jakarta Sans'], // Mengganti Lato dengan Plus Jakarta Sans untuk body text
},
typography: ({ theme }: { theme: any }) => ({
merah: {
css: {
'--tw-prose-body': theme('colors.merah[800]'),
'--tw-prose-headings': theme('colors.merah[900]'),
'--tw-prose-lead': theme('colors.merah[700]'),
'--tw-prose-links': theme('colors.merah[900]'),
'--tw-prose-bold': theme('colors.merah[900]'),
'--tw-prose-counters': theme('colors.merah[600]'),
'--tw-prose-bullets': theme('colors.merah[400]'),
'--tw-prose-hr': theme('colors.merah[300]'),
'--tw-prose-quotes': theme('colors.merah[900]'),
'--tw-prose-quote-borders': theme('colors.merah[300]'),
'--tw-prose-captions': theme('colors.merah[700]'),
'--tw-prose-code': theme('colors.merah[900]'),
'--tw-prose-pre-code': theme('colors.merah[100]'),
'--tw-prose-pre-bg': theme('colors.merah[900]'),
'--tw-prose-th-borders': theme('colors.merah[300]'),
'--tw-prose-td-borders': theme('colors.merah[200]'),
'--tw-prose-invert-body': theme('colors.merah[200]'),
'--tw-prose-invert-headings': theme('colors.white'),
'--tw-prose-invert-lead': theme('colors.merah[300]'),
'--tw-prose-invert-links': theme('colors.white'),
'--tw-prose-invert-bold': theme('colors.white'),
'--tw-prose-invert-counters': theme('colors.merah[400]'),
'--tw-prose-invert-bullets': theme('colors.merah[600]'),
'--tw-prose-invert-hr': theme('colors.merah[700]'),
'--tw-prose-invert-quotes': theme('colors.merah[100]'),
'--tw-prose-invert-quote-borders': theme('colors.merah[700]'),
'--tw-prose-invert-captions': theme('colors.merah[400]'),
'--tw-prose-invert-code': theme('colors.white'),
'--tw-prose-invert-pre-code': theme('colors.merah[300]'),
'--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)',
'--tw-prose-invert-th-borders': theme('colors.merah[600]'),
'--tw-prose-invert-td-borders': theme('colors.merah[700]'),
},
},
gelap: {
css: {
'--tw-prose-body': theme('colors.gelap[800]'),
'--tw-prose-headings': theme('colors.gelap[900]'),
'--tw-prose-lead': theme('colors.gelap[700]'),
'--tw-prose-links': theme('colors.gelap[900]'),
'--tw-prose-bold': theme('colors.gelap[900]'),
'--tw-prose-counters': theme('colors.gelap[600]'),
'--tw-prose-bullets': theme('colors.gelap[400]'),
'--tw-prose-hr': theme('colors.gelap[300]'),
'--tw-prose-quotes': theme('colors.gelap[900]'),
'--tw-prose-quote-borders': theme('colors.gelap[300]'),
'--tw-prose-captions': theme('colors.gelap[700]'),
'--tw-prose-code': theme('colors.gelap[900]'),
'--tw-prose-pre-code': theme('colors.gelap[100]'),
'--tw-prose-pre-bg': theme('colors.gelap[900]'),
'--tw-prose-th-borders': theme('colors.gelap[300]'),
'--tw-prose-td-borders': theme('colors.gelap[200]'),
'--tw-prose-invert-body': theme('colors.gelap[200]'),
'--tw-prose-invert-headings': theme('colors.white'),
'--tw-prose-invert-lead': theme('colors.gelap[300]'),
'--tw-prose-invert-links': theme('colors.white'),
'--tw-prose-invert-bold': theme('colors.white'),
'--tw-prose-invert-counters': theme('colors.gelap[400]'),
'--tw-prose-invert-bullets': theme('colors.gelap[600]'),
'--tw-prose-invert-hr': theme('colors.gelap[700]'),
'--tw-prose-invert-quotes': theme('colors.gelap[100]'),
'--tw-prose-invert-quote-borders': theme('colors.gelap[700]'),
'--tw-prose-invert-captions': theme('colors.gelap[400]'),
'--tw-prose-invert-code': theme('colors.white'),
'--tw-prose-invert-pre-code': theme('colors.gelap[300]'),
'--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)',
'--tw-prose-invert-th-borders': theme('colors.gelap[600]'),
'--tw-prose-invert-td-borders': theme('colors.gelap[700]'),
},
},
}),
},
},
corePlugins: {
aspectRatio: false,
},
plugins: [
plugin(({ addComponents, theme }: { addComponents: any, theme: any }) => {
addComponents({
'.headline': {},
'.subheadline': {},
'.cardHover': {},
})
}),
],
content: [
'./components/**/*.{js,vue,ts}',
'./layouts/**/*.vue',
'./pages/**/*.vue',
'./plugins/**/*.{js,ts}',
'./nuxt.config.{js,ts}',
'./app.vue',
'./content/**/*.md',
],
}