{"componentChunkName":"component---src-templates-post-js","path":"/blog/2021/02/12/adding-post-css-easings-to-extend-tailwind-css-transition-timing-functions/","result":{"data":{"site":{"siteMetadata":{"siteUrl":"https://sung.codes"}},"mdx":{"id":"c112ba00-6dee-5b41-a3fe-9f1ba5e40a40","body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Adding PostCSS-Easings to Extend Tailwind CSS Transition Timing Functions\",\n  \"date\": \"2021-02-12\",\n  \"published\": true,\n  \"tags\": \"tailwind, tailwindcss, easings, transition\",\n  \"author\": \"Sung M. Kim\",\n  \"banner\": \"./images/featured-image.jpg\",\n  \"bannerCredit\": \"Image by [Angelo Esslinger](https://pixabay.com/users/whitesession-4645995/?utm_source=link-attribution&amp;utm_medium=referral&amp;utm_campaign=image&amp;utm_content=2717431) from [Pixabay](https://pixabay.com/?utm_source=link-attribution&amp;utm_medium=referral&amp;utm_campaign=image&amp;utm_content=2717431)\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h2\", null, \"Introduction\"), mdx(\"p\", null, \"Tailwind CSS (\\\"TW\\\" hereafter) provides \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://tailwindcss.com/docs/transition-timing-function\"\n  }), \"Transition Timing Functions\"), \" (TTFs hereafter. I will use \", mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), \"easings\"), \" and \", mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), \"TTFs\"), \" interchangably).\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"ease-linear\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"ease-in\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"ease-out\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"ease-in-out\")), mdx(\"p\", null, \"Reference: \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function#Keywords_for_common_cubic-bezier_easing_functions\"\n  }), \"https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function#Keywords_for_common_cubic-bezier_easing_functions\")), mdx(\"p\", null, \"Sometimes, you want more of such TTFs.\"), mdx(\"p\", null, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://github.com/postcss/postcss-easings\"\n  }), \"PostCSS-Easings\"), \" provide most of easing functions on \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://easings.net/\"\n  }), \"Easings.net\")), mdx(\"p\", null, mdx(\"em\", {\n    parentName: \"p\"\n  }, \"Note\"), \": \\\"Most\\\" because some easing functions require JavaScript, and non-trivial to add to TW thus not covered.\"), mdx(\"h2\", null, \"Implementation\"), mdx(\"p\", null, \"Here are the steps to add PostCSS-Easings to TW.\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Install PostCSS-Easings\")), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"bash\"\n  }, mdx(\"pre\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"language-bash\"\n  }), mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-bash\"\n  }), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token function\"\n  }), \"npm\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token function\"\n  }), \"install\"), \" --save-dev postcss postcss-easings\"))), mdx(\"ol\", {\n    \"start\": 2\n  }, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Extend \", mdx(\"code\", _extends({\n    parentName: \"li\"\n  }, {\n    \"className\": \"language-text\"\n  }), \"transitionTimingFunction\"), \" in TW configuration file, \", mdx(\"code\", _extends({\n    parentName: \"li\"\n  }, {\n    \"className\": \"language-text\"\n  }), \"tailwind.config.js\"), \".\")), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"js\"\n  }, mdx(\"pre\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"language-js\"\n  }), mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\"\n  }), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token keyword\"\n  }), \"const\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"{\"), \" easings \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"}\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token operator\"\n  }), \"=\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token function\"\n  }), \"require\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"(\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token string\"\n  }), \"\\\"postcss-easings\\\"\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \")\"), \"\\n\\nmodule\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \".\"), \"exports \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token operator\"\n  }), \"=\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"{\"), \"\\n  theme\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \":\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"{\"), \"\\n    extend\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \":\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"{\"), \"\\n      transitionTimingFunction\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \":\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"{\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token operator\"\n  }), \"...\"), \"easings \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"}\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \",\"), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"}\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \",\"), \"\\n  \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"}\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \",\"), \"\\n  \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token comment\"\n  }), \"// Other configurations\"), \"\\n  \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token comment\"\n  }), \"// ..\"), \"\\n\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"}\")))), mdx(\"h2\", null, \"Usage\"), mdx(\"p\", null, \"When you extend \", mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), \"transitionTimingFunction\"), \", the new TTFs can be accessed with \", mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), \"ease-*\"), \" prefix.\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"html\"\n  }, mdx(\"pre\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"language-html\"\n  }), mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-html\"\n  }), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"<\"), \"img\"), \"\\n  \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token attr-name\"\n  }), \"src\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token attr-value\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"=\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"\\\"\"), \"...\", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"\\\"\")), \"\\n  \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token attr-name\"\n  }), \"class\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token attr-value\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"=\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"\\\"\"), \"h-1/3 w-1/3 transition ease-easeInOutBack duration-300\", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"\\\"\")), \"\\n  \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token attr-name\"\n  }), \"alt\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token attr-value\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"=\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"\\\"\"), \"logo\", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"\\\"\")), \"\\n\", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"/>\"))))), mdx(\"p\", null, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), \"ease-easeInOutBack\"), \" will work like \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://easings.net/#easeInOutBack\"\n  }), \"https://easings.net/#easeInOutBack\"), \".\"), mdx(\"h2\", null, \"Sharing Easings\"), mdx(\"p\", null, \"You can also create a local preset, which can be shared in another project (in a monorepo) or even create an NPM library out of it.\"), mdx(\"p\", null, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), \"./tailwind-preset.js\")), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"js\"\n  }, mdx(\"pre\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"language-js\"\n  }), mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\"\n  }), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token keyword\"\n  }), \"const\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"{\"), \" easings \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"}\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token operator\"\n  }), \"=\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token function\"\n  }), \"require\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"(\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token string\"\n  }), \"\\\"postcss-easings\\\"\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \")\"), \"\\n\\nmodule\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \".\"), \"exports \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token operator\"\n  }), \"=\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"{\"), \"\\n  theme\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \":\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"{\"), \"\\n    extend\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \":\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"{\"), \"\\n      transitionTimingFunction\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \":\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"{\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token operator\"\n  }), \"...\"), \"easings \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"}\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \",\"), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"}\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \",\"), \"\\n  \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"}\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \",\"), \"\\n\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"}\")))), mdx(\"p\", null, \"And apply the above preset in \", mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), \"tailwind.config.js\"), \".\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"js\"\n  }, mdx(\"pre\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"language-js\"\n  }), mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\"\n  }), \"module\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \".\"), \"exports \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token operator\"\n  }), \"=\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"{\"), \"\\n  purge\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \":\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"[\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"]\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \",\"), \"\\n  presets\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \":\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"[\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token function\"\n  }), \"require\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"(\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token string\"\n  }), \"\\\"./tailwind-preset.js\\\"\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \")\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"]\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \",\"), \"\\n  darkMode\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \":\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token boolean\"\n  }), \"false\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \",\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token comment\"\n  }), \"// or 'media' or 'class'\"), \"\\n  theme\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \":\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"{\"), \"\\n    extend\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \":\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"{\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"}\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \",\"), \"\\n  \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"}\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \",\"), \"\\n  variants\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \":\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"{\"), \"\\n    extend\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \":\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"{\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"}\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \",\"), \"\\n  \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"}\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \",\"), \"\\n  plugins\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \":\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"[\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"]\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \",\"), \"\\n\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"}\")))), mdx(\"hr\", null), mdx(\"p\", null, \"Image by \", mdx(\"a\", {\n    href: \"https://pixabay.com/users/whitesession-4645995/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=2717431\"\n  }, \"Angelo Esslinger\"), \" from \", mdx(\"a\", {\n    href: \"https://pixabay.com/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=2717431\"\n  }, \"Pixabay\")));\n}\n;\nMDXContent.isMDXComponent = true;","frontmatter":{"title":"Adding PostCSS-Easings to Extend Tailwind CSS Transition Timing Functions","banner":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='267'%20viewBox='0%200%20400%20267'%20preserveAspectRatio='none'%3e%3cpath%20d='M386%201c-2%202-3%203%200%203%201%201%201%201-1%201l-6%203c-3%203-4%204-1%204l-1%202c-2%202-3%203-2%201%200-2-3-3-4-1l-6%205-5%204-3-2-3-1c-2%201-4%204-5%207%200%205-8%2015-11%2015s-8%206-6%208h8l6%201c6%201%206%202%207-4%201-4%202-4%204-4l3-2c2-2%201-3-1-2h-2c0-1%206-6%209-7%202%200%202%200%201-2-1-1%202-6%204-5%203%202-2%2013-5%2012-1-1-4%204-5%209l-1%201c0-3-2-2-3%201%200%205-4%2013-5%2011s-3%205-3%2011c0%204%200%205-2%206l-3%201%201%207%202%2012%201%206-5-4-6-4v-1l1-2v-2l-1-1-1-2c0-2%200-3-2-2-2%200-4%203-2%204v1l-1%202%203-1c2-1%203%200%201%202l-10-1c-16-5-19-5-28-5s-13%201-17%205c-2%201-4%202-5%201h-12c-2%202-7%201-8-1-2-4%200-6%205-6%204%200%204%200%203-3%200-4-3-14-4-15l-1-10a1228%201228%200%20002-15c3-2%203-10%200-10-1%200-7%205-9%209l-2%202-4-2-5-3c-2-4-8%207-6%2013%200%203-7%2013-12%2016l-3%203-3%205c-4%203-4%208%200%209%202%201%203%204%203%207%200%201%201%202%206%202%209%201%209%202-1%201-18-1-42%209-46%2019l-2%203c-2%201-2%2010%200%2012%203%206%205%206%2020%203%2023-3%2050-10%2046-10-2%200-2%200-1-2%205-7%204-15-1-20l-3-2h14l19%201c5%200%205%200%206%204%202%204%203%207%209%2010%203%202%203%203%202%203l-2%201-2%202c-4%201%200%202%2020%203%2020%202%2027%202%2028-1l2-1c4%200%2010-3%2013-6l4-2%202%201c2%200%202%200%202-6v-6c1-1%204%207%204%2010l1%202%201%202c0%202%204%201%205-2%200-2%203-3%203-1s4-3%204-5l4-8c0%202%203%201%205-2l2-4%201-2-1-2v-1l1-24c0-5%200-5%202-4%201%201%201%201%201-1l-1-2-1-4-1-4-1-2c1-1%202-1%203%201%202%202%202%201%202-17%201-14%202-20%204-20s4%206%205%2013c2%2012%203%2010%203-7V0h-6l-8%201M155%2066c1%201%200%202-1%203-2%202-2%204%200%2013%201%206%201%206-1%209-2%202-8%203-9%201-2-2-7-1-7%201-2%204%200%204%2032%204%2030-1%2041-2%2041-4l-1-1-9-4-1-8c0-8-1-11-3-11-3%200-5%2013-2%2016%204%203%202%208-2%208-6%200-8-4-5-9%201-1%202-2%201-3l-1-6c-1-5-3-7-5-5-2%201-2%204-2%2010%200%208-1%208-4%2011-5%203-11%203-12-1%200-3%201-5%204-6%202-1%202-2%202-7%200-6%200-6-3-7-2%200-4-2-4-3-2-4-9-4-8-1M68%2094l-2%203-2%201c-2%200-4%203-3%206s18%2020%2024%2024c9%206%2020%2010%2028%2011%207%201%208%201%2015-1l8-3v-3c0-6-3-11-9-17a143%20143%200%2000-39-18c-8-4-17-5-20-3m324%2017l-2%201c-3%200-3%201-4%204%200%204-3%207-8%208a564%20564%200%200117%209l5%203v-26h-4l-4%201m-93%2041l-6%202c-2%200-2%200-2%202l-1%202-2%203-1%202-3%204c0%203-1%204-2%202h-2l-8%203c-1-1-2%200-4%201-2%202-3%203-7%203l-5%201-4%203-4%201-8%201-8%201c0%201-3%202-13%202-9-1-13%200-14%201l-9%202-8%202-7%203c-5%201-8%201-17-1l-4%201c0%202-2%202-13%202-13%200-18%201-24%203-11%205-17%206-21%204s-6-2-6-1l-7%203-9%203-14%201c-4%200-5-1-6-3l-2-3-1-1c1-1%200-2-3-1l-5-1c-2-3-9-3-9%200l-1%201-1%204c0%204%200%204%203%204l2%202%201%203c1%201%200%2010-2%2011l-1%202h-1c-3-1%200%202%203%204l4%202c0%201%201%202%203%202%202%202%203%203%204%208%202%204%203%205%204%204a661%20661%200%200181-2l39-3a391%20391%200%2000134-28l1-2-3%201c-3%202-4%201-1-1l3-3h-3c-3%200-3%200-2-2l2-4c0-4%209-11%2020-14l12-5%206-2c4%200%205%200%205-3l1-2v-2l-1-1c0-2-7-4-9-4h-3l2-1%202-1-3-1-5-2-5-2-6-4c-7-6-17-9-20-7h-1c0-1-1-1-5%201M0%20224c0%202%202%203%207%203l3%201H0v12c0%2011%200%2012%202%2012l4-1%202-1%208-1c7%200%208%200%206-1h-4l-2-1%205-1c4-1%207-3%204-3l-1-2c0-2-5-5-9-5l-2-1h4c4%200%205-2%202-3l-3-2c0-2%200-2-1-1h-4l1-1c2%200%203-2%202-3H9l-3-1-5-1c-1-1-1-1-1%201'%20fill='%23FFC600'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":1.4953271028037383,"src":"/static/24be335467d6880d9499eccd09755ab9/f422e/featured-image.jpg","srcSet":"/static/24be335467d6880d9499eccd09755ab9/e75b5/featured-image.jpg 160w,\n/static/24be335467d6880d9499eccd09755ab9/c01e2/featured-image.jpg 320w,\n/static/24be335467d6880d9499eccd09755ab9/f422e/featured-image.jpg 640w,\n/static/24be335467d6880d9499eccd09755ab9/a6352/featured-image.jpg 960w,\n/static/24be335467d6880d9499eccd09755ab9/ec6c5/featured-image.jpg 1280w","srcWebp":"/static/24be335467d6880d9499eccd09755ab9/991d2/featured-image.webp","srcSetWebp":"/static/24be335467d6880d9499eccd09755ab9/578e8/featured-image.webp 160w,\n/static/24be335467d6880d9499eccd09755ab9/8dbf3/featured-image.webp 320w,\n/static/24be335467d6880d9499eccd09755ab9/991d2/featured-image.webp 640w,\n/static/24be335467d6880d9499eccd09755ab9/1fb14/featured-image.webp 960w,\n/static/24be335467d6880d9499eccd09755ab9/135cd/featured-image.webp 1280w","sizes":"(max-width: 640px) 100vw, 640px"}}}},"excerpt":"Introduction Tailwind CSS (\"TW\" hereafter) provides  Transition Timing Functions  (TTFs hereafter. I will use  easings  and  TTFs…","fields":{"year":"2021","slug":"/blog/2021/02/12/adding-post-css-easings-to-extend-tailwind-css-transition-timing-functions/"}}},"pageContext":{"id":"c112ba00-6dee-5b41-a3fe-9f1ba5e40a40"}},"staticQueryHashes":["398935099"]}