@@ -113,118 +113,6 @@ For example, we use the following config by default on the Qwik UI docs:
113
113
}
114
114
```
115
115
116
- ### Step 3: Modify your tailwind.config.js file
117
-
118
- Finally, you need to modify your ` tailwind.config.js ` file:
119
-
120
- ``` tsx
121
- const { join } = require (' path' );
122
- const plugin = require (' tailwindcss/plugin' );
123
-
124
- /** @type {import('tailwindcss').Config} */
125
-
126
- module .exports = {
127
- content: [join (__dirname , ' src/**/*.{js,ts,jsx,tsx,mdx}' )],
128
- plugins: [
129
- require (' tailwindcss-animate' ),
130
- plugin (function ({ addUtilities }) {
131
- addUtilities ({
132
- ' .press' : {
133
- transform: ' var(--transform-press)' ,
134
- },
135
- });
136
- }),
137
- ],
138
- darkMode: ' class' ,
139
- theme: {
140
- extend: {
141
- colors: {
142
- border: ' oklch(from var(--border) l c h)' ,
143
- input: ' oklch(from var(--input) l c h)' ,
144
- ring: ' oklch(from var(--ring) l c h)' ,
145
- background: ' oklch(from var(--background) l c h)' ,
146
- foreground: ' oklch(from var(--foreground) l c h)' ,
147
- primary: {
148
- DEFAULT: ' oklch(from var(--primary) l c h)' ,
149
- foreground: ' oklch(from var(--primary-foreground) l c h)' ,
150
- },
151
- secondary: {
152
- DEFAULT: ' oklch(from var(--secondary) l c h)' ,
153
- foreground: ' oklch(from var(--secondary-foreground) l c h)' ,
154
- },
155
- alert: {
156
- DEFAULT: ' oklch(from var(--alert) l c h)' ,
157
- foreground: ' oklch(from var(--alert-foreground) l c h)' ,
158
- },
159
- muted: {
160
- DEFAULT: ' oklch(from var(--muted) l c h)' ,
161
- foreground: ' oklch(from var(--muted-foreground) l c h)' ,
162
- },
163
- accent: {
164
- DEFAULT: ' oklch(from var(--accent) l c h)' ,
165
- foreground: ' oklch(from var(--accent-foreground) l c h)' ,
166
- },
167
- card: {
168
- DEFAULT: ' oklch(from var(--card) l c h)' ,
169
- foreground: ' oklch(from var(--card-foreground) l c h)' ,
170
- },
171
- popover: {
172
- DEFAULT: ' oklch(from var(--popover) l c h)' ,
173
- foreground: ' oklch(from var(--popover-foreground) l c h)' ,
174
- },
175
- },
176
- borderRadius: {
177
- base: ' var(--border-radius)' ,
178
- sm: ' calc(var(--border-radius) + 0.125rem)' ,
179
- DEFAULT: ' calc(var(--border-radius) + 0.25rem)' ,
180
- md: ' calc(var(--border-radius) + 0.375rem)' ,
181
- lg: ' calc(var(--border-radius) + 0.5rem)' ,
182
- xl: ' calc(var(--border-radius) + 0.75rem)' ,
183
- ' 2xl' : ' calc(var(--border-radius) + 1rem)' ,
184
- ' 3xl' : ' calc(var(--border-radius) + 1.5rem)' ,
185
- },
186
- borderWidth: {
187
- base: ' var(--border-width)' ,
188
- DEFAULT: ' calc(var(--border-width) + 1px)' ,
189
- 2 : ' calc(var(--border-width) + 2px)' ,
190
- 4 : ' calc(var(--border-width) + 4px)' ,
191
- 8 : ' calc(var(--border-width) + 8px)' ,
192
- },
193
- boxShadow: {
194
- base: ' var(--shadow-base)' ,
195
- sm: ' var(--shadow-sm)' ,
196
- DEFAULT: ' var(--shadow)' ,
197
- md: ' var(--shadow-md)' ,
198
- lg: ' var(--shadow-lg)' ,
199
- xl: ' var(--shadow-xl)' ,
200
- ' 2xl' : ' var(--shadow-2xl)' ,
201
- inner: ' var(--shadow-inner)' ,
202
- },
203
- strokeWidth: {
204
- 0 : ' 0' ,
205
- base: ' var(--stroke-width)' ,
206
- 1 : ' calc(var(--stroke-width) + 1px)' ,
207
- 2 : ' calc(var(--stroke-width) + 2px)' ,
208
- },
209
- animation: {
210
- ' accordion-up' : ' collapsible-up 0.2s ease-out 0s 1 normal forwards' ,
211
- ' accordion-down' : ' collapsible-down 0.2s ease-out 0s 1 normal forwards' ,
212
- },
213
- keyframes: {
214
- ' collapsible-down' : {
215
- from: { height: ' 0' },
216
- to: { height: ' var(--qwikui-collapsible-content-height)' },
217
- },
218
- ' collapsible-up' : {
219
- from: { height: ' var(--qwikui-collapsible-content-height)' },
220
- to: { height: ' 0' },
221
- },
222
- },
223
- },
224
- },
225
- };
226
- ```
227
-
228
116
This might seem like a lot of configuration, but we believe it to be worth it because it allows changing your entire application's theme at the click of a button.
229
117
230
118
### Step 4: Find the components you need in the docs and copy/paste them into your project
0 commit comments