From 36eb04893d603cd26d9d770d9e7887feeea20440 Mon Sep 17 00:00:00 2001 From: Dane Everitt Date: Tue, 22 Sep 2020 20:42:48 -0700 Subject: [PATCH] Not used, make things less confusing --- tailwind.js | 914 ---------------------------------------------------- 1 file changed, 914 deletions(-) delete mode 100644 tailwind.js diff --git a/tailwind.js b/tailwind.js deleted file mode 100644 index 90a7e5782..000000000 --- a/tailwind.js +++ /dev/null @@ -1,914 +0,0 @@ -/* - -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, - }, - -};