{"componentChunkName":"component---src-templates-post-js","path":"/blog/2021/01/26/tailwind-preset-vs-plugin/","result":{"data":{"site":{"siteMetadata":{"siteUrl":"https://sung.codes"}},"mdx":{"id":"5f2775e1-8047-5fff-b192-b9c9da7c26ca","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\": \"Tailwind Preset vs Plugin\",\n  \"date\": \"2021-01-26\",\n  \"published\": true,\n  \"tags\": \"tailwind, tailwindcss, comparison, selfnote\",\n  \"author\": \"Sung M. Kim\",\n  \"banner\": \"./images/featured-image.jpg\",\n  \"bannerCredit\": \"Image by [Devon Breen](https://pixabay.com/users/dbreen-1643989/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=1085072) from [Pixabay](https://pixabay.com/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=1085072)\"\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 provides \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://tailwindcss.com/docs/presets\"\n  }), \"Presets\"), \" and \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://tailwindcss.com/docs/plugins\"\n  }), \"Plugins\"), \" to customize Tailwind CSS (\\\"TW\\\" hereafter).\"), mdx(\"p\", null, \"The difference is hard to grasp from descriptions.\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"Creating your own reusable configuration presets.\"), mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Presets\"))), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"Extending Tailwind with reusable third-party plugins.\"), mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Plugins\"))), mdx(\"p\", null, \"Note that both promotes \\\"re-usability\\\". A bit confusing because of the recursive definition of presets.\"), mdx(\"h2\", null, \"What are they?\"), mdx(\"p\", null, \"Here is the gist.\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Presets\"), \": A base configuration to override\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Plugins\"), \": A JavaScript code to create custom styles\")), mdx(\"h2\", null, \"When to use?\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Presets\"), \": To provide common configurations across projects for consistent Look & Feel\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Plugins\"), \": To create styles requiring manual copy/paste\")), mdx(\"h2\", null, \"Why choose one over the other?\"), mdx(\"p\", null, \"Presets is more of an abstraction and\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"they can contain plugins, while the reverse is not true.\"), mdx(\"h2\", null, \"How\"), mdx(\"h3\", null, \"Presets\"), mdx(\"p\", null, \"You'd normally create a custom TW configuration options such as base, components, utilities (\\\"styles\\\" hereafter). As mentioned above, Presets can add plugins.\"), mdx(\"p\", null, \"As it's still a TW configuration, you can either override or extend styles.\"), mdx(\"p\", null, \"The following preset will\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://tailwindcss.com/docs/customizing-spacing#overriding-the-default-spacing-scale\"\n  }), \"override spacing\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"while extending \", mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://tailwindcss.com/docs/z-index\"\n  }), \"z-index\"), \" (TW provides \", mdx(\"code\", _extends({\n    parentName: \"li\"\n  }, {\n    \"className\": \"language-text\"\n  }), \"z-index\"), \" from 10 to 50 incremented by 10).\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"TW's official typography and \", mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://github.com/tailwindlabs/tailwindcss-line-clamp\"\n  }), \"text truncation\"), \" plugins\")), mdx(\"p\", null, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), \"custom-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  }), \"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  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    spacing\", 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      sm\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \":\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token string\"\n  }), \"\\\"8px\\\"\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \",\"), \"\\n      md\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \":\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token string\"\n  }), \"\\\"12px\\\"\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \",\"), \"\\n      lg\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \":\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token string\"\n  }), \"\\\"16px\\\"\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \",\"), \"\\n      xl\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \":\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token string\"\n  }), \"\\\"24px\\\"\"), 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    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      zIndex\", 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 number\"\n  }), \"60\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \":\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token string\"\n  }), \"\\\"60\\\"\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \",\"), \"\\n        \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token number\"\n  }), \"70\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \":\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token string\"\n  }), \"\\\"70\\\"\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \",\"), \"\\n        \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token number\"\n  }), \"80\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \":\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token string\"\n  }), \"\\\"80\\\"\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \",\"), \"\\n        \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token number\"\n  }), \"90\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \":\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token string\"\n  }), \"\\\"90\\\"\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \",\"), \"\\n        \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token number\"\n  }), \"100\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \":\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token string\"\n  }), \"\\\"100\\\"\"), 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(\"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  }), \"[\"), \"\\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  }), \"\\\"@tailwindcss/typography\\\"\"), 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 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  }), \"\\\"@tailwindcss/line-clamp\\\"\"), 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, \"You can see that the Preset provides a base configuration and can include plugins.\"), mdx(\"p\", null, \"Check out \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://tailwindcss.com/docs/presets#creating-a-preset\"\n  }), \"Creating a preset\"), \" for an official example.\"), mdx(\"h3\", null, \"Plugins\"), mdx(\"p\", null, \"Better to refer you to official \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://tailwindcss.com/docs/plugins\"\n  }), \"Plugin documentation\"), \" for examples (it's flexible.)\"), mdx(\"hr\", null), mdx(\"p\", null, \"Image by \", mdx(\"a\", {\n    href: \"https://pixabay.com/users/dbreen-1643989/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=1085072\"\n  }, \"Devon Breen\"), \" from \", mdx(\"a\", {\n    href: \"https://pixabay.com/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=1085072\"\n  }, \"Pixabay\")));\n}\n;\nMDXContent.isMDXComponent = true;","frontmatter":{"title":"Tailwind Preset vs Plugin","banner":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='300'%20viewBox='0%200%20400%20300'%20preserveAspectRatio='none'%3e%3cpath%20d='M0%202l2%202%208%204%207%203%205-1%2012-2h9l6%205c8%205%2010%206%2012%204l10-1c9%200%2015%201%2020%206%203%203%206%203%208-2%201-3%204-6%2023-16l4-3a313%20313%200%2000-75%204C41%207%2040%207%2040%201L20%200C1%200%200%200%200%202m172%200l2%205c1%206%205%209%2012%209%208%200%2010%201%206%207l-2%207c0%206%205%207%2026%206%207-1%2011-1%2017%201l8%201%202-4c1-3%203-4%205-5l3-3c0-3%203-3%206%200%202%202%202%202-1%205-2%204-4%2016-1%2018%203%203%2037%2013%2050%2014%2011%201%2011%200%2010-6-1-4-1-5%201-8l2-4c0-2%200-2%202-1l6%201c7%200%206%200%205%202l-3%202-2%203c-2%204-2%208%201%2011%202%202%2011%202%2015%200l13-1c24%201%2025%201%2027-2%203-3%203-3-3-8l-4-4h3c4%200%209%202%2013%206s4%203%200%208c-4%204-5%206-3%209l6-3%206-4V45a6387%206387%200%20010-34V0H172v2m44%2014c-9%200-9%201-15%206-2%202-1%202%2013%202%2015-1%2019-2%2019-6-1-3-3-3-17-2m65%2014l-4%205v3c1%209%207%2011%2010%203l4-7c3-4%203-7-1-8-4-2-6-1-9%204m-15-2c-3%201-4%202-3%203l-2%206c-2%205-1%2010%202%2010s11-9%2012-14c1-7-1-8-9-5m-154%204l-4%2024a640%20640%200%2001-4%2049c2%203%209-3%209-8%200-3%206-9%208-9l6-2%207-1c3%201%203%200%206-4%204-9%2012-15%2020-15h5l2-5c2-6%204-8%209-8%206-1%208%200%2013%205%204%203%204%203%208%202l14-2c13-1%2016-2%207-3l-9-3-9-2a1263%201263%200%2001-16-3l-2-1-6-1-11-2-10-2-6-1-1-1-3-1c-2%201-5%200-9-1l-8-2h-3c-1-1-2-2-3-1l-2-1-8-1m129%209c-2%201-4%202-10%202l-7%201c0%201%2016%206%2021%206%206%200%207-1%203-6s-5-6-7-3M73%2069a157%20157%200%2001-3%2024c0%203-6%208-8%207l-1-17c0-18-2-21-2-4s-2%2027-6%2031l-3%203v-7a687%20687%200%2001-3-32l-2%2038c0%206-4%2018-6%2018l-3-35-1-14c-1%201-2%2010-2%2032l-1%2038c-3%2012-2%2027%202%2032l2%2059a1377%201377%200%20005%2054%201759%201759%200%2001-1-108c5%200%205-3%205%2057l1%2055c1-1%202-13%202-55%201-58%201-58%205-58a1939%201939%200%20010%20105c3%200%203%200%203-28a2942%202942%200%20016-82c3-3%204-1%204%205a380%20380%200%2000-2%2043l3-29c2-21%202-27%204-28%202-3%204-2%204%202%200%203%200%203%201%201l1-8%202-10c0-3-2-2-5%203-9%2014-24%2022-33%2017-13-8-5-41%2017-63%2016-16%2028-18%2031-6%202%204%202%204%203%202%202-1%202-2%201-8s-1-19%201-31c0-4%200-5-1-4s-3%208-4%2017l-1%207c-3%200-4-2-4-7V64l-2%208a199%20199%200%2001-2%2017c0%202-3%204-5%203V74c0-20-2-23-2-5m159-11l-1%201c-2-2-1%200%201%203l3%204h2c2-2%207-3%2011-2%2018%202%2019%202%2025%205l10%207c2%202%202%202%205%200l13-2h9l-12-3-14-2-4-2-5-1c-4%200-13-2-17-4l-8-2-8-1-10-1m81%2016l3%203%204%202%203%202%205%203c2%202%203%202%204%201l7-3%206-1-4-1h-5l-3-1-9-2-7-2-4-1m36%207c-2%202-2%202%200%204v8c-2%2010-5%2019-6%2019-2-1-2-2-1-10v-6l-2%208c-1%206-1%208-4%2010l-3%204v-18l-1%202-2%2011c-1%208-1%209-3%209l-4%203c-1%203-1%203-1-4s-1-9-3-2l-3%2013-1%202-1%202-1%202c-1%201-1-3-1-8%201-8%200-10-1-10l-1%203a105%20105%200%2001-5%2026c0%202%200%202-1%201-1-4-3%205-2%2010%201%201%200%203-2%203l1-34c0-1-2-2-3-1v5l-2%2018c-2%2017-4%2027-5%2027l-2%203c-3%206-3%205-3-3%202-15%203-37%201-37l-1%206c-3%2040-4%2045-8%2053l-3%207v-10c2-22%202-47%201-46l-4%2050-2%2022c-5%2015-6%2029-4%2037l1%2011c-2%2013-2%2029-1%2029l3-24c0-11%201-11%204-10s3%201%202%209c-2%2022-2%2025-1%2025l1-2a567%20567%200%20016-34c4-1%204%200%202%2016-2%2012-2%2020-1%2020l1-1%205-39%205-4-4%2034v10l2-9c3-26%205-39%207-43s5-5%204-1l-4%2030%206-31c0-7%205-19%207-18l-4%2031c-2%209-2%2013-1%2013l2-10c3-26%206-37%207-37l1-1c-1-1%200-2%201-3%201-2%201-2%201%206l-3%2017-4%2030%207-34a250%20250%200%20017-24l2%207c1%201%201%201-1%201-1-1-2%200-3%204-1%206-1%208%206%208l8%203c5%201%206%201%204-6l-2-12-4-27c-4-30-3-46%203-47%204%200%205-2%208-8%203-7%209-13%2013-14l4-2c1-3%206-8%209-8l3-3c4-5%2010-8%2016-8%205%200%205%200%206-3l2-4%201-5v-4h-7l-14-1%203%201h-4l-4-1-4-1c-11-1-18-2-18-4s-1-2-3-1M20%2092a812%20812%200%20004%2096%2018920%2018920%200%20004%2041l-2-62c-1-49-4-79-6-75M0%20120a349%20349%200%20005%2061%204901%204901%200%200013%20119c0%201%205%200%205-2A2182%202182%200%20008%20157a5159%205159%200%2000-7-59c-1-1-1%209-1%2022m73-7l-1%203c0%202-1%202-3%202-3%200-4%201-6%204-2%202-4%204-5%203-3-1-6%205-7%2013v7c2%200%204-2%204-3%200-3%204-7%205-5s8%200%208-3l1-1%201-1%204-6%202-3%202-2%201-5c0-4%200-4-2-4l-4%201m6%2022l4%2015a15611%2015611%200%200135%20130c6%2022%205%2020%208%2020s3%200%203-2a909%20909%200%2001-17-62%202390%202390%200%2001-26-99l-4-4-3-2v4m28%200l-3%201-2%201%2013%2056c1%207%201%207-1%2013-3%2011-1%2021%207%2033l6%207%206%2024c8%2033%207%2030%2010%2030h3l-2-9a1270%201270%200%2000-9-37l6%203%207%204%203%2016%204%2019c0%204%201%204%203%204%204%200%204%202%200-17l-3-17c1%200%2012%205%2012%207l3%2014%201%2013h3c4%200%204%200%201-13-1-13-1-13%201-13l6%202%204%201%201%2012%201%2011h6v-7l-2-11v-4h5c7%201%207%201%207%207%200%2012%201%2015%204%2015h3l-1-11v-11h4l6-2c2%200%203%203%203%2015v9h7l-1-14v-13l3-4c9-10%208-26-3-42-3-4-3-5-4-29a1072%201072%200%2001-4-39c-4-2-4-2-4%2011l2%2028v17l-3-4-8-6-5-5a841%20841%200%2001-4-44l-4%201c-3%201-3%201-3%205a445%20445%200%20012%2034%20456%20456%200%2000-12-4%20532%20532%200%2001-5-45l-4%201h-3l3%2020%202%2021-15-3c-1-1-5-21-6-34-1-6-2-7-5-6s-3%201-2%204c7%2041%207%2037-1%2037h-7l-5-22c-4-21-6-25-9-25s-3-2%203%2024l4%2024c0%202-10%208-10%207a516%20516%200%2001-12-60h-3m-38%205l-2%204-3%201c-3%200-8%205-8%208%200%202-1%202-3%201-3-4-10%205-10%2013%200%207%206%207%2010-1l2-3c2%202%205%201%208-3l4-4h2l3-3c4-2%205-4%203-9-2-6-3-7-6-4m173%2028l-2%201v50l1%2066v15h7l-1-17a82174%2082174%200%2001-2-116l-3%201m98%2014a1788%201788%200%200014%20115c0%203%200%203%203%203h3v-5l-15-113-3-4-2-2v6m-49%206l-2%203c-2%200-12%2019-15%2028-7%2018-7%2031-2%2036%204%203%205%203%2012%200%209-4%2028-31%2023-33h-1l-2%202-2%202-2%201-1%201-1%203c-2%201-2%201-2-1s-1-1-3%203c-2%206-4%207-7%205l-1-1v2c-1%203-6%209-7%209-2%200-2-1-2-5%201-9%208-19%2010-13%200%202%201%201%202-3%203-8%206-11%208-7%201%202%201%202%201%200l1-6-1-2h-2l-3-3-1-1-1%202c-1%200-2%201-2%203%200%203-2%207-3%205-1-1%201-14%202-17%202-3%205-5%206-5h1l-3-1c-2%200-1-2%201-5l1-3-2%201m70%203l1%2014a1557%201557%200%20016%2049l-3%205c-6%208-4%2022%203%2037%202%204%202%204%207%204h4l-3-6c-12-21-5-34%2019-38l5-1v7l1-10-1-12c0%206%200%206-3%206-4%200-4%200-5-23l-2-22c-1-3-5-6-7-5l1%2022c3%2027%203%2030%200%2030l-5%201-5%202-3-26c-3-40-3-36-7-36-2%200-3%200-3%202m-218%205c-10%203-17%207-20%2015-4%2010-1%2019%2011%2032%2023%2022%2063%2033%2084%2024%2028-13%201-58-43-69-9-3-24-3-32-2m7%2010c-2%201-2%201-2%208%201%208%201%208%204%208%202%200%202%200%202-2s0-3%202-2c4%200%206-2%205-5-1-5-6-9-11-7m16%204c-4%202-4%209%200%2013%208%208%2018%206%2016-3-1-7-10-12-16-10m19%206v7c0%207%200%207%204%208%202%201%202%201%202-2%200-2%200-3%203-3%206%201%205-8-2-11-4-1-4-1-7%201m-44%2015c-5%205%203%2016%2012%2016%202%200%205-3%205-5s-5-4-6-2h-6c-4-4%201-8%205-4s8%203%205-1c-3-5-12-8-15-4m22%203c-4%202-4%209%200%2013%208%208%2018%206%2015-4-1-6-10-11-15-9m18%204l1%2017h3c3%201%203%201%203-1-1-2%201-3%201%200%201%202%206%205%207%204l-1-4v-5c0-3%200-4-2-6-2-3-11-6-12-5M1%20256l2%2030%201%2014h3c3%200%203%200%203-3a1082%201082%200%2001-7-45l-2-12v16m197-12l-1%208c1%207%201%207%204%208h3l-1-6c0-5%200-6%201-5l1%206c0%205%202%207%205%207%202%200%201-14-2-16-3-3-8-4-10-2M61%20260c-3%2023-2%2031%201%2026%202-1%202-35%201-35l-2%209m329%2030c-6%202-5%2010%201%2010%202%200%203%200%202-2%200-3%202-4%205-3%202%201%202%201%202-2%200-2-1-3-3-4h-4l-3%201'%20fill='%23FFC600'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":1.3333333333333333,"src":"/static/3dd08f7b9e6e6ccf3c391df5cff9d1dc/f422e/featured-image.jpg","srcSet":"/static/3dd08f7b9e6e6ccf3c391df5cff9d1dc/e75b5/featured-image.jpg 160w,\n/static/3dd08f7b9e6e6ccf3c391df5cff9d1dc/c01e2/featured-image.jpg 320w,\n/static/3dd08f7b9e6e6ccf3c391df5cff9d1dc/f422e/featured-image.jpg 640w,\n/static/3dd08f7b9e6e6ccf3c391df5cff9d1dc/a6352/featured-image.jpg 960w,\n/static/3dd08f7b9e6e6ccf3c391df5cff9d1dc/ec6c5/featured-image.jpg 1280w","srcWebp":"/static/3dd08f7b9e6e6ccf3c391df5cff9d1dc/991d2/featured-image.webp","srcSetWebp":"/static/3dd08f7b9e6e6ccf3c391df5cff9d1dc/578e8/featured-image.webp 160w,\n/static/3dd08f7b9e6e6ccf3c391df5cff9d1dc/8dbf3/featured-image.webp 320w,\n/static/3dd08f7b9e6e6ccf3c391df5cff9d1dc/991d2/featured-image.webp 640w,\n/static/3dd08f7b9e6e6ccf3c391df5cff9d1dc/1fb14/featured-image.webp 960w,\n/static/3dd08f7b9e6e6ccf3c391df5cff9d1dc/135cd/featured-image.webp 1280w","sizes":"(max-width: 640px) 100vw, 640px"}}}},"excerpt":"Introduction Tailwind provides  Presets  and  Plugins  to customize Tailwind CSS (\"TW\" hereafter). The difference is hard to grasp from…","fields":{"year":"2021","slug":"/blog/2021/01/26/tailwind-preset-vs-plugin/"}}},"pageContext":{"id":"5f2775e1-8047-5fff-b192-b9c9da7c26ca"}},"staticQueryHashes":["398935099"]}