1 | /*
|
2 |
|
3 | Tailwind - The Utility-First CSS Framework
|
4 |
|
5 | A project by Adam Wathan (@adamwathan), Jonathan Reinink (@reinink),
|
6 | David Hemphill (@davidhemphill) and Steve Schoger (@steveschoger).
|
7 |
|
8 | Welcome to the Tailwind config file. This is where you can customize
|
9 | Tailwind specifically for your project. Don't be intimidated by the
|
10 | length of this file. It's really just a big JavaScript object and
|
11 | we've done our very best to explain each section.
|
12 |
|
13 | View the full documentation at https://tailwindcss.com.
|
14 |
|
15 |
|
16 | |-------------------------------------------------------------------------------
|
17 | | The default config
|
18 | |-------------------------------------------------------------------------------
|
19 | |
|
20 | | This variable contains the default Tailwind config. You don't have
|
21 | | to use it, but it can sometimes be helpful to have available. For
|
22 | | example, you may choose to merge your custom configuration
|
23 | | values with some of the Tailwind defaults.
|
24 | |
|
25 | */
|
26 |
|
27 | // let defaultConfig = require('tailwindcss/defaultConfig')()
|
28 |
|
29 |
|
30 | /*
|
31 | |-------------------------------------------------------------------------------
|
32 | | Colors https://tailwindcss.com/docs/colors
|
33 | |-------------------------------------------------------------------------------
|
34 | |
|
35 | | Here you can specify the colors used in your project. To get you started,
|
36 | | we've provided a generous palette of great looking colors that are perfect
|
37 | | for prototyping, but don't hesitate to change them for your project. You
|
38 | | own these colors, nothing will break if you change everything about them.
|
39 | |
|
40 | | We've used literal color names ("red", "blue", etc.) for the default
|
41 | | palette, but if you'd rather use functional names like "primary" and
|
42 | | "secondary", or even a numeric scale like "100" and "200", go for it.
|
43 | |
|
44 | */
|
45 |
|
46 | let colors = {
|
47 | 'transparent': 'transparent',
|
48 |
|
49 | 'black': '#22292f',
|
50 | 'grey-darkest': '#3d4852',
|
51 | 'grey-darker': '#606f7b',
|
52 | 'grey-dark': '#8795a1',
|
53 | 'grey': '#b8c2cc',
|
54 | 'grey-light': '#dae1e7',
|
55 | 'grey-lighter': '#f1f5f8',
|
56 | 'grey-lightest': '#f8fafc',
|
57 | 'white': '#ffffff',
|
58 |
|
59 | 'red-darkest': '#3b0d0c',
|
60 | 'red-darker': '#621b18',
|
61 | 'red-dark': '#cc1f1a',
|
62 | 'red': '#e3342f',
|
63 | 'red-light': '#ef5753',
|
64 | 'red-lighter': '#f9acaa',
|
65 | 'red-lightest': '#fcebea',
|
66 |
|
67 | 'orange-darkest': '#462a16',
|
68 | 'orange-darker': '#613b1f',
|
69 | 'orange-dark': '#de751f',
|
70 | 'orange': '#f6993f',
|
71 | 'orange-light': '#faad63',
|
72 | 'orange-lighter': '#fcd9b6',
|
73 | 'orange-lightest': '#fff5eb',
|
74 |
|
75 | 'yellow-darkest': '#453411',
|
76 | 'yellow-darker': '#684f1d',
|
77 | 'yellow-dark': '#f2d024',
|
78 | 'yellow': '#ffed4a',
|
79 | 'yellow-light': '#fff382',
|
80 | 'yellow-lighter': '#fff9c2',
|
81 | 'yellow-lightest': '#fcfbeb',
|
82 |
|
83 | 'green-darkest': '#0f2f21',
|
84 | 'green-darker': '#1a4731',
|
85 | 'green-dark': '#1f9d55',
|
86 | 'green': '#38c172',
|
87 | 'green-light': '#51d88a',
|
88 | 'green-lighter': '#a2f5bf',
|
89 | 'green-lightest': '#e3fcec',
|
90 |
|
91 | 'teal-darkest': '#0d3331',
|
92 | 'teal-darker': '#20504f',
|
93 | 'teal-dark': '#38a89d',
|
94 | 'teal': '#4dc0b5',
|
95 | 'teal-light': '#64d5ca',
|
96 | 'teal-lighter': '#a0f0ed',
|
97 | 'teal-lightest': '#e8fffe',
|
98 |
|
99 | 'blue-darkest': '#12283a',
|
100 | 'blue-darker': '#1c3d5a',
|
101 | 'blue-dark': '#2779bd',
|
102 | 'blue': '#3490dc',
|
103 | 'blue-light': '#6cb2eb',
|
104 | 'blue-lighter': '#bcdefa',
|
105 | 'blue-lightest': '#eff8ff',
|
106 |
|
107 | 'indigo-darkest': '#191e38',
|
108 | 'indigo-darker': '#2f365f',
|
109 | 'indigo-dark': '#5661b3',
|
110 | 'indigo': '#6574cd',
|
111 | 'indigo-light': '#7886d7',
|
112 | 'indigo-lighter': '#b2b7ff',
|
113 | 'indigo-lightest': '#e6e8ff',
|
114 |
|
115 | 'purple-darkest': '#21183c',
|
116 | 'purple-darker': '#382b5f',
|
117 | 'purple-dark': '#794acf',
|
118 | 'purple': '#9561e2',
|
119 | 'purple-light': '#a779e9',
|
120 | 'purple-lighter': '#d6bbfc',
|
121 | 'purple-lightest': '#f3ebff',
|
122 |
|
123 | 'pink-darkest': '#451225',
|
124 | 'pink-darker': '#6f213f',
|
125 | 'pink-dark': '#eb5286',
|
126 | 'pink': '#f66d9b',
|
127 | 'pink-light': '#fa7ea8',
|
128 | 'pink-lighter': '#ffbbca',
|
129 | 'pink-lightest': '#ffebef',
|
130 | }
|
131 |
|
132 | module.exports = {
|
133 |
|
134 | /*
|
135 | |-----------------------------------------------------------------------------
|
136 | | Colors https://tailwindcss.com/docs/colors
|
137 | |-----------------------------------------------------------------------------
|
138 | |
|
139 | | The color palette defined above is also assigned to the "colors" key of
|
140 | | your Tailwind config. This makes it easy to access them in your CSS
|
141 | | using Tailwind's config helper. For example:
|
142 | |
|
143 | | .error { color: config('colors.red') }
|
144 | |
|
145 | */
|
146 |
|
147 | colors: colors,
|
148 |
|
149 |
|
150 | /*
|
151 | |-----------------------------------------------------------------------------
|
152 | | Screens https://tailwindcss.com/docs/responsive-design
|
153 | |-----------------------------------------------------------------------------
|
154 | |
|
155 | | Screens in Tailwind are translated to CSS media queries. They define the
|
156 | | responsive breakpoints for your project. By default Tailwind takes a
|
157 | | "mobile first" approach, where each screen size represents a minimum
|
158 | | viewport width. Feel free to have as few or as many screens as you
|
159 | | want, naming them in whatever way you'd prefer for your project.
|
160 | |
|
161 | | Tailwind also allows for more complex screen definitions, which can be
|
162 | | useful in certain situations. Be sure to see the full responsive
|
163 | | documentation for a complete list of options.
|
164 | |
|
165 | | Class name: .{screen}:{utility}
|
166 | |
|
167 | */
|
168 |
|
169 | screens: {
|
170 | 'sm': '576px',
|
171 | 'md': '768px',
|
172 | 'lg': '992px',
|
173 | 'xl': '1200px',
|
174 | },
|
175 |
|
176 |
|
177 | /*
|
178 | |-----------------------------------------------------------------------------
|
179 | | Fonts https://tailwindcss.com/docs/fonts
|
180 | |-----------------------------------------------------------------------------
|
181 | |
|
182 | | Here is where you define your project's font stack, or font families.
|
183 | | Keep in mind that Tailwind doesn't actually load any fonts for you.
|
184 | | If you're using custom fonts you'll need to import them prior to
|
185 | | defining them here.
|
186 | |
|
187 | | By default we provide a native font stack that works remarkably well on
|
188 | | any device or OS you're using, since it just uses the default fonts
|
189 | | provided by the platform.
|
190 | |
|
191 | | Class name: .font-{name}
|
192 | | CSS property: font-family
|
193 | |
|
194 | */
|
195 |
|
196 | fonts: {
|
197 | 'sans': [
|
198 | 'system-ui',
|
199 | 'BlinkMacSystemFont',
|
200 | '-apple-system',
|
201 | 'Segoe UI',
|
202 | 'Roboto',
|
203 | 'Oxygen',
|
204 | 'Ubuntu',
|
205 | 'Cantarell',
|
206 | 'Fira Sans',
|
207 | 'Droid Sans',
|
208 | 'Helvetica Neue',
|
209 | 'sans-serif',
|
210 | ],
|
211 | 'serif': [
|
212 | 'Constantia',
|
213 | 'Lucida Bright',
|
214 | 'Lucidabright',
|
215 | 'Lucida Serif',
|
216 | 'Lucida',
|
217 | 'DejaVu Serif',
|
218 | 'Bitstream Vera Serif',
|
219 | 'Liberation Serif',
|
220 | 'Georgia',
|
221 | 'serif',
|
222 | ],
|
223 | 'mono': [
|
224 | 'Menlo',
|
225 | 'Monaco',
|
226 | 'Consolas',
|
227 | 'Liberation Mono',
|
228 | 'Courier New',
|
229 | 'monospace',
|
230 | ],
|
231 | },
|
232 |
|
233 |
|
234 | /*
|
235 | |-----------------------------------------------------------------------------
|
236 | | Text sizes https://tailwindcss.com/docs/text-sizing
|
237 | |-----------------------------------------------------------------------------
|
238 | |
|
239 | | Here is where you define your text sizes. Name these in whatever way
|
240 | | makes the most sense to you. We use size names by default, but
|
241 | | you're welcome to use a numeric scale or even something else
|
242 | | entirely.
|
243 | |
|
244 | | By default Tailwind uses the "rem" unit type for most measurements.
|
245 | | This allows you to set a root font size which all other sizes are
|
246 | | then based on. That said, you are free to use whatever units you
|
247 | | prefer, be it rems, ems, pixels or other.
|
248 | |
|
249 | | Class name: .text-{size}
|
250 | | CSS property: font-size
|
251 | |
|
252 | */
|
253 |
|
254 | textSizes: {
|
255 | 'xs': '.75rem', // 12px
|
256 | 'sm': '.875rem', // 14px
|
257 | 'base': '1rem', // 16px
|
258 | 'lg': '1.125rem', // 18px
|
259 | 'xl': '1.25rem', // 20px
|
260 | '2xl': '1.5rem', // 24px
|
261 | '3xl': '1.875rem', // 30px
|
262 | '4xl': '2.25rem', // 36px
|
263 | '5xl': '3rem', // 48px
|
264 | },
|
265 |
|
266 |
|
267 | /*
|
268 | |-----------------------------------------------------------------------------
|
269 | | Font weights https://tailwindcss.com/docs/font-weight
|
270 | |-----------------------------------------------------------------------------
|
271 | |
|
272 | | Here is where you define your font weights. We've provided a list of
|
273 | | common font weight names with their respective numeric scale values
|
274 | | to get you started. It's unlikely that your project will require
|
275 | | all of these, so we recommend removing those you don't need.
|
276 | |
|
277 | | Class name: .font-{weight}
|
278 | | CSS property: font-weight
|
279 | |
|
280 | */
|
281 |
|
282 | fontWeights: {
|
283 | 'hairline': 100,
|
284 | 'thin': 200,
|
285 | 'light': 300,
|
286 | 'normal': 400,
|
287 | 'medium': 500,
|
288 | 'semibold': 600,
|
289 | 'bold': 700,
|
290 | 'extrabold': 800,
|
291 | 'black': 900,
|
292 | },
|
293 |
|
294 |
|
295 | /*
|
296 | |-----------------------------------------------------------------------------
|
297 | | Leading (line height) https://tailwindcss.com/docs/line-height
|
298 | |-----------------------------------------------------------------------------
|
299 | |
|
300 | | Here is where you define your line height values, or as we call
|
301 | | them in Tailwind, leadings.
|
302 | |
|
303 | | Class name: .leading-{size}
|
304 | | CSS property: line-height
|
305 | |
|
306 | */
|
307 |
|
308 | leading: {
|
309 | 'none': 1,
|
310 | 'tight': 1.25,
|
311 | 'normal': 1.5,
|
312 | 'loose': 2,
|
313 | },
|
314 |
|
315 |
|
316 | /*
|
317 | |-----------------------------------------------------------------------------
|
318 | | Tracking (letter spacing) https://tailwindcss.com/docs/letter-spacing
|
319 | |-----------------------------------------------------------------------------
|
320 | |
|
321 | | Here is where you define your letter spacing values, or as we call
|
322 | | them in Tailwind, tracking.
|
323 | |
|
324 | | Class name: .tracking-{size}
|
325 | | CSS property: letter-spacing
|
326 | |
|
327 | */
|
328 |
|
329 | tracking: {
|
330 | 'tight': '-0.05em',
|
331 | 'normal': '0',
|
332 | 'wide': '0.05em',
|
333 | },
|
334 |
|
335 |
|
336 | /*
|
337 | |-----------------------------------------------------------------------------
|
338 | | Text colors https://tailwindcss.com/docs/text-color
|
339 | |-----------------------------------------------------------------------------
|
340 | |
|
341 | | Here is where you define your text colors. By default these use the
|
342 | | color palette we defined above, however you're welcome to set these
|
343 | | independently if that makes sense for your project.
|
344 | |
|
345 | | Class name: .text-{color}
|
346 | | CSS property: color
|
347 | |
|
348 | */
|
349 |
|
350 | textColors: colors,
|
351 |
|
352 |
|
353 | /*
|
354 | |-----------------------------------------------------------------------------
|
355 | | Background colors https://tailwindcss.com/docs/background-color
|
356 | |-----------------------------------------------------------------------------
|
357 | |
|
358 | | Here is where you define your background colors. By default these use
|
359 | | the color palette we defined above, however you're welcome to set
|
360 | | these independently if that makes sense for your project.
|
361 | |
|
362 | | Class name: .bg-{color}
|
363 | | CSS property: background-color
|
364 | |
|
365 | */
|
366 |
|
367 | backgroundColors: colors,
|
368 |
|
369 |
|
370 | /*
|
371 | |-----------------------------------------------------------------------------
|
372 | | Background sizes https://tailwindcss.com/docs/background-size
|
373 | |-----------------------------------------------------------------------------
|
374 | |
|
375 | | Here is where you define your background sizes. We provide some common
|
376 | | values that are useful in most projects, but feel free to add other sizes
|
377 | | that are specific to your project here as well.
|
378 | |
|
379 | | Class name: .bg-{size}
|
380 | | CSS property: background-size
|
381 | |
|
382 | */
|
383 |
|
384 | backgroundSize: {
|
385 | 'auto': 'auto',
|
386 | 'cover': 'cover',
|
387 | 'contain': 'contain',
|
388 | },
|
389 |
|
390 |
|
391 | /*
|
392 | |-----------------------------------------------------------------------------
|
393 | | Border widths https://tailwindcss.com/docs/border-width
|
394 | |-----------------------------------------------------------------------------
|
395 | |
|
396 | | Here is where you define your border widths. Take note that border
|
397 | | widths require a special "default" value set as well. This is the
|
398 | | width that will be used when you do not specify a border width.
|
399 | |
|
400 | | Class name: .border{-side?}{-width?}
|
401 | | CSS property: border-width
|
402 | |
|
403 | */
|
404 |
|
405 | borderWidths: {
|
406 | default: '1px',
|
407 | '0': '0',
|
408 | '2': '2px',
|
409 | '4': '4px',
|
410 | '8': '8px',
|
411 | },
|
412 |
|
413 |
|
414 | /*
|
415 | |-----------------------------------------------------------------------------
|
416 | | Border colors https://tailwindcss.com/docs/border-color
|
417 | |-----------------------------------------------------------------------------
|
418 | |
|
419 | | Here is where you define your border colors. By default these use the
|
420 | | color palette we defined above, however you're welcome to set these
|
421 | | independently if that makes sense for your project.
|
422 | |
|
423 | | Take note that border colors require a special "default" value set
|
424 | | as well. This is the color that will be used when you do not
|
425 | | specify a border color.
|
426 | |
|
427 | | Class name: .border-{color}
|
428 | | CSS property: border-color
|
429 | |
|
430 | */
|
431 |
|
432 | borderColors: global.Object.assign({ default: colors['grey-light'] }, colors),
|
433 |
|
434 |
|
435 | /*
|
436 | |-----------------------------------------------------------------------------
|
437 | | Border radius https://tailwindcss.com/docs/border-radius
|
438 | |-----------------------------------------------------------------------------
|
439 | |
|
440 | | Here is where you define your border radius values. If a `default` radius
|
441 | | is provided, it will be made available as the non-suffixed `.rounded`
|
442 | | utility.
|
443 | |
|
444 | | If your scale includes a `0` value to reset already rounded corners, it's
|
445 | | a good idea to put it first so other values are able to override it.
|
446 | |
|
447 | | Class name: .rounded{-side?}{-size?}
|
448 | | CSS property: border-radius
|
449 | |
|
450 | */
|
451 |
|
452 | borderRadius: {
|
453 | 'none': '0',
|
454 | 'sm': '.125rem',
|
455 | default: '.25rem',
|
456 | 'lg': '.5rem',
|
457 | 'full': '9999px',
|
458 | },
|
459 |
|
460 |
|
461 | /*
|
462 | |-----------------------------------------------------------------------------
|
463 | | Width https://tailwindcss.com/docs/width
|
464 | |-----------------------------------------------------------------------------
|
465 | |
|
466 | | Here is where you define your width utility sizes. These can be
|
467 | | percentage based, pixels, rems, or any other units. By default
|
468 | | we provide a sensible rem based numeric scale, a percentage
|
469 | | based fraction scale, plus some other common use-cases. You
|
470 | | can, of course, modify these values as needed.
|
471 | |
|
472 | |
|
473 | | It's also worth mentioning that Tailwind automatically escapes
|
474 | | invalid CSS class name characters, which allows you to have
|
475 | | awesome classes like .w-2/3.
|
476 | |
|
477 | | Class name: .w-{size}
|
478 | | CSS property: width
|
479 | |
|
480 | */
|
481 |
|
482 | width: {
|
483 | 'auto': 'auto',
|
484 | 'px': '1px',
|
485 | '1': '0.25rem',
|
486 | '2': '0.5rem',
|
487 | '3': '0.75rem',
|
488 | '4': '1rem',
|
489 | '5': '1.25rem',
|
490 | '6': '1.5rem',
|
491 | '8': '2rem',
|
492 | '10': '2.5rem',
|
493 | '12': '3rem',
|
494 | '16': '4rem',
|
495 | '24': '6rem',
|
496 | '32': '8rem',
|
497 | '48': '12rem',
|
498 | '64': '16rem',
|
499 | '1/2': '50%',
|
500 | '1/3': '33.33333%',
|
501 | '2/3': '66.66667%',
|
502 | '1/4': '25%',
|
503 | '3/4': '75%',
|
504 | '1/5': '20%',
|
505 | '2/5': '40%',
|
506 | '3/5': '60%',
|
507 | '4/5': '80%',
|
508 | '1/6': '16.66667%',
|
509 | '5/6': '83.33333%',
|
510 | 'full': '100%',
|
511 | 'screen': '100vw',
|
512 | },
|
513 |
|
514 |
|
515 | /*
|
516 | |-----------------------------------------------------------------------------
|
517 | | Height https://tailwindcss.com/docs/height
|
518 | |-----------------------------------------------------------------------------
|
519 | |
|
520 | | Here is where you define your height utility sizes. These can be
|
521 | | percentage based, pixels, rems, or any other units. By default
|
522 | | we provide a sensible rem based numeric scale plus some other
|
523 | | common use-cases. You can, of course, modify these values as
|
524 | | needed.
|
525 | |
|
526 | | Class name: .h-{size}
|
527 | | CSS property: height
|
528 | |
|
529 | */
|
530 |
|
531 | height: {
|
532 | 'auto': 'auto',
|
533 | 'px': '1px',
|
534 | '1': '0.25rem',
|
535 | '2': '0.5rem',
|
536 | '3': '0.75rem',
|
537 | '4': '1rem',
|
538 | '5': '1.25rem',
|
539 | '6': '1.5rem',
|
540 | '8': '2rem',
|
541 | '10': '2.5rem',
|
542 | '12': '3rem',
|
543 | '16': '4rem',
|
544 | '24': '6rem',
|
545 | '32': '8rem',
|
546 | '48': '12rem',
|
547 | '64': '16rem',
|
548 | 'full': '100%',
|
549 | 'screen': '100vh',
|
550 | },
|
551 |
|
552 |
|
553 | /*
|
554 | |-----------------------------------------------------------------------------
|
555 | | Minimum width https://tailwindcss.com/docs/min-width
|
556 | |-----------------------------------------------------------------------------
|
557 | |
|
558 | | Here is where you define your minimum width utility sizes. These can
|
559 | | be percentage based, pixels, rems, or any other units. We provide a
|
560 | | couple common use-cases by default. You can, of course, modify
|
561 | | these values as needed.
|
562 | |
|
563 | | Class name: .min-w-{size}
|
564 | | CSS property: min-width
|
565 | |
|
566 | */
|
567 |
|
568 | minWidth: {
|
569 | '0': '0',
|
570 | 'full': '100%',
|
571 | },
|
572 |
|
573 |
|
574 | /*
|
575 | |-----------------------------------------------------------------------------
|
576 | | Minimum height https://tailwindcss.com/docs/min-height
|
577 | |-----------------------------------------------------------------------------
|
578 | |
|
579 | | Here is where you define your minimum height utility sizes. These can
|
580 | | be percentage based, pixels, rems, or any other units. We provide a
|
581 | | few common use-cases by default. You can, of course, modify these
|
582 | | values as needed.
|
583 | |
|
584 | | Class name: .min-h-{size}
|
585 | | CSS property: min-height
|
586 | |
|
587 | */
|
588 |
|
589 | minHeight: {
|
590 | '0': '0',
|
591 | 'full': '100%',
|
592 | 'screen': '100vh',
|
593 | },
|
594 |
|
595 |
|
596 | /*
|
597 | |-----------------------------------------------------------------------------
|
598 | | Maximum width https://tailwindcss.com/docs/max-width
|
599 | |-----------------------------------------------------------------------------
|
600 | |
|
601 | | Here is where you define your maximum width utility sizes. These can
|
602 | | be percentage based, pixels, rems, or any other units. By default
|
603 | | we provide a sensible rem based scale and a "full width" size,
|
604 | | which is basically a reset utility. You can, of course,
|
605 | | modify these values as needed.
|
606 | |
|
607 | | Class name: .max-w-{size}
|
608 | | CSS property: max-width
|
609 | |
|
610 | */
|
611 |
|
612 | maxWidth: {
|
613 | 'xs': '20rem',
|
614 | 'sm': '30rem',
|
615 | 'md': '40rem',
|
616 | 'lg': '50rem',
|
617 | 'xl': '60rem',
|
618 | '2xl': '70rem',
|
619 | '3xl': '80rem',
|
620 | '4xl': '90rem',
|
621 | '5xl': '100rem',
|
622 | 'full': '100%',
|
623 | },
|
624 |
|
625 |
|
626 | /*
|
627 | |-----------------------------------------------------------------------------
|
628 | | Maximum height https://tailwindcss.com/docs/max-height
|
629 | |-----------------------------------------------------------------------------
|
630 | |
|
631 | | Here is where you define your maximum height utility sizes. These can
|
632 | | be percentage based, pixels, rems, or any other units. We provide a
|
633 | | couple common use-cases by default. You can, of course, modify
|
634 | | these values as needed.
|
635 | |
|
636 | | Class name: .max-h-{size}
|
637 | | CSS property: max-height
|
638 | |
|
639 | */
|
640 |
|
641 | maxHeight: {
|
642 | 'full': '100%',
|
643 | 'screen': '100vh',
|
644 | },
|
645 |
|
646 |
|
647 | /*
|
648 | |-----------------------------------------------------------------------------
|
649 | | Padding https://tailwindcss.com/docs/padding
|
650 | |-----------------------------------------------------------------------------
|
651 | |
|
652 | | Here is where you define your padding utility sizes. These can be
|
653 | | percentage based, pixels, rems, or any other units. By default we
|
654 | | provide a sensible rem based numeric scale plus a couple other
|
655 | | common use-cases like "1px". You can, of course, modify these
|
656 | | values as needed.
|
657 | |
|
658 | | Class name: .p{side?}-{size}
|
659 | | CSS property: padding
|
660 | |
|
661 | */
|
662 |
|
663 | padding: {
|
664 | 'px': '1px',
|
665 | '0': '0',
|
666 | '1': '0.25rem',
|
667 | '2': '0.5rem',
|
668 | '3': '0.75rem',
|
669 | '4': '1rem',
|
670 | '5': '1.25rem',
|
671 | '6': '1.5rem',
|
672 | '8': '2rem',
|
673 | '10': '2.5rem',
|
674 | '12': '3rem',
|
675 | '16': '4rem',
|
676 | '20': '5rem',
|
677 | '24': '6rem',
|
678 | '32': '8rem',
|
679 | },
|
680 |
|
681 |
|
682 | /*
|
683 | |-----------------------------------------------------------------------------
|
684 | | Margin https://tailwindcss.com/docs/margin
|
685 | |-----------------------------------------------------------------------------
|
686 | |
|
687 | | Here is where you define your margin utility sizes. These can be
|
688 | | percentage based, pixels, rems, or any other units. By default we
|
689 | | provide a sensible rem based numeric scale plus a couple other
|
690 | | common use-cases like "1px". You can, of course, modify these
|
691 | | values as needed.
|
692 | |
|
693 | | Class name: .m{side?}-{size}
|
694 | | CSS property: margin
|
695 | |
|
696 | */
|
697 |
|
698 | margin: {
|
699 | 'auto': 'auto',
|
700 | 'px': '1px',
|
701 | '0': '0',
|
702 | '1': '0.25rem',
|
703 | '2': '0.5rem',
|
704 | '3': '0.75rem',
|
705 | '4': '1rem',
|
706 | '5': '1.25rem',
|
707 | '6': '1.5rem',
|
708 | '8': '2rem',
|
709 | '10': '2.5rem',
|
710 | '12': '3rem',
|
711 | '16': '4rem',
|
712 | '20': '5rem',
|
713 | '24': '6rem',
|
714 | '32': '8rem',
|
715 | },
|
716 |
|
717 |
|
718 | /*
|
719 | |-----------------------------------------------------------------------------
|
720 | | Negative margin https://tailwindcss.com/docs/negative-margin
|
721 | |-----------------------------------------------------------------------------
|
722 | |
|
723 | | Here is where you define your negative margin utility sizes. These can
|
724 | | be percentage based, pixels, rems, or any other units. By default we
|
725 | | provide matching values to the padding scale since these utilities
|
726 | | generally get used together. You can, of course, modify these
|
727 | | values as needed.
|
728 | |
|
729 | | Class name: .-m{side?}-{size}
|
730 | | CSS property: margin
|
731 | |
|
732 | */
|
733 |
|
734 | negativeMargin: {
|
735 | 'px': '1px',
|
736 | '0': '0',
|
737 | '1': '0.25rem',
|
738 | '2': '0.5rem',
|
739 | '3': '0.75rem',
|
740 | '4': '1rem',
|
741 | '5': '1.25rem',
|
742 | '6': '1.5rem',
|
743 | '8': '2rem',
|
744 | '10': '2.5rem',
|
745 | '12': '3rem',
|
746 | '16': '4rem',
|
747 | '20': '5rem',
|
748 | '24': '6rem',
|
749 | '32': '8rem',
|
750 | },
|
751 |
|
752 |
|
753 | /*
|
754 | |-----------------------------------------------------------------------------
|
755 | | Shadows https://tailwindcss.com/docs/shadows
|
756 | |-----------------------------------------------------------------------------
|
757 | |
|
758 | | Here is where you define your shadow utilities. As you can see from
|
759 | | the defaults we provide, it's possible to apply multiple shadows
|
760 | | per utility using comma separation.
|
761 | |
|
762 | | If a `default` shadow is provided, it will be made available as the non-
|
763 | | suffixed `.shadow` utility.
|
764 | |
|
765 | | Class name: .shadow-{size?}
|
766 | | CSS property: box-shadow
|
767 | |
|
768 | */
|
769 |
|
770 | shadows: {
|
771 | default: '0 2px 4px 0 rgba(0,0,0,0.10)',
|
772 | 'md': '0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08)',
|
773 | 'lg': '0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08)',
|
774 | 'inner': 'inset 0 2px 4px 0 rgba(0,0,0,0.06)',
|
775 | 'outline': '0 0 0 3px rgba(52,144,220,0.5)',
|
776 | 'none': 'none',
|
777 | },
|
778 |
|
779 |
|
780 | /*
|
781 | |-----------------------------------------------------------------------------
|
782 | | Z-index https://tailwindcss.com/docs/z-index
|
783 | |-----------------------------------------------------------------------------
|
784 | |
|
785 | | Here is where you define your z-index utility values. By default we
|
786 | | provide a sensible numeric scale. You can, of course, modify these
|
787 | | values as needed.
|
788 | |
|
789 | | Class name: .z-{index}
|
790 | | CSS property: z-index
|
791 | |
|
792 | */
|
793 |
|
794 | zIndex: {
|
795 | 'auto': 'auto',
|
796 | '0': 0,
|
797 | '10': 10,
|
798 | '20': 20,
|
799 | '30': 30,
|
800 | '40': 40,
|
801 | '50': 50,
|
802 | },
|
803 |
|
804 |
|
805 | /*
|
806 | |-----------------------------------------------------------------------------
|
807 | | Opacity https://tailwindcss.com/docs/opacity
|
808 | |-----------------------------------------------------------------------------
|
809 | |
|
810 | | Here is where you define your opacity utility values. By default we
|
811 | | provide a sensible numeric scale. You can, of course, modify these
|
812 | | values as needed.
|
813 | |
|
814 | | Class name: .opacity-{name}
|
815 | | CSS property: opacity
|
816 | |
|
817 | */
|
818 |
|
819 | opacity: {
|
820 | '0': '0',
|
821 | '25': '.25',
|
822 | '50': '.5',
|
823 | '75': '.75',
|
824 | '100': '1',
|
825 | },
|
826 |
|
827 |
|
828 | /*
|
829 | |-----------------------------------------------------------------------------
|
830 | | SVG fill https://tailwindcss.com/docs/svg
|
831 | |-----------------------------------------------------------------------------
|
832 | |
|
833 | | Here is where you define your SVG fill colors. By default we just provide
|
834 | | `fill-current` which sets the fill to the current text color. This lets you
|
835 | | specify a fill color using existing text color utilities and helps keep the
|
836 | | generated CSS file size down.
|
837 | |
|
838 | | Class name: .fill-{name}
|
839 | | CSS property: fill
|
840 | |
|
841 | */
|
842 |
|
843 | svgFill: {
|
844 | 'current': 'currentColor',
|
845 | },
|
846 |
|
847 |
|
848 | /*
|
849 | |-----------------------------------------------------------------------------
|
850 | | SVG stroke https://tailwindcss.com/docs/svg
|
851 | |-----------------------------------------------------------------------------
|
852 | |
|
853 | | Here is where you define your SVG stroke colors. By default we just provide
|
854 | | `stroke-current` which sets the stroke to the current text color. This lets
|
855 | | you specify a stroke color using existing text color utilities and helps
|
856 | | keep the generated CSS file size down.
|
857 | |
|
858 | | Class name: .stroke-{name}
|
859 | | CSS property: stroke
|
860 | |
|
861 | */
|
862 |
|
863 | svgStroke: {
|
864 | 'current': 'currentColor',
|
865 | },
|
866 |
|
867 |
|
868 | /*
|
869 | |-----------------------------------------------------------------------------
|
870 | | Modules https://tailwindcss.com/docs/configuration#modules
|
871 | |-----------------------------------------------------------------------------
|
872 | |
|
873 | | Here is where you control which modules are generated and what variants are
|
874 | | generated for each of those modules.
|
875 | |
|
876 | | Currently supported variants:
|
877 | | - responsive
|
878 | | - hover
|
879 | | - focus
|
880 | | - focus-within
|
881 | | - active
|
882 | | - group-hover
|
883 | |
|
884 | | To disable a module completely, use `false` instead of an array.
|
885 | |
|
886 | */
|
887 |
|
888 | modules: {
|
889 | appearance: ['responsive'],
|
890 | backgroundAttachment: ['responsive'],
|
891 | backgroundColors: ['responsive', 'hover', 'focus'],
|
892 | backgroundPosition: ['responsive'],
|
893 | backgroundRepeat: ['responsive'],
|
894 | backgroundSize: ['responsive'],
|
895 | borderCollapse: [],
|
896 | borderColors: ['responsive', 'hover', 'focus'],
|
897 | borderRadius: ['responsive'],
|
898 | borderStyle: ['responsive'],
|
899 | borderWidths: ['responsive'],
|
900 | cursor: ['responsive'],
|
901 | display: ['responsive'],
|
902 | flexbox: ['responsive'],
|
903 | float: ['responsive'],
|
904 | fonts: ['responsive'],
|
905 | fontWeights: ['responsive', 'hover', 'focus'],
|
906 | height: ['responsive'],
|
907 | leading: ['responsive'],
|
908 | lists: ['responsive'],
|
909 | margin: ['responsive'],
|
910 | maxHeight: ['responsive'],
|
911 | maxWidth: ['responsive'],
|
912 | minHeight: ['responsive'],
|
913 | minWidth: ['responsive'],
|
914 | negativeMargin: ['responsive'],
|
915 | objectFit: false,
|
916 | objectPosition: false,
|
917 | opacity: ['responsive'],
|
918 | outline: ['focus'],
|
919 | overflow: ['responsive'],
|
920 | padding: ['responsive'],
|
921 | pointerEvents: ['responsive'],
|
922 | position: ['responsive'],
|
923 | resize: ['responsive'],
|
924 | shadows: ['responsive', 'hover', 'focus'],
|
925 | svgFill: [],
|
926 | svgStroke: [],
|
927 | tableLayout: ['responsive'],
|
928 | textAlign: ['responsive'],
|
929 | textColors: ['responsive', 'hover', 'focus'],
|
930 | textSizes: ['responsive'],
|
931 | textStyle: ['responsive', 'hover', 'focus'],
|
932 | tracking: ['responsive'],
|
933 | userSelect: ['responsive'],
|
934 | verticalAlign: ['responsive'],
|
935 | visibility: ['responsive'],
|
936 | whitespace: ['responsive'],
|
937 | width: ['responsive'],
|
938 | zIndex: ['responsive'],
|
939 | },
|
940 |
|
941 |
|
942 | /*
|
943 | |-----------------------------------------------------------------------------
|
944 | | Plugins https://tailwindcss.com/docs/plugins
|
945 | |-----------------------------------------------------------------------------
|
946 | |
|
947 | | Here is where you can register any plugins you'd like to use in your
|
948 | | project. Tailwind's built-in `container` plugin is enabled by default to
|
949 | | give you a Bootstrap-style responsive container component out of the box.
|
950 | |
|
951 | | Be sure to view the complete plugin documentation to learn more about how
|
952 | | the plugin system works.
|
953 | |
|
954 | */
|
955 |
|
956 | plugins: [
|
957 | require('./plugins/container')({
|
958 | // center: true,
|
959 | // padding: '1rem',
|
960 | }),
|
961 | ],
|
962 |
|
963 |
|
964 | /*
|
965 | |-----------------------------------------------------------------------------
|
966 | | Advanced Options https://tailwindcss.com/docs/configuration#options
|
967 | |-----------------------------------------------------------------------------
|
968 | |
|
969 | | Here is where you can tweak advanced configuration options. We recommend
|
970 | | leaving these options alone unless you absolutely need to change them.
|
971 | |
|
972 | */
|
973 |
|
974 | options: {
|
975 | prefix: '',
|
976 | important: false,
|
977 | separator: ':',
|
978 | },
|
979 |
|
980 | }
|