/* Tailwind - The Utility-First CSS Framework A project by Adam Wathan (@adamwathan), Jonathan Reinink (@reinink), David Hemphill (@davidhemphill) and Steve Schoger (@steveschoger). Welcome to the Tailwind config file. This is where you can customize Tailwind specifically for your project. Don't be intimidated by the length of this file. It's really just a big JavaScript object and we've done our very best to explain each section. View the full documentation at https://tailwindcss.com. |------------------------------------------------------------------------------- | The default config |------------------------------------------------------------------------------- | | This variable contains the default Tailwind config. You don't have | to use it, but it can sometimes be helpful to have available. For | example, you may choose to merge your custom configuration | values with some of the Tailwind defaults. | */ // let defaultConfig = require('tailwindcss/defaultConfig')() /* |------------------------------------------------------------------------------- | Colors https://tailwindcss.com/docs/colors |------------------------------------------------------------------------------- | | Here you can specify the colors used in your project. To get you started, | we've provided a generous palette of great looking colors that are perfect | for prototyping, but don't hesitate to change them for your project. You | own these colors, nothing will break if you change everything about them. | | We've used literal color names ("red", "blue", etc.) for the default | palette, but if you'd rather use functional names like "primary" and | "secondary", or even a numeric scale like "100" and "200", go for it. | */ let colors = { 'transparent': 'transparent', 'black': 'hsl(210, 27%, 10%)', 'white': '#ffffff', 'basically-white': '#fafafb', // The design's primary colors. Splashes of color that should appear the most // within the UI and determine the overall look of the site. 'primary-50': 'hsl(202, 100%, 95%)', // lightest 'primary-100': 'hsl(204, 100%, 86%)', // lighter 'primary-200': 'hsl(206, 93%, 73%)', 'primary-300': 'hsl(208, 88%, 62%)', 'primary-400': 'hsl(210, 83%, 53%)', // light 'primary-500': 'hsl(212, 92%, 43%)', // base 'primary-600': 'hsl(214, 95%, 36%)', // dark 'primary-700': 'hsl(215, 96%, 32%)', 'primary-800': 'hsl(216, 98%, 25%)', // darker 'primary-900': 'hsl(218, 100%, 17%)', // darkest // Color used the most in the design and make up the majority of the UI. 'neutral-50': 'hsl(216, 33%, 97%)', 'neutral-100': 'hsl(214, 15%, 91%)', 'neutral-200': 'hsl(210, 16%, 82%)', 'neutral-300': 'hsl(211, 13%, 65%)', 'neutral-400': 'hsl(211, 10%, 53%)', 'neutral-500': 'hsl(211, 12%, 43%)', 'neutral-600': 'hsl(209, 14%, 37%)', 'neutral-700': 'hsl(209, 18%, 30%)', 'neutral-800': 'hsl(209, 20%, 25%)', 'neutral-900': 'hsl(210, 24%, 16%)', // Supporting colors used to make an element stand out or re-inforce error // states or trends. 'red-50': 'hsl(360, 100%, 95%)', 'red-100': 'hsl(360, 100%, 87%)', 'red-200': 'hsl(360, 100%, 80%)', 'red-300': 'hsl(360, 91%, 69%)', 'red-400': 'hsl(360, 83%, 62%)', 'red-500': 'hsl(356, 75%, 53%)', 'red-600': 'hsl(354, 85%, 44%)', 'red-700': 'hsl(352, 90%, 35%)', 'red-800': 'hsl(350, 94%, 28%)', 'red-900': 'hsl(348, 94%, 20%)', 'yellow-50': 'hsl(49, 100%, 96%)', 'yellow-100': 'hsl(48, 100%, 88%)', 'yellow-200': 'hsl(48, 95%, 76%)', 'yellow-300': 'hsl(48, 94%, 68%)', 'yellow-400': 'hsl(44, 92%, 63%)', 'yellow-500': 'hsl(42, 87%, 55%)', 'yellow-600': 'hsl(36, 77%, 49%)', 'yellow-700': 'hsl(29, 80%, 44%)', 'yellow-800': 'hsl(22, 82%, 39%)', 'yellow-900': 'hsl(15, 86%, 30%)', 'cyan-50': 'hsl(171, 82%, 94%)', 'cyan-100': 'hsl(172, 97%, 88%)', 'cyan-200': 'hsl(174, 96%, 78%)', 'cyan-300': 'hsl(176, 87%, 67%)', 'cyan-400': 'hsl(178, 78%, 57%)', 'cyan-500': 'hsl(180, 77%, 47%)', 'cyan-600': 'hsl(182, 85%, 39%)', 'cyan-700': 'hsl(184, 90%, 34%)', 'cyan-800': 'hsl(186, 91%, 29%)', 'cyan-900': 'hsl(188, 91%, 23%)', 'green-50': 'hsl(125, 65%, 93%)', 'green-100': 'hsl(127, 65%, 85%)', 'green-200': 'hsl(124, 63%, 74%)', 'green-300': 'hsl(123, 53%, 55%)', 'green-400': 'hsl(123, 57%, 45%)', 'green-500': 'hsl(122, 73%, 35%)', 'green-600': 'hsl(122, 80%, 29%)', 'green-700': 'hsl(125, 79%, 26%)', 'green-800': 'hsl(125, 86%, 20%)', 'green-900': 'hsl(125, 97%, 14%)', }; /* |------------------------------------------------------------------------------- | Sizes |------------------------------------------------------------------------------- | | Here you can specify the sizes that should be available to all of the height, | width, padding, and margin utilities. | */ let sizes = { 'auto': 'auto', '0': '0', 'px': '1px', '1': '0.25rem', '2': '0.5rem', '3': '0.75rem', '4': '1rem', '5': '1.25rem', '6': '1.5rem', '8': '2rem', '10': '2.5rem', '12': '3rem', '16': '4rem', '20': '5rem', '24': '6rem', '28': '7rem', '32': '8rem', '48': '12rem', '64': '16rem', '96': '24rem', '1/2': '50%', '1/3': '33.33333%', '2/3': '66.66667%', '1/4': '25%', '3/4': '75%', '1/5': '20%', '2/5': '40%', '3/5': '60%', '4/5': '80%', '1/6': '16.66667%', '5/6': '83.33333%', 'full': '100%', 'screen': '100vw', }; module.exports = { /* |----------------------------------------------------------------------------- | Colors https://tailwindcss.com/docs/colors |----------------------------------------------------------------------------- | | The color palette defined above is also assigned to the "colors" key of | your Tailwind config. This makes it easy to access them in your CSS | using Tailwind's config helper. For example: | | .error { color: config('colors.red') } | */ colors: colors, /* |----------------------------------------------------------------------------- | Screens https://tailwindcss.com/docs/responsive-design |----------------------------------------------------------------------------- | | Screens in Tailwind are translated to CSS media queries. They define the | responsive breakpoints for your project. By default Tailwind takes a | "mobile first" approach, where each screen size represents a minimum | viewport width. Feel free to have as few or as many screens as you | want, naming them in whatever way you'd prefer for your project. | | Tailwind also allows for more complex screen definitions, which can be | useful in certain situations. Be sure to see the full responsive | documentation for a complete list of options. | | Class name: .{screen}:{utility} | */ screens: { 'sm': '576px', 'md': '768px', 'lg': '992px', 'xl': '1200px', 'xsx': { 'max': '575px' }, 'smx': { 'max': '767px' }, 'mdx': { 'max': '991px' }, 'lgx': { 'max': '1999px' }, }, /* |----------------------------------------------------------------------------- | Fonts https://tailwindcss.com/docs/fonts |----------------------------------------------------------------------------- | | Here is where you define your project's font stack, or font families. | Keep in mind that Tailwind doesn't actually load any fonts for you. | If you're using custom fonts you'll need to import them prior to | defining them here. | | By default we provide a native font stack that works remarkably well on | any device or OS you're using, since it just uses the default fonts | provided by the platform. | | Class name: .font-{name} | */ fonts: { 'sans': [ 'Rubik', '-apple-system', 'BlinkMacSystemFont', '"Helvetica Neue"', '"Roboto"', 'system-ui', 'sans-serif', ], 'header': [ '"IBM Plex Sans"', '"Roboto"', 'system-ui', 'sans-serif', ], 'serif': [ 'Constantia', '"Lucida Bright"', 'Lucidabright', '"Lucida Serif"', 'Lucida', 'serif', ], 'mono': [ '"IBM Plex Mono"', '"Source Code Pro"', 'SourceCodePro', 'Menlo', 'Monaco', 'Consolas', 'monospace', ], }, /* |----------------------------------------------------------------------------- | Text sizes https://tailwindcss.com/docs/text-sizing |----------------------------------------------------------------------------- | | Here is where you define your text sizes. Name these in whatever way | makes the most sense to you. We use size names by default, but | you're welcome to use a numeric scale or even something else | entirely. | | By default Tailwind uses the "rem" unit type for most measurements. | This allows you to set a root font size which all other sizes are | then based on. That said, you are free to use whatever units you | prefer, be it rems, ems, pixels or other. | | Class name: .text-{size} | */ textSizes: { '2xs': '.625rem', 'xs': '.75rem', 'sm': '.875rem', 'base': '1rem', 'lg': '1.125rem', 'xl': '1.25rem', '2xl': '1.5rem', '3xl': '1.875rem', '4xl': '2.25rem', '5xl': '3rem', }, /* |----------------------------------------------------------------------------- | Font weights https://tailwindcss.com/docs/font-weight |----------------------------------------------------------------------------- | | Here is where you define your font weights. We've provided a list of | common font weight names with their respective numeric scale values | to get you started. It's unlikely that your project will require | all of these, so we recommend removing those you don't need. | | Class name: .font-{weight} | */ fontWeights: { 'hairline': 100, 'thin': 200, 'light': 300, 'normal': 400, 'medium': 500, 'semibold': 600, 'bold': 700, 'extrabold': 800, 'black': 900, }, /* |----------------------------------------------------------------------------- | Leading (line height) https://tailwindcss.com/docs/line-height |----------------------------------------------------------------------------- | | Here is where you define your line height values, or as we call | them in Tailwind, leadings. | | Class name: .leading-{size} | */ leading: { 'none': 1, 'tight': 1.25, 'snug': 1.375, 'normal': 1.5, 'relaxed': 1.625, 'loose': 2, }, /* |----------------------------------------------------------------------------- | Tracking (letter spacing) https://tailwindcss.com/docs/letter-spacing |----------------------------------------------------------------------------- | | Here is where you define your letter spacing values, or as we call | them in Tailwind, tracking. | | Class name: .tracking-{size} | */ tracking: { 'tight': '-0.05em', 'normal': '0', 'wide': '0.05em', }, /* |----------------------------------------------------------------------------- | Text colors https://tailwindcss.com/docs/text-color |----------------------------------------------------------------------------- | | Here is where you define your text colors. By default these use the | color palette we defined above, however you're welcome to set these | independently if that makes sense for your project. | | Class name: .text-{color} | */ textColors: colors, /* |----------------------------------------------------------------------------- | Background colors https://tailwindcss.com/docs/background-color |----------------------------------------------------------------------------- | | Here is where you define your background colors. By default these use | the color palette we defined above, however you're welcome to set | these independently if that makes sense for your project. | | Class name: .bg-{color} | */ backgroundColors: colors, /* |----------------------------------------------------------------------------- | Background sizes https://tailwindcss.com/docs/background-size |----------------------------------------------------------------------------- | | Here is where you define your background sizes. We provide some common | values that are useful in most projects, but feel free to add other sizes | that are specific to your project here as well. | | Class name: .bg-{size} | */ backgroundSize: { 'auto': 'auto', 'cover': 'cover', 'contain': 'contain', }, /* |----------------------------------------------------------------------------- | Border widths https://tailwindcss.com/docs/border-width |----------------------------------------------------------------------------- | | Here is where you define your border widths. Take note that border | widths require a special "default" value set as well. This is the | width that will be used when you do not specify a border width. | | Class name: .border{-side?}{-width?} | */ borderWidths: { default: '1px', '0': '0', '2': '2px', '3': '3px', '4': '4px', '8': '8px', }, /* |----------------------------------------------------------------------------- | Border colors https://tailwindcss.com/docs/border-color |----------------------------------------------------------------------------- | | Here is where you define your border colors. By default these use the | color palette we defined above, however you're welcome to set these | independently if that makes sense for your project. | | Take note that border colors require a special "default" value set | as well. This is the color that will be used when you do not | specify a border color. | | Class name: .border-{color} | */ borderColors: global.Object.assign({ default: colors['neutral-400'] }, colors), /* |----------------------------------------------------------------------------- | Border radius https://tailwindcss.com/docs/border-radius |----------------------------------------------------------------------------- | | Here is where you define your border radius values. If a `default` radius | is provided, it will be made available as the non-suffixed `.rounded` | utility. | | If your scale includes a `0` value to reset already rounded corners, it's | a good idea to put it first so other values are able to override it. | | Class name: .rounded{-side?}{-size?} | */ borderRadius: { 'none': '0', 'sm': '.125rem', default: '.25rem', 'lg': '.5rem', 'full': '9999px', }, /* |----------------------------------------------------------------------------- | Width https://tailwindcss.com/docs/width |----------------------------------------------------------------------------- | | Here is where you define your width utility sizes. These can be | percentage based, pixels, rems, or any other units. By default | we provide a sensible rem based numeric scale, a percentage | based fraction scale, plus some other common use-cases. You | can, of course, modify these values as needed. | | | It's also worth mentioning that Tailwind automatically escapes | invalid CSS class name characters, which allows you to have | awesome classes like .w-2/3. | | Class name: .w-{size} | */ width: { ...sizes }, /* |----------------------------------------------------------------------------- | Height https://tailwindcss.com/docs/height |----------------------------------------------------------------------------- | | Here is where you define your height utility sizes. These can be | percentage based, pixels, rems, or any other units. By default | we provide a sensible rem based numeric scale plus some other | common use-cases. You can, of course, modify these values as | needed. | | Class name: .h-{size} | */ height: { ...sizes }, /* |----------------------------------------------------------------------------- | Minimum width https://tailwindcss.com/docs/min-width |----------------------------------------------------------------------------- | | Here is where you define your minimum width utility sizes. These can | be percentage based, pixels, rems, or any other units. We provide a | couple common use-cases by default. You can, of course, modify | these values as needed. | | Class name: .min-w-{size} | */ minWidth: { ...sizes }, /* |----------------------------------------------------------------------------- | Minimum height https://tailwindcss.com/docs/min-height |----------------------------------------------------------------------------- | | Here is where you define your minimum height utility sizes. These can | be percentage based, pixels, rems, or any other units. We provide a | few common use-cases by default. You can, of course, modify these | values as needed. | | Class name: .min-h-{size} | */ minHeight: { ...sizes }, /* |----------------------------------------------------------------------------- | Maximum width https://tailwindcss.com/docs/max-width |----------------------------------------------------------------------------- | | Here is where you define your maximum width utility sizes. These can | be percentage based, pixels, rems, or any other units. By default | we provide a sensible rem based scale and a "full width" size, | which is basically a reset utility. You can, of course, | modify these values as needed. | | Class name: .max-w-{size} | */ maxWidth: { ...sizes }, /* |----------------------------------------------------------------------------- | Maximum height https://tailwindcss.com/docs/max-height |----------------------------------------------------------------------------- | | Here is where you define your maximum height utility sizes. These can | be percentage based, pixels, rems, or any other units. We provide a | couple common use-cases by default. You can, of course, modify | these values as needed. | | Class name: .max-h-{size} | */ maxHeight: { ...sizes }, /* |----------------------------------------------------------------------------- | Padding https://tailwindcss.com/docs/padding |----------------------------------------------------------------------------- | | Here is where you define your padding utility sizes. These can be | percentage based, pixels, rems, or any other units. By default we | provide a sensible rem based numeric scale plus a couple other | common use-cases like "1px". You can, of course, modify these | values as needed. | | Class name: .p{side?}-{size} | */ padding: { ...sizes }, /* |----------------------------------------------------------------------------- | Margin https://tailwindcss.com/docs/margin |----------------------------------------------------------------------------- | | Here is where you define your margin utility sizes. These can be | percentage based, pixels, rems, or any other units. By default we | provide a sensible rem based numeric scale plus a couple other | common use-cases like "1px". You can, of course, modify these | values as needed. | | Class name: .m{side?}-{size} | */ margin: { ...sizes }, /* |----------------------------------------------------------------------------- | Negative margin https://tailwindcss.com/docs/negative-margin |----------------------------------------------------------------------------- | | Here is where you define your negative margin utility sizes. These can | be percentage based, pixels, rems, or any other units. By default we | provide matching values to the padding scale since these utilities | generally get used together. You can, of course, modify these | values as needed. | | Class name: .-m{side?}-{size} | */ negativeMargin: { ...sizes }, /* |----------------------------------------------------------------------------- | Shadows https://tailwindcss.com/docs/shadows |----------------------------------------------------------------------------- | | Here is where you define your shadow utilities. As you can see from | the defaults we provide, it's possible to apply multiple shadows | per utility using comma separation. | | If a `default` shadow is provided, it will be made available as the non- | suffixed `.shadow` utility. | | Class name: .shadow-{size?} | */ shadows: { default: '0 2px 4px 0 rgba(0,0,0,0.10)', 'md': '0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08)', 'lg': '0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08)', 'inner': 'inset 0 2px 4px 0 rgba(0,0,0,0.06)', 'outline': '0 0 0 3px rgba(52,144,220,0.5)', 'none': 'none', }, /* |----------------------------------------------------------------------------- | Z-index https://tailwindcss.com/docs/z-index |----------------------------------------------------------------------------- | | Here is where you define your z-index utility values. By default we | provide a sensible numeric scale. You can, of course, modify these | values as needed. | | Class name: .z-{index} | */ zIndex: { 'auto': 'auto', '0': 0, '10': 10, '20': 20, '30': 30, '40': 40, '50': 50, }, /* |----------------------------------------------------------------------------- | Opacity https://tailwindcss.com/docs/opacity |----------------------------------------------------------------------------- | | Here is where you define your opacity utility values. By default we | provide a sensible numeric scale. You can, of course, modify these | values as needed. | | Class name: .opacity-{name} | */ opacity: { '0': '0', '25': '.25', '50': '.5', '75': '.75', '100': '1', }, /* |----------------------------------------------------------------------------- | SVG fill https://tailwindcss.com/docs/svg |----------------------------------------------------------------------------- | | Here is where you define your SVG fill colors. By default we just provide | `fill-current` which sets the fill to the current text color. This lets you | specify a fill color using existing text color utilities and helps keep the | generated CSS file size down. | | Class name: .fill-{name} | */ svgFill: { 'current': 'currentColor', }, /* |----------------------------------------------------------------------------- | SVG stroke https://tailwindcss.com/docs/svg |----------------------------------------------------------------------------- | | Here is where you define your SVG stroke colors. By default we just provide | `stroke-current` which sets the stroke to the current text color. This lets | you specify a stroke color using existing text color utilities and helps | keep the generated CSS file size down. | | Class name: .stroke-{name} | */ svgStroke: { 'current': 'currentColor', }, transitionDuration: { '75': '75ms', '100': '100ms', '150': '150ms', '250': '250ms', '500': '500ms', '750': '750ms', '1000': '1000ms', }, transitionTimingFunction: { 'linear': 'linear', 'in': 'cubic-bezier(0.4, 0, 1, 1)', 'out': 'cubic-bezier(0, 0, 0.2, 1)', 'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)', }, /* |----------------------------------------------------------------------------- | Modules https://tailwindcss.com/docs/configuration#modules |----------------------------------------------------------------------------- | | Here is where you control which modules are generated and what variants are | generated for each of those modules. | | Currently supported variants: | - responsive | - hover | - focus | - active | - group-hover | | To disable a module completely, use `false` instead of an array. | */ modules: { appearance: ['responsive'], backgroundAttachment: ['responsive'], backgroundColors: ['responsive', 'hover', 'focus'], backgroundPosition: ['responsive'], backgroundRepeat: ['responsive'], backgroundSize: ['responsive'], borderCollapse: [], borderColors: ['responsive', 'hover', 'focus'], borderRadius: ['responsive'], borderStyle: ['responsive'], borderWidths: ['responsive'], cursor: ['responsive'], display: ['responsive'], flexbox: ['responsive'], float: ['responsive'], fonts: ['responsive'], fontWeights: ['responsive', 'hover', 'focus'], height: ['responsive'], leading: ['responsive'], lists: ['responsive'], margin: ['responsive'], maxHeight: ['responsive'], maxWidth: ['responsive'], minHeight: ['responsive'], minWidth: ['responsive'], negativeMargin: ['responsive'], opacity: ['responsive'], outline: ['focus'], overflow: ['responsive'], padding: ['responsive'], pointerEvents: ['responsive'], position: ['responsive'], resize: ['responsive'], shadows: ['responsive', 'hover', 'focus'], svgFill: [], svgStroke: [], tableLayout: ['responsive'], textAlign: ['responsive'], textColors: ['responsive', 'hover', 'focus'], textSizes: ['responsive'], textStyle: ['responsive', 'hover', 'focus'], tracking: ['responsive'], userSelect: ['responsive'], verticalAlign: ['responsive'], visibility: ['responsive'], whitespace: ['responsive'], width: ['responsive'], zIndex: ['responsive'], }, /* |----------------------------------------------------------------------------- | Plugins https://tailwindcss.com/docs/plugins |----------------------------------------------------------------------------- | | Here is where you can register any plugins you'd like to use in your | project. Tailwind's built-in `container` plugin is enabled by default to | give you a Bootstrap-style responsive container component out of the box. | | Be sure to view the complete plugin documentation to learn more about how | the plugin system works. | */ plugins: [ require('tailwindcss/plugins/container')({ center: true, }), function ({ addUtilities }) { addUtilities({ '.transition-none': { 'transition-property': 'none', }, '.transition-all': { 'transition-property': 'all', }, '.transition': { 'transition-property': 'background-color, border-color, color, fill, stroke, opacity, box-shadow, transform', }, '.transition-colors': { 'transition-property': 'background-color, border-color, color, fill, stroke', }, '.transition-opacity': { 'transition-property': 'opacity', }, '.transition-shadow': { 'transition-property': 'box-shadow', }, '.transition-transform': { 'transition-property': 'transform', }, }, ['hover', 'focus']); }, function ({ addUtilities, config }) { const durations = config('transitionDuration', {}); addUtilities(Object.keys(durations).map(key => ({ [`.duration-${key}`]: { 'transition-duration': durations[key], }, })), ['hover', 'focus']); }, function ({ addUtilities, config }) { const timingFunctions = config('transitionTimingFunction', {}); addUtilities(Object.keys(timingFunctions).map(key => ({ [`.ease-${key}`]: { 'transition-timing-function': timingFunctions[key], }, }))); }, ], /* |----------------------------------------------------------------------------- | Advanced Options https://tailwindcss.com/docs/configuration#options |----------------------------------------------------------------------------- | | Here is where you can tweak advanced configuration options. We recommend | leaving these options alone unless you absolutely need to change them. | */ options: { prefix: '', important: false, separator: ':', }, experiments: { shadowLookup: true, }, };