{"componentChunkName":"component---src-templates-post-js","path":"/blog/2021/01/28/adding-tailwind-css-to-react-snowpack-project/","result":{"data":{"site":{"siteMetadata":{"siteUrl":"https://sung.codes"}},"mdx":{"id":"e9fc5f66-b4e3-5f74-8107-95cd8e2d4abd","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 Tailwind CSS to React Snowpack Project\",\n  \"date\": \"2021-01-28\",\n  \"published\": true,\n  \"tags\": \"tailwind, tailwindcss, snowpack, cheatsheet\",\n  \"author\": \"Sung M. Kim\",\n  \"banner\": \"./images/featured-image.jpg\",\n  \"bannerCredit\": \"Image by [zmortero](https://pixabay.com/users/zmortero-1348534/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=912247) from [Pixabay](https://pixabay.com/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=912247)\"\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, \"This is a cheatsheet for adding Tailwind CSS support for a Snowpack project (bootstrapped with React+TypeScript template).\"), mdx(\"h2\", null, \"Commandline Steps\"), mdx(\"h3\", null, \"1. Create a project\"), 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 comment\"\n  }), \"# Pass '--use-yarn' to use yarn\"), \"\\nnpx create-snowpack-app app-name \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"\\\\\"), \"\\n\\t--template @snowpack/app-template-react-typescript\\n\\n\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token comment\"\n  }), \"# Go to the project\"), \"\\n\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token builtin class-name\"\n  }), \"cd\"), \" app-name\\n\\n\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token comment\"\n  }), \"# Optional: Change git master to main\"), \"\\n\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token function\"\n  }), \"git\"), \" branch -M master main\"))), mdx(\"p\", null, \"You can find more templates (\", mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), \"@snowpack/app-template-*\"), \") in the offical repository.\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://github.com/snowpackjs/snowpack/tree/main/create-snowpack-app/cli#official-app-templates\"\n  }), \"https://github.com/snowpackjs/snowpack/tree/main/create-snowpack-app/cli#official-app-templates\")), mdx(\"h3\", null, \"2. Install NPM packages\"), 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 \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"\\\\\"), \"\\n  @snowpack/plugin-postcss postcss postcss-cli \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"\\\\\"), \"\\n  tailwindcss autoprefixer cssnano\"))), mdx(\"h3\", null, \"3. Create configuration files\"), 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  }), \"touch\"), \" postcss.config.js \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token operator\"\n  }), \"&&\"), \" npx tailwindcss init\"))), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Note\"), \": \", mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), \"npx tailwindcss init\"), \" creates \", mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), \"tailwind.config.js\"), \" file with empty options\"), mdx(\"h2\", null, \"Configuration Steps\"), mdx(\"h3\", null, \"4. Add PostCSS support to Snowpack\"), mdx(\"p\", null, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), \"snowpack.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  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 comment\"\n  }), \"//... other plugins\"), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token string\"\n  }), \"\\\"@snowpack/plugin-postcss\\\"\"), 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(\"h3\", null, \"5. Configure PostCSS for Tailwind CSS\"), mdx(\"p\", null, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), \"postcss.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\"), \" cssnano \", 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  }), \"\\\"cssnano\\\"\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \")\"), \"\\n\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token keyword\"\n  }), \"const\"), \" tailwindcss \", 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  }), \"\\\"tailwindcss\\\"\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \")\"), \"\\n\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token keyword\"\n  }), \"const\"), \" autoprefixer \", 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  }), \"\\\"autoprefixer\\\"\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \")\"), \"\\n\\n\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token keyword\"\n  }), \"const\"), \" plugins \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token operator\"\n  }), \"=\"), \"\\n  process\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \".\"), \"env\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \".\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token constant\"\n  }), \"NODE_ENV\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token operator\"\n  }), \"===\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token string\"\n  }), \"\\\"production\\\"\"), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token operator\"\n  }), \"?\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"[\"), \"tailwindcss\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \",\"), \" autoprefixer\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \",\"), \" cssnano\", 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  }), \"[\"), \"tailwindcss\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \",\"), \" autoprefixer\", 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  }), \"{\"), \" plugins \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"}\")))), mdx(\"h3\", null, \"6. Add Tailwind CSS Utilities\"), mdx(\"p\", null, \"Replace \", mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), \"./src/index.css\"), \" content with Tailwind directives\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"css\"\n  }, mdx(\"pre\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"language-css\"\n  }), mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-css\"\n  }), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token atrule\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token rule\"\n  }), \"@tailwind\"), \" base\", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \";\")), \"\\n\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token atrule\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token rule\"\n  }), \"@tailwind\"), \" components\", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \";\")), \"\\n\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token atrule\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token rule\"\n  }), \"@tailwind\"), \" utilities\", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \";\"))))), mdx(\"p\", null, \"Check out the official Taiwlind CSS \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://tailwindcss.com/docs/installation#installing-tailwind-css-as-a-post-css-plugin\"\n  }), \"Installation documentation\"), \" for more options.\"), mdx(\"hr\", null), mdx(\"p\", null, \"Image by \", mdx(\"a\", {\n    href: \"https://pixabay.com/users/zmortero-1348534/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=912247\"\n  }, \"zmortero\"), \" from \", mdx(\"a\", {\n    href: \"https://pixabay.com/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=912247\"\n  }, \"Pixabay\")));\n}\n;\nMDXContent.isMDXComponent = true;","frontmatter":{"title":"Adding Tailwind CSS to React Snowpack Project","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%2026v26h7c10%200%2020%201%2022%204h9c0%201%208%200%2011-2h7c-2-2%200-3%203-2h12l15%203h4l9-2c7%201%2014%200%2012-1l-1-2h5l6-2%205-1%203-1c4%201%204-1%200-3l-4-2-3-1-2-2-1-4c-3-3-1-4%204-4l5%202c1%201%203%202%205%201%203%200%204%200%205%202%201%203%204%203%208%201s16-1%2018%200c1%201%203%202%209%202%207-1%2013%200%2017%202h10l5-1%207-1%208-1c1-2%202-2%204-1%206%204%2023%207%2024%205%201-1%202-1%209%203%206%204%209%205%2011%205h4l4%201%206%202c5%200%206%200%206-2h1c0%202%201%202%203%202s3%200%203-2h1l16-1%208-1%209-1%2016-5%204-1h4c0-3%205-4%207-2%201%201%201%201%201-1v-1h1c0-3%205-5%205-3%201%201%2010%200%2012-3%203-2%202-3%200-3l-7%201-6%201h-3c-3-2-8-2-14-1h-9l-7-1-7-3-4-2-3-2-2-2-2%202c-2%202-3%203-6%202l-5-1c-1%200%203-8%205-8v-2l-4-2-1-1-3-3-4-1h-1l-2%201c0%202%200%202-1%201s-2-2-1-4c0-2-1-3-5-1a3730%203730%200%2000-145-2H0v26M396%206l1%202v4h-3c-3-1-3-1-6%201-2%203-1%205%203%203%203-1%203-1%203%201s3%207%205%207%201-15%200-17-2-2-3-1M33%2042c-3%202%201%204%2012%207h10c0-2%201-2%203-2l3-1-5-1-4-1c0-1-11-3-13-2h-6m308%2022l-3%201v1h-2c-2-2-13-3-12-1%202%203-8%203-10%201l-13-1c-4%200-9%205-7%206s1%205-3%208l-3%206-2%205-2%202-3%202-3%201h-6l-1%201c-2-1-6%201-6%202h-3c-4%200-5%201-2%203%202%200%202%201%201%201-1%201-4-1-7-4-1-2-1-2%201-2l3-3c1-5%200-6-3-3l-3%202c-3%200-4%203-2%204v1l-2-1c0-1-1-2-2-1v2l1%201%202%202c0%201%200%202-1%201h-4c0%201-2%202-5%202-5%200-5%200-3-2h-5c-3%202-3%202-3%200h-2c-2%201-2%203%200%203v1c-1%202-1%202%201%203s3%204%201%204c-1%201%200%204%201%204l1-3c1-2%202-3%203-1%200%205%200%205%201%204%202-2%204%203%202%205-1%201-2%202-3%201h-2c-3%201-3%203%200%203l2%201h-1l-4%201-5%201c-3%200-5%201-3%203h1c1-2%202-1%201%202%200%201-1%202-3%202s-2%200-1%201l-2%201-5%202c-3%200-4-1-2-2%201-1%201-1%200%200l-2-2c-1-1%200-2%202-1h2c2-1%202-1%203%201%201%201%201%201%203-1v-1h-2c1-1-1-2-3-1h-1l2-3%201-5c0-4%201-4%203-3%202%200%202%200%201-1l-4-2-3-1%202-1c1%200%202%200%201-2l3-2c5-1%204-2-2-2l-8%202c-7%200-23%204-21%204l2%201c-1%201-10%200-11-1l-1-1h-4l2%201c1%201%201%201-1%202l-1%201-3%201c-2%200-3%200-2-1l-3-1c-1%200-4-1-5-3l-6-2h-4l1-1%203-1c1-1%203-2%207-1%206%200%2018-1%2021-3l17-4a71%2071%200%200022-7c2%200%204-3%204-6l1-2c2%200%202%201%201%203l-1%204%203-1h5c2%200%204-2%204-4l4-2c3-2%204-2%202%201v2l9-7%205-3c3-1%204-4%202-6-2-1-7%200-11%203l-2%202c-1-3%200-5%201-5%201%201%204-2%204-3v-1l1-1h-3c-1%202-4%202-12%202-2%200-4%201-8%205l-9%207-4%204c1%201-5%202-7%200l-3-1c-3%202-10%202-10%201h-1l-4%201h-3c0%202-2%201-4-1s-2-2-4-1c-2%202-7%203-8%201l-4-2c-2%200-3%200-2%201%200%201-1%202-3%202-6%201-7%201-7-1s-1-2-3-2c-3%200-3%200-2%201l1%201-12%201c-4%200-10-2-10-3l-3-1-9%202-13%202-15%201c-9%200-12%201-4%202%207%200%2011%201%209%202s-2%201%202%202c4%200%204%200%202%202-3%202-10%202-12%201l-3-2-2-1h-6c-4%200-7%200-12-2-3-2-10-4-14-4l-16-5c-12-4-17-4-21-3-5%202-6%203-3%203v1c-2%202-2%202%200%202l3%203c0%201%201%202%203%202l7%202%2011%201c7%200%2010%201%2010%203s9%203%2023%204c2%200%203%202%201%202l-2%201c0%201%201%201%204-1l6-1%205%201-5%201-4%201h3c3%200%203%200%202%201-2%201-2%201%200%201%206%200%204%202-3%202-5%200-6%200-3%201l2%201v2l-1%202v1l-2%201-4-1v-1c2-2%201-2-7-2H48l-7%201-5%202h-6c-2%200-3%200-3%202-1%202-1%202-2%201v-2h-7l-10%201h1c3%200%201%202-3%202l-5%202-1%2089v87h166a1986%201986%200%2000169-1l33%201h33v-88a4197%204197%200%2000-3-84v1c1%202-3%207-6%207s-6%204-6%206v3l-6%204-2%202c0%202-3%203-4%201v-1l1-2c0-4-1-4-4-1-3%202-3%203-2%204s-2%203-5%204-5%206-3%207l1%206c-1%207%200%208%209%208l2%202c0%201%200%202%202%202h4v-1c-2-1%200-2%203-3l7-1c4%200%204%202-1%203l-4%203-3%202-3%203-2%202h4c4%200%205-1%206-3s3-2%203%201l2%201h2l2%201c3%200%205%201%205%203l-2%202c-2%200-3%202%200%202%201%201-1%201-3%201-4%200-5%200-4%201h-4l-9%201h-3c0-2-4-2-9%201-6%202-6%205-1%206l1%201c-2%200-1%203%201%203%201%201%201%202-2%203l-6%202v2l-1%201h-3l-3%202-3%202-3%202c-2%202-2%202%204%205l9%204c4%200%204%200%203%201l-2%204c-1%201-1%201-1-1%200-1-1-2-6-2-14-2-17-2-17-4l-2-2c-3-1-3-1-2-4l1-3c0-2-5-7-6-7v1c1%201%201%201-1%201l-3-2c-1-1-2-2-3-1l-1-1c1-2-13-5-18-4-3%200-4-2-2-5%202-1%202-2-3-4l-4-4-1-1c-2%200-1-2%202-3h4c0%202%206%201%206%200h-2l-2-1v-1h-1l1-2%201-1%201-2c-1-3%202-4%205-2h3c0-2%204-3%204-1l1%201c1%200%202%201%201%202l1%202%201-2h1l2%201%202%202c0%202%200%202%201%201l2-2%203-4v-3c-1%202-3%200-3-3h4l1-1%202-1h1c0-2%2011-1%2014%201l5%201%201%201c0%202%201%202%203%201v-3l1-1h-4c-2%200-2-1-1-1%202%200%201-2-1-3l-2-1-1-1-3-1c0-1-1-2-3-2l-4-1%202-1c2%201%202%201%202-1l3-3%202-1%201-1%201%202%202-1%204-2v-1h-3c-3%202-3%202-2%200h-4l-5%201c-4%200-4%200-2%201h-3l2%202c3%201%203%201%200%201l-2-1c-1-1-1-1-3%201l-3%202-1%201h-1l1-2%201-1-3-1c-4%200-5%202-3%203%201%201%201%201-1%202-2%200-3%202%200%202%201%201%201%201-1%201l-3%202-2%201-2-2c-2%200-2%200-1-1l1-2-2%201-4%202c-1%200-2%200-1-1l2-1h1l-2-1h-3c-1%201-1%201-1-1l1-2%205-1-3-1-4-1%201-1c3%200%203-2%201-3s-2-1%200-1%203%201%203%202c1%202%201%202%203%201v-7l1%201c0%201%209%200%209-2l2-1%201%202c0%202%201%202%2021-10%204-2%205-3%206-2s1%201%202-1l4-2%206-2c4-3%2014-5%2018-4%203%200%203%200%202-2%200-2%200-3%202-4l5-3%204-3c4%200%205-2%205-13%200-9%200-11-1-10l-19%207%201%201c1%202%201%202-2%202s-3%200-2-1v-1l-2%201v1l1%201c0%201-5%202-6%201h-4a15553%2015553%200%2001-36%2012c-2%200-2%200-1%201%202%201%206%200%209-2%202-2%203-3%202-1%200%201%200%202%202%201%202%200%203%201%202%204l-1%203h15l6-1c1%201-2%205-4%206-3%201-3%202-2%202l2%202h-2c-2-2-3-2-4%200h-11c0-2-1-2-2-2h-4c-1-1-2-2-3-1l-1-1%202-1c3-2%202-3-2-2-2%200-3%200-2-1s-2-3-6-3l-1-2h-8c-6%200-7-1-9-2l-3-2h-13l2-1%201-1h-2l-4-1h-3l-3%201c-2-1-4%201-2%202s2%203-1%203l-2%201-3%201c-6-2-7-2-9-1h-1l-3-1h-5c-2%201-5%201-5-1l-3-1c-3%200-1-2%204-4%205-1%205-3%201-3h-4l-3%201-5%201h-4c-2-2-3-4-1-4l1%201c0%201%201%202%203%201%201%200%202%200%201-1s0-1%202-1l3-1v-1l2%201h10a559%20559%200%200139%201l-4%201c-1%202%203%204%205%203l2-1c3%201%2013-1%2012-2l1-2-2-3c-3-3-11-6-14-4-2%201-6-1-8-4s1-3%203%200c2%202%202%202%203%201%201-2%2014-2%2015%200l3%201%202%201c0%202%206%202%2010%201l7-3c5-2%205-2%205-5l1-4%201%202%201%201%202%201c1%202%206%201%209-2%202-1%202-1%201%201%200%202%200%203%202%203%204%201%205-1%202-4l-3-2%205-3c5-4%206-4%203-1s-2%206%201%207c1%200%202%201%201%202-1%202%202%201%204-1%201-2%203-3%206-4%204-1%2015-11%2015-13l4-5c5-4%202-8-4-4h-4l-4%201-2%202v-2c3-2%202-4-1-4h-36m-69%207l-4%205-3%205c-3%204-4%207-1%206l1%201%202%201%203%202%204%202%203-1c1%200%202-1%201-2v-4l-1-1c-3%200-2-2%200-2%201-1%202%200%203%202l1%202c2-1%203-1%203%201v1c2%200%203-8%201-11l-1-5c-1-6-6-7-12-2m-162%2037l-8%201-6%202c-9%200-10%202-1%202l10-1h7c6%201%208%201%204-2-1-1%202-1%2011%201l7%201c4%200%204%200-2-2-9-2-14-3-22-2m-51%2011c-1%202-4%202-12%203v1c2%201%202%201-1%203l-6%202c-4%200-5%202-2%202%202%200%202%200%200%202l-3%201%203-1c3%200%203%200%202%201l-5%202c-3%200-3%200-2-1v-1c-4%200-7%202-8%203%200%202-1%204-3%204-3%200-3%204%201%205l16%203a5251%205251%200%20018-1c-4-1-8-6-6-7%202%200%201-2-1-2l-2-1%202-1%202-2%201-1%203-1-2-1h-2l10-4h3c2-2%205-2%2011-2%2011%200%2011%200%2010-1-1-2-1-2%203-3%203%200%204-1%204-2%200-2-7-1-12%202-4%202-4%202-3%200l-3-1c-3%201-4%200-4-1%200-2-1-2-2%200m206%204v2c3%200%202%205-1%206-2%200-3%202-4%204-2%203-4%204-3%201l-1-2v2h-4c-1-1-1-1%201-1h2l-2-1c-1-1-3-2-5-1-3%200-5%202-3%203l1%202%202%201%204%201%205%201h3c1%201-2%203-4%202-3%200-3%200-3%202%201%202%200%202-1%203-4%201-2%202%205%201l6%201-1%201c-1-1-2%200-1%202%204%203%206%200%205-7%200-5%201-8%203-8l2-1%203-2c1%201%204%200%204-1%200-2-3-5-5-5l-2-2-2-2c-2-1-2-1%200-2s2-1%200-1l-4%201m-123%209l-5%201-4%201-1%202-1-1v-2l-1%201v2l-5%203-8%203-2%203h3c3%201%207%200%207-1s5-3%208-3c6%201%209-1%205-3h2c2%200%202%200%201-1h1c2%200%202%200%201-1s0-1%202-2c4-1%204-1%200-2h-3m92%204c-3%200-4%201-4%203s-5%204-12%205c-4%200-5-1-2-3h3l-3-1-10%203-4%201c-2%200-3%200-2%201l2%202%203%201h4l1-2%201%202-2%202c-1%200-2%200-1%202%200%202%203%201%204-1%201-1%201-1%201%201-1%202%200%202%201%203%202%200%202%200%201%202-2%201-6%202-5%200l-1-1-2%202-4%203-3%203%201%201h1l-1%201%204%202%205%202h6l4%201%204%201c3%200%203%200%201%201s-2%201-1%202h6l3%202v3l-4%201h-4v3l6%201%2013%201h7l1-4%201-5-2-1-2-2-1-3%202%201c2%202%203%202%203%200h1l1%202c-1%202%200%203%202%202%202%200%202-1%201-2v-1l1%201%2010-1-1-1c-2-2-2-3%201-3%204%200%206-2%207-6l3-5%203-4%203-1%207-5h-6l-6%201-1%201-2%201-2%201c1%201-3%205-5%204l-5%202c-2%202-4%203-5%202h-3c-1%201-1%201%202%203l3%201h-4l-3%201h-6l-6%201c-2%200-2%200%200%201%201%201%201%201-1%201l-6%201h-17c-4%200-5%200-7-2-1-1-3-2-5-1-2%200-3%200-3-2-1-2%200-2%203-3%205-1%2016%200%2017%202l2%201h5c2-3%207-3%207%200-1%202%202%201%205-1%202-1%202-1%202%201h2l4-1c3%200%204-2%201-3l-2-1h-3c-1%200-3%200-5-2l-4-2c-2%200-2%200%200-2s2-2%200-3h-3c3%204-5%208-8%205h-1c-2%201-8%200-8-2-1-2%201-4%203-3%201%200%207-4%206-5-2-1%201-2%207-2%204%201%205%200%207-2%204-3%204-3-1-3-2%200-3%200-2-1l2-1h-6m-49%208v2l-1%201-1-1c-1-2-5%202-5%204l-1%201c-2%200-5%204-5%206%200%203%200%204-1%202s-1-2-7-2l-4-1c1-2%200-2-2-2l-3%202c0%202-3%203-3%201l-10-1-11-1h6l-3-2-4-2%201%201-2%202-3%201h-4c-3%201%206%203%2020%204%2026%201%2036%203%2036%205l1%201%201-1h2l2-1%202-2c4-1%203-4-1-4l-2-1%202-1%202-1c-1-2%203-6%208-6%205-1%203-3-4-2-5%200-6%200-5-2%200-2-1-3-1%200m151%2059l-5%201c-3%200-4%201-5%203v2l1-2c1-2%204-3%206-1v3c-2%202-2%202%201%202l5%202c2%200%202%200%201-2h1c1%202%202%202%202%201l1%201h1l1-1h2v-2c2%200%206-4%206-6h-2l-10-1c1%201%200%201-2%201v-1c1-2%201-2-1-2-1%200-2%200-1%201l-1%201-1-1v1m46%205v1l2%201h-4l-4%201-4%201-4%201-1%201-1%201-2%201c-3-1-5%201-3%202l2%203v1l2-1c0-1%201-2%204-1s4%202%202%202c-2%201-1%201%204%201%203%201%204%202%201%202s-7%203-5%203h2c2-1%207-1%207%201s2%201%203-1h4l1-1h7c5%201%204%201%205-9%200-10%200-11-7-9h-5c-1-1-5-2-6-1'%20fill='%23FFC600'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":1.3333333333333333,"src":"/static/5291cae0874d498e84c318829d3652ec/f422e/featured-image.jpg","srcSet":"/static/5291cae0874d498e84c318829d3652ec/e75b5/featured-image.jpg 160w,\n/static/5291cae0874d498e84c318829d3652ec/c01e2/featured-image.jpg 320w,\n/static/5291cae0874d498e84c318829d3652ec/f422e/featured-image.jpg 640w,\n/static/5291cae0874d498e84c318829d3652ec/a6352/featured-image.jpg 960w,\n/static/5291cae0874d498e84c318829d3652ec/ec6c5/featured-image.jpg 1280w","srcWebp":"/static/5291cae0874d498e84c318829d3652ec/991d2/featured-image.webp","srcSetWebp":"/static/5291cae0874d498e84c318829d3652ec/578e8/featured-image.webp 160w,\n/static/5291cae0874d498e84c318829d3652ec/8dbf3/featured-image.webp 320w,\n/static/5291cae0874d498e84c318829d3652ec/991d2/featured-image.webp 640w,\n/static/5291cae0874d498e84c318829d3652ec/1fb14/featured-image.webp 960w,\n/static/5291cae0874d498e84c318829d3652ec/135cd/featured-image.webp 1280w","sizes":"(max-width: 640px) 100vw, 640px"}}}},"excerpt":"Introduction This is a cheatsheet for adding Tailwind CSS support for a Snowpack project (bootstrapped with React+TypeScript template…","fields":{"year":"2021","slug":"/blog/2021/01/28/adding-tailwind-css-to-react-snowpack-project/"}}},"pageContext":{"id":"e9fc5f66-b4e3-5f74-8107-95cd8e2d4abd"}},"staticQueryHashes":["398935099"]}