Don't need gatsby eslint plugin

README.md

@@ -9,8 +9,10 @@ Kick off your project with this opinionated boilerplate. This starter ships with
 - [Husky](https://github.com/typicode/husky)
 - [Jest](https://jestjs.io/)
 - [lint-staged](https://github.com/okonet/lint-staged)
+- [PostCss](https://postcss.org/)
 - [Prettier](https://prettier.io/)
 - [Storybook](https://storybook.js.org/)
+- [Tailwind CSS](https://tailwindcss.com/)
 - [TypeScript](https://www.typescriptlang.org/)
 
 _Have another more specific idea? You may want to check out the vibrant collection of [official and community-created starters](https://www.gatsbyjs.org/docs/gatsby-starters/)._
@@ -63,6 +65,7 @@ A quick look at the top-level files and directories you'll see.
     ├── LICENSE
     ├── package-lock.json
     ├── package.json
+    ├── postcss.config.js
     └── README.md
 
 1.  **`.storybook`**: This is a configuration directory for [Storybook](https://storybook.js.org/). Storybook is a UI development environment for your UI components.
@@ -93,11 +96,15 @@ A quick look at the top-level files and directories you'll see.
 
 14. **`package.json`**: A manifest file for Node.js projects, which includes things like metadata (the project’s name, author, etc). This manifest is how npm knows which packages to install for your project.
 
-15. **`README.md`**: A text file containing useful reference information about your project.
+15. **`postcss.config.js`**: This is the configuration file for [PostCSS](https://postcss.org/)
 
-16. **`tsconfig.json`**: This is a [configuration file](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) for [TypeScript](https://www.typescriptlang.org/).
+16. **`README.md`**: A text file containing useful reference information about your project.
 
-17. **`yarn.lock`** (See `package.json` below, first). This is an [automatically generated file](https://classic.yarnpkg.com/en/docs/yarn-lock/) based on the exact versions of your npm dependencies that were installed for your project. **(You won’t change this file directly).**
+17. **`tailwind.config.js`**: This is the configuration file for [Tailwind CSS](https://tailwindcss.com/)
+
+18. **`tsconfig.json`**: This is a [configuration file](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) for [TypeScript](https://www.typescriptlang.org/).
+
+19. **`yarn.lock`** (See `package.json` below, first). This is an [automatically generated file](https://classic.yarnpkg.com/en/docs/yarn-lock/) based on the exact versions of your npm dependencies that were installed for your project. **(You won’t change this file directly).**
 
 ## 🎓 Learning Gatsby
 

gatsby-config.js

@@ -29,8 +29,8 @@ module.exports = {
         icon: "src/images/gatsby-icon.png", // This path is relative to the root of the site.
       },
     },
-    "gatsby-plugin-eslint",
     "gatsby-plugin-emotion",
+    `gatsby-plugin-postcss`,
     // this (optional) plugin enables Progressive Web App + Offline functionality
     // To learn more, visit: https://gatsby.dev/offline
     // `gatsby-plugin-offline`,

package.json

@@ -9,6 +9,7 @@
     "gatsby-image": "^2.4.4",
     "gatsby-plugin-manifest": "^2.4.5",
     "gatsby-plugin-offline": "^3.2.3",
+    "gatsby-plugin-postcss": "^2.3.3",
     "gatsby-plugin-react-helmet": "^3.3.1",
     "gatsby-plugin-sharp": "^2.6.4",
     "gatsby-source-filesystem": "^2.3.4",
@@ -49,7 +50,6 @@
     "eslint-plugin-react": "^7.20.0",
     "eslint-plugin-react-hooks": "^4.0.4",
     "gatsby-plugin-emotion": "^4.3.3",
-    "gatsby-plugin-eslint": "^2.0.8",
     "husky": ">=4",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^26.0.1",
@@ -57,6 +57,8 @@
     "lint-staged": ">=10",
     "prettier": "^2.0.5",
     "react-test-renderer": "^16.13.1",
+    "tailwindcss": "^1.4.6",
+    "twin.macro": "^1.3.0",
     "typescript": "^3.9.3"
   },
   "keywords": [
@@ -87,7 +89,7 @@
   },
   "husky": {
     "hooks": {
-      "pre-commit": "tsc && jest --coverage &&  lint-staged"
+      "pre-commit": "tsc && jest --coverage && lint-staged"
     }
   },
   "lint-staged": {

postcss.config.js

@@ -0,0 +1,3 @@
+module.exports = () => ({
+  plugins: [require("tailwindcss")],
+})

src/components/__snapshots__/header.test.tsx.snap

@@ -5,51 +5,23 @@ Array [
   <style
     dangerouslySetInnerHTML={
       Object {
-        "__html": ".css-1pcnel4-Header{background:rebeccapurple;margin-bottom:1.45rem;}",
+        "__html": ".css-i2fnqt-Header{--bg-opacity:1;background-color:rgba(128,90,213,var(--bg-opacity));margin-bottom:1.5rem;}",
       }
     }
-    data-emotion-css="1pcnel4-Header"
+    data-emotion-css="i2fnqt-Header"
   />,
   <header
-    className="css-1pcnel4-Header e1qr1m9j0"
+    className="css-i2fnqt-Header e1qr1m9j0"
   >
-    <style
-      dangerouslySetInnerHTML={
-        Object {
-          "__html": ".css-pf9rd5-Container{margin:0 auto;max-width:960;padding:1.45rem 1.0875rem;}",
-        }
-      }
-      data-emotion-css="pf9rd5-Container"
-    />
     <div
-      className="css-pf9rd5-Container e1qr1m9j1"
+      className="headerContainer"
     >
-      <style
+      <a
-        dangerouslySetInnerHTML={
+        className="headerLink"
-          Object {
+        href="/"
-            "__html": ".css-1ikcnub-H1{margin:0;}",
-          }
-        }
-        data-emotion-css="1ikcnub-H1"
-      />
-      <h1
-        className="css-1ikcnub-H1 e1qr1m9j2"
       >
-        <style
+        Default Starter
-          dangerouslySetInnerHTML={
+      </a>
-            Object {
-              "__html": ".css-rkbe0q-StyledLink{color:white;-webkit-text-decoration:none;text-decoration:none;}",
-            }
-          }
-          data-emotion-css="rkbe0q-StyledLink"
-        />
-        <a
-          className="css-rkbe0q-StyledLink e1qr1m9j3"
-          href="/"
-        >
-          Default Starter
-        </a>
-      </h1>
     </div>
   </header>,
 ]

src/components/__snapshots__/layout.test.tsx.snap

@@ -5,63 +5,27 @@ Array [
   <style
     dangerouslySetInnerHTML={
       Object {
-        "__html": ".css-1pcnel4-Header{background:rebeccapurple;margin-bottom:1.45rem;}",
+        "__html": ".css-i2fnqt-Header{--bg-opacity:1;background-color:rgba(128,90,213,var(--bg-opacity));margin-bottom:1.5rem;}",
       }
     }
-    data-emotion-css="1pcnel4-Header"
+    data-emotion-css="i2fnqt-Header"
   />,
   <header
-    className="css-1pcnel4-Header e1qr1m9j0"
+    className="css-i2fnqt-Header e1qr1m9j0"
   >
-    <style
-      dangerouslySetInnerHTML={
-        Object {
-          "__html": ".css-pf9rd5-Container{margin:0 auto;max-width:960;padding:1.45rem 1.0875rem;}",
-        }
-      }
-      data-emotion-css="pf9rd5-Container"
-    />
     <div
-      className="css-pf9rd5-Container e1qr1m9j1"
+      className="headerContainer"
     >
-      <style
+      <a
-        dangerouslySetInnerHTML={
+        className="headerLink"
-          Object {
+        href="/"
-            "__html": ".css-1ikcnub-H1{margin:0;}",
-          }
-        }
-        data-emotion-css="1ikcnub-H1"
-      />
-      <h1
-        className="css-1ikcnub-H1 e1qr1m9j2"
       >
-        <style
+        Gatsby Default Starter
-          dangerouslySetInnerHTML={
+      </a>
-            Object {
-              "__html": ".css-rkbe0q-StyledLink{color:white;-webkit-text-decoration:none;text-decoration:none;}",
-            }
-          }
-          data-emotion-css="rkbe0q-StyledLink"
-        />
-        <a
-          className="css-rkbe0q-StyledLink e1qr1m9j3"
-          href="/"
-        >
-          Gatsby Default Starter
-        </a>
-      </h1>
     </div>
   </header>,
-  <style
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": ".css-15zhpu-Container{margin:0 auto;max-width:960;padding:0 1.0875rem 1.45rem;}",
-      }
-    }
-    data-emotion-css="15zhpu-Container"
-  />,
   <div
-    className="css-15zhpu-Container e9jw82o0"
+    className="layoutContainer"
   >
     <main>
       children

src/components/header.tsx

@@ -2,35 +2,20 @@ import { Link } from "gatsby"
 import React from "react"
 import { HeaderInterface } from "../@types/components/header"
 import styled from "@emotion/styled"
+import tw from "twin.macro"
 
 const Header: React.FC<HeaderInterface> = ({ siteTitle }) => {
   const Header = styled.header`
-    background: rebeccapurple;
+    ${tw`bg-purple-600 mb-6`}
-    margin-bottom: 1.45rem;
-  `
-
-  const Container = styled.div`
-    margin: 0 auto;
-    max-width: 960;
-    padding: 1.45rem 1.0875rem;
-  `
-
-  const H1 = styled.h1`
-    margin: 0;
-  `
-
-  const StyledLink = styled(Link)`
-    color: white;
-    text-decoration: none;
   `
 
   return (
     <Header>
-      <Container>
+      <div className={"headerContainer"}>
-        <H1>
+        <Link className={"headerLink"} to={"/"}>
-          <StyledLink to="/">{siteTitle}</StyledLink>
+          {siteTitle}
-        </H1>
+        </Link>
-      </Container>
+      </div>
     </Header>
   )
 }

src/components/layout.css

@@ -1,622 +0,0 @@
-html {
-  font-family: sans-serif;
-  -ms-text-size-adjust: 100%;
-  -webkit-text-size-adjust: 100%;
-}
-body {
-  margin: 0;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-main,
-menu,
-nav,
-section,
-summary {
-  display: block;
-}
-audio,
-canvas,
-progress,
-video {
-  display: inline-block;
-}
-audio:not([controls]) {
-  display: none;
-  height: 0;
-}
-progress {
-  vertical-align: baseline;
-}
-[hidden],
-template {
-  display: none;
-}
-a {
-  background-color: transparent;
-  -webkit-text-decoration-skip: objects;
-}
-a:active,
-a:hover {
-  outline-width: 0;
-}
-abbr[title] {
-  border-bottom: none;
-  text-decoration: underline;
-  text-decoration: underline dotted;
-}
-b,
-strong {
-  font-weight: inherit;
-  font-weight: bolder;
-}
-dfn {
-  font-style: italic;
-}
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-mark {
-  background-color: #ff0;
-  color: #000;
-}
-small {
-  font-size: 80%;
-}
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-sub {
-  bottom: -0.25em;
-}
-sup {
-  top: -0.5em;
-}
-img {
-  border-style: none;
-}
-svg:not(:root) {
-  overflow: hidden;
-}
-code,
-kbd,
-pre,
-samp {
-  font-family: monospace, monospace;
-  font-size: 1em;
-}
-figure {
-  margin: 1em 40px;
-}
-hr {
-  box-sizing: content-box;
-  height: 0;
-  overflow: visible;
-}
-button,
-input,
-optgroup,
-select,
-textarea {
-  font: inherit;
-  margin: 0;
-}
-optgroup {
-  font-weight: 700;
-}
-button,
-input {
-  overflow: visible;
-}
-button,
-select {
-  text-transform: none;
-}
-[type="reset"],
-[type="submit"],
-button,
-html [type="button"] {
-  -webkit-appearance: button;
-}
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner,
-button::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-[type="button"]:-moz-focusring,
-[type="reset"]:-moz-focusring,
-[type="submit"]:-moz-focusring,
-button:-moz-focusring {
-  outline: 1px dotted ButtonText;
-}
-fieldset {
-  border: 1px solid silver;
-  margin: 0 2px;
-  padding: 0.35em 0.625em 0.75em;
-}
-legend {
-  box-sizing: border-box;
-  color: inherit;
-  display: table;
-  max-width: 100%;
-  padding: 0;
-  white-space: normal;
-}
-textarea {
-  overflow: auto;
-}
-[type="checkbox"],
-[type="radio"] {
-  box-sizing: border-box;
-  padding: 0;
-}
-[type="number"]::-webkit-inner-spin-button,
-[type="number"]::-webkit-outer-spin-button {
-  height: auto;
-}
-[type="search"] {
-  -webkit-appearance: textfield;
-  outline-offset: -2px;
-}
-[type="search"]::-webkit-search-cancel-button,
-[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-::-webkit-input-placeholder {
-  color: inherit;
-  opacity: 0.54;
-}
-::-webkit-file-upload-button {
-  -webkit-appearance: button;
-  font: inherit;
-}
-html {
-  font: 112.5%/1.45em georgia, serif;
-  box-sizing: border-box;
-  overflow-y: scroll;
-}
-* {
-  box-sizing: inherit;
-}
-*:before {
-  box-sizing: inherit;
-}
-*:after {
-  box-sizing: inherit;
-}
-body {
-  color: hsla(0, 0%, 0%, 0.8);
-  font-family: georgia, serif;
-  font-weight: normal;
-  word-wrap: break-word;
-  font-kerning: normal;
-  -moz-font-feature-settings: "kern", "liga", "clig", "calt";
-  -ms-font-feature-settings: "kern", "liga", "clig", "calt";
-  -webkit-font-feature-settings: "kern", "liga", "clig", "calt";
-  font-feature-settings: "kern", "liga", "clig", "calt";
-}
-img {
-  max-width: 100%;
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-h1 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  color: inherit;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  font-weight: bold;
-  text-rendering: optimizeLegibility;
-  font-size: 2.25rem;
-  line-height: 1.1;
-}
-h2 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  color: inherit;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  font-weight: bold;
-  text-rendering: optimizeLegibility;
-  font-size: 1.62671rem;
-  line-height: 1.1;
-}
-h3 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  color: inherit;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  font-weight: bold;
-  text-rendering: optimizeLegibility;
-  font-size: 1.38316rem;
-  line-height: 1.1;
-}
-h4 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  color: inherit;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  font-weight: bold;
-  text-rendering: optimizeLegibility;
-  font-size: 1rem;
-  line-height: 1.1;
-}
-h5 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  color: inherit;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  font-weight: bold;
-  text-rendering: optimizeLegibility;
-  font-size: 0.85028rem;
-  line-height: 1.1;
-}
-h6 {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  color: inherit;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  font-weight: bold;
-  text-rendering: optimizeLegibility;
-  font-size: 0.78405rem;
-  line-height: 1.1;
-}
-hgroup {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-ul {
-  margin-left: 1.45rem;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  list-style-position: outside;
-  list-style-image: none;
-}
-ol {
-  margin-left: 1.45rem;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  list-style-position: outside;
-  list-style-image: none;
-}
-dl {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-dd {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-p {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-figure {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-pre {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  margin-bottom: 1.45rem;
-  font-size: 0.85rem;
-  line-height: 1.42;
-  background: hsla(0, 0%, 0%, 0.04);
-  border-radius: 3px;
-  overflow: auto;
-  word-wrap: normal;
-  padding: 1.45rem;
-}
-table {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-  font-size: 1rem;
-  line-height: 1.45rem;
-  border-collapse: collapse;
-  width: 100%;
-}
-fieldset {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-blockquote {
-  margin-left: 1.45rem;
-  margin-right: 1.45rem;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-form {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-noscript {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-iframe {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-hr {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: calc(1.45rem - 1px);
-  background: hsla(0, 0%, 0%, 0.2);
-  border: none;
-  height: 1px;
-}
-address {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  margin-bottom: 1.45rem;
-}
-b {
-  font-weight: bold;
-}
-strong {
-  font-weight: bold;
-}
-dt {
-  font-weight: bold;
-}
-th {
-  font-weight: bold;
-}
-li {
-  margin-bottom: calc(1.45rem / 2);
-}
-ol li {
-  padding-left: 0;
-}
-ul li {
-  padding-left: 0;
-}
-li > ol {
-  margin-left: 1.45rem;
-  margin-bottom: calc(1.45rem / 2);
-  margin-top: calc(1.45rem / 2);
-}
-li > ul {
-  margin-left: 1.45rem;
-  margin-bottom: calc(1.45rem / 2);
-  margin-top: calc(1.45rem / 2);
-}
-blockquote *:last-child {
-  margin-bottom: 0;
-}
-li *:last-child {
-  margin-bottom: 0;
-}
-p *:last-child {
-  margin-bottom: 0;
-}
-li > p {
-  margin-bottom: calc(1.45rem / 2);
-}
-code {
-  font-size: 0.85rem;
-  line-height: 1.45rem;
-}
-kbd {
-  font-size: 0.85rem;
-  line-height: 1.45rem;
-}
-samp {
-  font-size: 0.85rem;
-  line-height: 1.45rem;
-}
-abbr {
-  border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
-  cursor: help;
-}
-acronym {
-  border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
-  cursor: help;
-}
-abbr[title] {
-  border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
-  cursor: help;
-  text-decoration: none;
-}
-thead {
-  text-align: left;
-}
-td,
-th {
-  text-align: left;
-  border-bottom: 1px solid hsla(0, 0%, 0%, 0.12);
-  font-feature-settings: "tnum";
-  -moz-font-feature-settings: "tnum";
-  -ms-font-feature-settings: "tnum";
-  -webkit-font-feature-settings: "tnum";
-  padding-left: 0.96667rem;
-  padding-right: 0.96667rem;
-  padding-top: 0.725rem;
-  padding-bottom: calc(0.725rem - 1px);
-}
-th:first-child,
-td:first-child {
-  padding-left: 0;
-}
-th:last-child,
-td:last-child {
-  padding-right: 0;
-}
-tt,
-code {
-  background-color: hsla(0, 0%, 0%, 0.04);
-  border-radius: 3px;
-  font-family: "SFMono-Regular", Consolas, "Roboto Mono", "Droid Sans Mono",
-    "Liberation Mono", Menlo, Courier, monospace;
-  padding: 0;
-  padding-top: 0.2em;
-  padding-bottom: 0.2em;
-}
-pre code {
-  background: none;
-  line-height: 1.42;
-}
-code:before,
-code:after,
-tt:before,
-tt:after {
-  letter-spacing: -0.2em;
-  content: " ";
-}
-pre code:before,
-pre code:after,
-pre tt:before,
-pre tt:after {
-  content: "";
-}
-@media only screen and (max-width: 480px) {
-  html {
-    font-size: 100%;
-  }
-}

src/components/layout.tsx

@@ -9,12 +9,11 @@ import React from "react"
 import { useStaticQuery, graphql } from "gatsby"
 
 import Header from "./header"
-import "./layout.css"
+import "../utils/layout.css"
 import {
   LayoutDataInterface,
   LayoutInterface,
 } from "../@types/components/layout"
-import styled from "@emotion/styled"
 
 const Layout: React.FC<LayoutInterface> = ({ children }) => {
   const data: LayoutDataInterface = useStaticQuery(graphql`
@@ -27,22 +26,16 @@ const Layout: React.FC<LayoutInterface> = ({ children }) => {
     }
   `)
 
-  const Container = styled.div`
-    margin: 0 auto;
-    max-width: 960;
-    padding: 0 1.0875rem 1.45rem;
-  `
-
   return (
     <>
       <Header siteTitle={data.site.siteMetadata.title} />
-      <Container>
+      <div className={"layoutContainer"}>
         <main>{children}</main>
         <footer>
           © {new Date().getFullYear()}, Built with{" "}
           <a href="https://www.gatsbyjs.org">Gatsby</a>
         </footer>
-      </Container>
+      </div>
     </>
   )
 }

src/pages/404.tsx

@@ -2,12 +2,22 @@ import React from "react"
 
 import Layout from "../components/layout"
 import SEO from "../components/seo"
+import styled from "@emotion/styled"
+import tw from "twin.macro"
+
+const Header = styled.h1`
+  ${tw`text-5xl font-bold`}
+`
+
+const Text = styled.p`
+  ${tw`mt-6 text-xl`}
+`
 
 const NotFoundPage: React.FC = () => (
   <Layout>
     <SEO title="404: Not found" />
-    <h1>NOT FOUND</h1>
+    <Header>NOT FOUND</Header>
-    <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
+    <Text>You just hit a route that doesn&#39;t exist... the sadness.</Text>
   </Layout>
 )
 

src/pages/__snapshots__/404.test.tsx.snap

@@ -5,69 +5,53 @@ Array [
   <style
     dangerouslySetInnerHTML={
       Object {
-        "__html": ".css-1pcnel4-Header{background:rebeccapurple;margin-bottom:1.45rem;}",
+        "__html": ".css-i2fnqt-Header{--bg-opacity:1;background-color:rgba(128,90,213,var(--bg-opacity));margin-bottom:1.5rem;}",
       }
     }
-    data-emotion-css="1pcnel4-Header"
+    data-emotion-css="i2fnqt-Header"
   />,
   <header
-    className="css-1pcnel4-Header e1qr1m9j0"
+    className="css-i2fnqt-Header e1qr1m9j0"
   >
-    <style
-      dangerouslySetInnerHTML={
-        Object {
-          "__html": ".css-pf9rd5-Container{margin:0 auto;max-width:960;padding:1.45rem 1.0875rem;}",
-        }
-      }
-      data-emotion-css="pf9rd5-Container"
-    />
     <div
-      className="css-pf9rd5-Container e1qr1m9j1"
+      className="headerContainer"
     >
+      <a
+        className="headerLink"
+        href="/"
+      >
+        Gatsby Default Starter
+      </a>
+    </div>
+  </header>,
+  <div
+    className="layoutContainer"
+  >
+    <main>
       <style
         dangerouslySetInnerHTML={
           Object {
-            "__html": ".css-1ikcnub-H1{margin:0;}",
+            "__html": ".css-ewljzu-Header{font-size:3rem;font-weight:700;}",
           }
         }
-        data-emotion-css="1ikcnub-H1"
+        data-emotion-css="ewljzu-Header"
       />
       <h1
-        className="css-1ikcnub-H1 e1qr1m9j2"
+        className="css-ewljzu-Header ejw55930"
       >
-        <style
-          dangerouslySetInnerHTML={
-            Object {
-              "__html": ".css-rkbe0q-StyledLink{color:white;-webkit-text-decoration:none;text-decoration:none;}",
-            }
-          }
-          data-emotion-css="rkbe0q-StyledLink"
-        />
-        <a
-          className="css-rkbe0q-StyledLink e1qr1m9j3"
-          href="/"
-        >
-          Gatsby Default Starter
-        </a>
-      </h1>
-    </div>
-  </header>,
-  <style
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": ".css-15zhpu-Container{margin:0 auto;max-width:960;padding:0 1.0875rem 1.45rem;}",
-      }
-    }
-    data-emotion-css="15zhpu-Container"
-  />,
-  <div
-    className="css-15zhpu-Container e9jw82o0"
-  >
-    <main>
-      <h1>
         NOT FOUND
       </h1>
-      <p>
+      <style
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": ".css-1pkr621-Text{margin-top:1.5rem;font-size:1.25rem;}",
+          }
+        }
+        data-emotion-css="1pkr621-Text"
+      />
+      <p
+        className="css-1pkr621-Text ejw55931"
+      >
         You just hit a route that doesn't exist... the sadness.
       </p>
     </main>

src/pages/__snapshots__/index.test.tsx.snap

@@ -5,63 +5,27 @@ Array [
   <style
     dangerouslySetInnerHTML={
       Object {
-        "__html": ".css-1pcnel4-Header{background:rebeccapurple;margin-bottom:1.45rem;}",
+        "__html": ".css-i2fnqt-Header{--bg-opacity:1;background-color:rgba(128,90,213,var(--bg-opacity));margin-bottom:1.5rem;}",
       }
     }
-    data-emotion-css="1pcnel4-Header"
+    data-emotion-css="i2fnqt-Header"
   />,
   <header
-    className="css-1pcnel4-Header e1qr1m9j0"
+    className="css-i2fnqt-Header e1qr1m9j0"
   >
-    <style
-      dangerouslySetInnerHTML={
-        Object {
-          "__html": ".css-pf9rd5-Container{margin:0 auto;max-width:960;padding:1.45rem 1.0875rem;}",
-        }
-      }
-      data-emotion-css="pf9rd5-Container"
-    />
     <div
-      className="css-pf9rd5-Container e1qr1m9j1"
+      className="headerContainer"
     >
-      <style
+      <a
-        dangerouslySetInnerHTML={
+        className="headerLink"
-          Object {
+        href="/"
-            "__html": ".css-1ikcnub-H1{margin:0;}",
-          }
-        }
-        data-emotion-css="1ikcnub-H1"
-      />
-      <h1
-        className="css-1ikcnub-H1 e1qr1m9j2"
       >
-        <style
+        Gatsby Default Starter
-          dangerouslySetInnerHTML={
+      </a>
-            Object {
-              "__html": ".css-rkbe0q-StyledLink{color:white;-webkit-text-decoration:none;text-decoration:none;}",
-            }
-          }
-          data-emotion-css="rkbe0q-StyledLink"
-        />
-        <a
-          className="css-rkbe0q-StyledLink e1qr1m9j3"
-          href="/"
-        >
-          Gatsby Default Starter
-        </a>
-      </h1>
     </div>
   </header>,
-  <style
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": ".css-15zhpu-Container{margin:0 auto;max-width:960;padding:0 1.0875rem 1.45rem;}",
-      }
-    }
-    data-emotion-css="15zhpu-Container"
-  />,
   <div
-    className="css-15zhpu-Container e9jw82o0"
+    className="layoutContainer"
   >
     <main>
       <h1>
@@ -76,13 +40,13 @@ Array [
       <style
         dangerouslySetInnerHTML={
           Object {
-            "__html": ".css-13x59rf-ImageContainer{max-width:300px;margin-bottom:1.45rem;}",
+            "__html": ".css-l6ardv-ImageContainer{max-width:20rem;margin-bottom:1.5rem;margin-top:1rem;}",
           }
         }
-        data-emotion-css="13x59rf-ImageContainer"
+        data-emotion-css="l6ardv-ImageContainer"
       />
       <div
-        className="css-13x59rf-ImageContainer ewcmato0"
+        className="css-l6ardv-ImageContainer ewcmato0"
       >
         <div
           className=" gatsby-image-wrapper"

src/pages/__snapshots__/page-2.test.tsx.snap

@@ -5,63 +5,27 @@ Array [
   <style
     dangerouslySetInnerHTML={
       Object {
-        "__html": ".css-1pcnel4-Header{background:rebeccapurple;margin-bottom:1.45rem;}",
+        "__html": ".css-i2fnqt-Header{--bg-opacity:1;background-color:rgba(128,90,213,var(--bg-opacity));margin-bottom:1.5rem;}",
       }
     }
-    data-emotion-css="1pcnel4-Header"
+    data-emotion-css="i2fnqt-Header"
   />,
   <header
-    className="css-1pcnel4-Header e1qr1m9j0"
+    className="css-i2fnqt-Header e1qr1m9j0"
   >
-    <style
-      dangerouslySetInnerHTML={
-        Object {
-          "__html": ".css-pf9rd5-Container{margin:0 auto;max-width:960;padding:1.45rem 1.0875rem;}",
-        }
-      }
-      data-emotion-css="pf9rd5-Container"
-    />
     <div
-      className="css-pf9rd5-Container e1qr1m9j1"
+      className="headerContainer"
     >
-      <style
+      <a
-        dangerouslySetInnerHTML={
+        className="headerLink"
-          Object {
+        href="/"
-            "__html": ".css-1ikcnub-H1{margin:0;}",
-          }
-        }
-        data-emotion-css="1ikcnub-H1"
-      />
-      <h1
-        className="css-1ikcnub-H1 e1qr1m9j2"
       >
-        <style
+        Gatsby Default Starter
-          dangerouslySetInnerHTML={
+      </a>
-            Object {
-              "__html": ".css-rkbe0q-StyledLink{color:white;-webkit-text-decoration:none;text-decoration:none;}",
-            }
-          }
-          data-emotion-css="rkbe0q-StyledLink"
-        />
-        <a
-          className="css-rkbe0q-StyledLink e1qr1m9j3"
-          href="/"
-        >
-          Gatsby Default Starter
-        </a>
-      </h1>
     </div>
   </header>,
-  <style
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": ".css-15zhpu-Container{margin:0 auto;max-width:960;padding:0 1.0875rem 1.45rem;}",
-      }
-    }
-    data-emotion-css="15zhpu-Container"
-  />,
   <div
-    className="css-15zhpu-Container e9jw82o0"
+    className="layoutContainer"
   >
     <main>
       <h1>

src/pages/__snapshots__/using-typescript.test.tsx.snap

@@ -5,63 +5,27 @@ Array [
   <style
     dangerouslySetInnerHTML={
       Object {
-        "__html": ".css-1pcnel4-Header{background:rebeccapurple;margin-bottom:1.45rem;}",
+        "__html": ".css-i2fnqt-Header{--bg-opacity:1;background-color:rgba(128,90,213,var(--bg-opacity));margin-bottom:1.5rem;}",
       }
     }
-    data-emotion-css="1pcnel4-Header"
+    data-emotion-css="i2fnqt-Header"
   />,
   <header
-    className="css-1pcnel4-Header e1qr1m9j0"
+    className="css-i2fnqt-Header e1qr1m9j0"
   >
-    <style
-      dangerouslySetInnerHTML={
-        Object {
-          "__html": ".css-pf9rd5-Container{margin:0 auto;max-width:960;padding:1.45rem 1.0875rem;}",
-        }
-      }
-      data-emotion-css="pf9rd5-Container"
-    />
     <div
-      className="css-pf9rd5-Container e1qr1m9j1"
+      className="headerContainer"
     >
-      <style
+      <a
-        dangerouslySetInnerHTML={
+        className="headerLink"
-          Object {
+        href="/"
-            "__html": ".css-1ikcnub-H1{margin:0;}",
-          }
-        }
-        data-emotion-css="1ikcnub-H1"
-      />
-      <h1
-        className="css-1ikcnub-H1 e1qr1m9j2"
       >
-        <style
+        Gatsby Default Starter
-          dangerouslySetInnerHTML={
+      </a>
-            Object {
-              "__html": ".css-rkbe0q-StyledLink{color:white;-webkit-text-decoration:none;text-decoration:none;}",
-            }
-          }
-          data-emotion-css="rkbe0q-StyledLink"
-        />
-        <a
-          className="css-rkbe0q-StyledLink e1qr1m9j3"
-          href="/"
-        >
-          Gatsby Default Starter
-        </a>
-      </h1>
     </div>
   </header>,
-  <style
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": ".css-15zhpu-Container{margin:0 auto;max-width:960;padding:0 1.0875rem 1.45rem;}",
-      }
-    }
-    data-emotion-css="15zhpu-Container"
-  />,
   <div
-    className="css-15zhpu-Container e9jw82o0"
+    className="layoutContainer"
   >
     <main>
       <h1>

src/pages/index.tsx

@@ -1,16 +1,17 @@
 import React from "react"
-import { Link } from "gatsby"
 
 import Layout from "../components/layout"
 import Image from "../components/image"
 import SEO from "../components/seo"
 import styled from "@emotion/styled"
+import tw from "twin.macro"
+import { Link } from "gatsby"
 
 const IndexPage: React.FC = () => {
   const ImageContainer = styled.div`
-    max-width: 300px;
+    ${tw`max-w-xs mb-6 mt-4`}
-    margin-bottom: 1.45rem;
   `
+
   return (
     <Layout>
       <SEO title="Home" />

src/pages/using-typescript.tsx

@@ -1,6 +1,6 @@
 // If you don't want to use TypeScript you can delete this file!
 import React from "react"
-import { Link, graphql } from "gatsby"
+import { graphql, Link } from "gatsby"
 
 import Layout from "../components/layout"
 import SEO from "../components/seo"

src/utils/layout.css

@@ -0,0 +1,29 @@
+@tailwind base;
+
+div.layoutContainer {
+  @apply m-0 m-auto max-w-screen-md pt-6 pr-4;
+}
+
+div.headerContainer {
+  @apply m-0 m-auto max-w-screen-md pt-6 pr-4 pb-6;
+}
+
+a.headerLink {
+  @apply text-white no-underline text-4xl font-black;
+}
+
+a {
+  @apply font-bold text-blue-600 underline;
+}
+
+h1 {
+  @apply text-4xl font-bold;
+}
+
+p {
+  @apply mt-6 text-xl;
+}
+
+footer {
+  @apply mt-8;
+}

tailwind.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  purge: ["./src/**/*.js", "./src/**/*.jsx", "./src/**/*.ts", "./src/**/*.tsx"],
+  theme: {
+    extend: {},
+  },
+  variants: {},
+  plugins: [],
+}

yarn.lock

@@ -325,7 +325,7 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
-"@babel/parser@7.10.2", "@babel/parser@^7.0.0", "@babel/parser@^7.1.0", "@babel/parser@^7.10.1", "@babel/parser@^7.10.2", "@babel/parser@^7.7.0", "@babel/parser@^7.9.0", "@babel/parser@^7.9.6":
+"@babel/parser@7.10.2", "@babel/parser@^7.0.0", "@babel/parser@^7.1.0", "@babel/parser@^7.10.1", "@babel/parser@^7.10.2", "@babel/parser@^7.7.0", "@babel/parser@^7.9.0", "@babel/parser@^7.9.4", "@babel/parser@^7.9.6":
   version "7.10.2"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.10.2.tgz#871807f10442b92ff97e4783b9b54f6a0ca812d0"
   integrity sha512-PApSXlNMJyB4JiGVhCOlzKIif+TKFTvu0aQAhnTvfP/z3vVSN6ZypH5bfUNwFXXjRQtUEBNFd2PtmCmG2Py3qQ==
@@ -1345,6 +1345,14 @@
   resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
   integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
 
+"@fullhuman/postcss-purgecss@^2.1.2":
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/@fullhuman/postcss-purgecss/-/postcss-purgecss-2.2.0.tgz#2b3699287163ff515f25ccdae5b96a244eebb41a"
+  integrity sha512-q4zYAn8L9olA5uneaLhxkHRBoug9dnAqytbdX9R5dbzSORobhYr1yGR2JN3Q1UMd5RB0apm1NvJekHaymal/BQ==
+  dependencies:
+    postcss "7.0.28"
+    purgecss "^2.2.0"
+
 "@graphql-tools/code-file-loader@6.0.7":
   version "6.0.7"
   resolved "https://registry.yarnpkg.com/@graphql-tools/code-file-loader/-/code-file-loader-6.0.7.tgz#2e0644a621f2ab16cd902172eaee580debc879d0"
@@ -3690,7 +3698,16 @@ acorn-jsx@^5.0.1, acorn-jsx@^5.2.0:
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.2.0.tgz#4c66069173d6fdd68ed85239fc256226182b2ebe"
   integrity sha512-HiUX/+K2YpkpJ+SzBffkM/AQ2YE03S0U1kjTLVpoJdhZMOWy8qvXVN9JdLqv2QsaQ6MPYQIuNmwD8zOiYUofLQ==
 
-acorn-walk@^7.1.1:
+acorn-node@^1.6.1:
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/acorn-node/-/acorn-node-1.8.2.tgz#114c95d64539e53dede23de8b9d96df7c7ae2af8"
+  integrity sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==
+  dependencies:
+    acorn "^7.0.0"
+    acorn-walk "^7.0.0"
+    xtend "^4.0.2"
+
+acorn-walk@^7.0.0, acorn-walk@^7.1.1:
   version "7.1.1"
   resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-7.1.1.tgz#345f0dffad5c735e7373d2fec9a1023e6a44b83e"
   integrity sha512-wdlPY2tm/9XBr7QkKlq0WQVgiuGTX6YWPyRyBviSoScBuLfTVQhvwg6wJ369GJ/1nPfTLMfnrFIfjqVg6d+jQQ==
@@ -3700,7 +3717,7 @@ acorn@^6.1.1, acorn@^6.4.1:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.4.1.tgz#531e58ba3f51b9dacb9a6646ca4debf5b14ca474"
   integrity sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA==
 
-acorn@^7.1.1, acorn@^7.2.0:
+acorn@^7.0.0, acorn@^7.1.1, acorn@^7.2.0:
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.2.0.tgz#17ea7e40d7c8640ff54a694c889c26f31704effe"
   integrity sha512-apwXVmYVpQ34m/i71vrApRrRKCWQnZZF1+npOD0WV5xZFfwWOmKGQ2RWlfdy9vWITsenisM8M0Qeq8agcFHNiQ==
@@ -4212,7 +4229,7 @@ auto-bind@^4.0.0:
   resolved "https://registry.yarnpkg.com/auto-bind/-/auto-bind-4.0.0.tgz#e3589fc6c2da8f7ca43ba9f84fa52a744fc997fb"
   integrity sha512-Hdw8qdNiqdJ8LqT0iK0sVzkFbzg6fhnQqqfWhBDxcHZvU75+B+ayzTy8x+k5Ix0Y92XOhOUlx74ps+bA6BeYMQ==
 
-autoprefixer@^9.7.2, autoprefixer@^9.8.0:
+autoprefixer@^9.4.5, autoprefixer@^9.7.2, autoprefixer@^9.8.0:
   version "9.8.0"
   resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.8.0.tgz#68e2d2bef7ba4c3a65436f662d0a56a741e56511"
   integrity sha512-D96ZiIHXbDmU02dBaemyAg53ez+6F5yZmapmgKcjm35yEe1uVDYI8hGW3VYoGRaG290ZFf91YxHrR518vC0u/A==
@@ -5217,7 +5234,7 @@ bytes@3.0.0:
   resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048"
   integrity sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=
 
-bytes@3.1.0:
+bytes@3.1.0, bytes@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.0.tgz#f6cf7933a360e0588fa9fde85651cdc7f805d1f6"
   integrity sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==
@@ -5366,7 +5383,7 @@ camel-case@4.1.1, camel-case@^4.1.1:
     pascal-case "^3.1.1"
     tslib "^1.10.0"
 
-camelcase-css@2.0.1:
+camelcase-css@2.0.1, camelcase-css@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/camelcase-css/-/camelcase-css-2.0.1.tgz#ee978f6947914cc30c6b44741b6ed1df7f043fd5"
   integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==
@@ -5625,6 +5642,11 @@ clean-css@^4.2.3:
   dependencies:
     source-map "~0.6.0"
 
+clean-set@^1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/clean-set/-/clean-set-1.1.2.tgz#76d8bf238c3e27827bfa73073ecdfdc767187070"
+  integrity sha512-cA8uCj0qSoG9e0kevyOWXwPaELRPVg5Pxp6WskLMwerx257Zfnh8Nl0JBH59d7wQzij2CK7qEfJQK3RjuKKIug==
+
 clean-stack@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/clean-stack/-/clean-stack-2.2.0.tgz#ee8472dbb129e727b31e8a10a427dee9dfe4008b"
@@ -5840,7 +5862,7 @@ commander@^4.0.1, commander@^4.1.1:
   resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"
   integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==
 
-commander@^5.1.0:
+commander@^5.0.0, commander@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-5.1.0.tgz#46abbd1652f8e059bddaef99bbdcb2ad9cf179ae"
   integrity sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==
@@ -6367,6 +6389,11 @@ css-tree@1.0.0-alpha.39:
     mdn-data "2.0.6"
     source-map "^0.6.1"
 
+css-unit-converter@^1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/css-unit-converter/-/css-unit-converter-1.1.2.tgz#4c77f5a1954e6dbff60695ecb214e3270436ab21"
+  integrity sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA==
+
 css-what@2.1:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.3.tgz#a6d7604573365fe74686c3f311c56513d88285f2"
@@ -6755,6 +6782,11 @@ define-property@^2.0.2:
     is-descriptor "^1.0.2"
     isobject "^3.0.1"
 
+defined@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/defined/-/defined-1.0.0.tgz#c98d9bcef75674188e110969151199e39b1fa693"
+  integrity sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM=
+
 del@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/del/-/del-4.1.1.tgz#9e8f117222ea44a31ff3a156c049b99052a9f0b4"
@@ -6879,6 +6911,15 @@ detect-port@^1.3.0:
     address "^1.0.1"
     debug "^2.6.0"
 
+detective@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/detective/-/detective-5.2.0.tgz#feb2a77e85b904ecdea459ad897cc90a99bd2a7b"
+  integrity sha512-6SsIx+nUUbuK0EthKjv0zrdnajCCXVYGmbYYiYjFVpzcjwEs/JMDZ8tPRG29J/HhN56t3GJp2cGSWDRjjot8Pg==
+  dependencies:
+    acorn-node "^1.6.1"
+    defined "^1.0.0"
+    minimist "^1.1.1"
+
 devcert@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/devcert/-/devcert-1.1.0.tgz#255508c20dd21045e3020acf438491b745835dfd"
@@ -6942,6 +6983,11 @@ dir-glob@^3.0.1:
   dependencies:
     path-type "^4.0.0"
 
+dlv@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/dlv/-/dlv-1.1.3.tgz#5c198a8a11453596e751494d49874bc7732f2e79"
+  integrity sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==
+
 dns-equal@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/dns-equal/-/dns-equal-1.0.0.tgz#b39e7f1da6eb0a75ba9c17324b34753c47e0654d"
@@ -7150,6 +7196,11 @@ download@^7.1.0:
     p-event "^2.1.0"
     pify "^3.0.0"
 
+dset@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/dset/-/dset-2.0.1.tgz#a15fff3d1e4d60ac0c95634625cbd5441a76deb1"
+  integrity sha512-nI29OZMRYq36hOcifB6HTjajNAAiBKSXsyWZrq+VniusseuP2OpNlTiYgsaNRSGvpyq5Wjbc2gQLyBdTyWqhnQ==
+
 duplexer3@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/duplexer3/-/duplexer3-0.1.4.tgz#ee01dd1cac0ed3cbc7fdbea37dc0a8f1ce002ce2"
@@ -8654,7 +8705,7 @@ fs-extra@^4.0.2:
     jsonfile "^4.0.0"
     universalify "^0.1.0"
 
-fs-extra@^8.0.1, fs-extra@^8.1.0:
+fs-extra@^8.0.0, fs-extra@^8.0.1, fs-extra@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-8.1.0.tgz#49d43c45a88cd9677668cb7be1b46efdb8d2e1c0"
   integrity sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==
@@ -8887,11 +8938,6 @@ gatsby-plugin-emotion@^4.3.3:
     "@babel/runtime" "^7.10.2"
     "@emotion/babel-preset-css-prop" "^10.0.27"
 
-gatsby-plugin-eslint@^2.0.8:
-  version "2.0.8"
-  resolved "https://registry.yarnpkg.com/gatsby-plugin-eslint/-/gatsby-plugin-eslint-2.0.8.tgz#1ff7f546a427d274dc2de3932ba29822aae330c3"
-  integrity sha512-vAMy37povmQJNg6ZxY78fkWR3pKwG8MNMhO3u+4vXj2MYT5avhFvHPJTAb126ZCuygf30gAWlpwbV50zP894Jw==
-
 gatsby-plugin-manifest@^2.4.5:
   version "2.4.10"
   resolved "https://registry.yarnpkg.com/gatsby-plugin-manifest/-/gatsby-plugin-manifest-2.4.10.tgz#e7576da8243e73d555905d186d685f5ce99a10cd"
@@ -8928,6 +8974,14 @@ gatsby-plugin-page-creator@^2.3.8:
     lodash "^4.17.15"
     micromatch "^3.1.10"
 
+gatsby-plugin-postcss@^2.3.3:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-postcss/-/gatsby-plugin-postcss-2.3.3.tgz#af6d2b6761948b73998ab3c447a4886c6eb4d5eb"
+  integrity sha512-WCmcQ4FYvGCTXsjICzv9YIaPaQ/zIT2RN6L+FJEhwS/I/uroivLDdMUPDI+HSyuIlo3P2V9f2N93Ay+tT8EqmA==
+  dependencies:
+    "@babel/runtime" "^7.10.2"
+    postcss-loader "^3.0.0"
+
 gatsby-plugin-react-helmet@^3.3.1:
   version "3.3.3"
   resolved "https://registry.yarnpkg.com/gatsby-plugin-react-helmet/-/gatsby-plugin-react-helmet-3.3.3.tgz#85f2c2b1ee404dfc35e1f7596edba7438900fc56"
@@ -12251,6 +12305,11 @@ lodash.memoize@^4.1.2:
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
   integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=
 
+lodash.merge@^4.6.2:
+  version "4.6.2"
+  resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
+  integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
+
 lodash.sample@^4.2.1:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/lodash.sample/-/lodash.sample-4.2.1.tgz#5e4291b0c753fa1abeb0aab8fb29df1b66f07f6d"
@@ -13073,7 +13132,7 @@ node-dir@^0.1.10:
   dependencies:
     minimatch "^3.0.2"
 
-node-emoji@^1.10.0:
+node-emoji@^1.10.0, node-emoji@^1.8.1:
   version "1.10.0"
   resolved "https://registry.yarnpkg.com/node-emoji/-/node-emoji-1.10.0.tgz#8886abd25d9c7bb61802a658523d1f8d2a89b2da"
   integrity sha512-Yt3384If5H6BYGVHiHwTL+99OzJKHhgp82S8/dktEK73T26BazdgZ4JZh92xSVtGNJvz9UbXdNAc5hcrXV42vw==
@@ -13238,6 +13297,11 @@ normalize-url@^4.1.0:
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-4.5.0.tgz#453354087e6ca96957bd8f5baf753f5982142129"
   integrity sha512-2s47yzUxdexf1OhyRi4Em83iQk0aPvwTddtFz4hnSSw9dCEsLEGf6SwIO8ss/19S9iBb5sJaOuTvTGDeZI00BQ==
 
+normalize.css@^8.0.1:
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/normalize.css/-/normalize.css-8.0.1.tgz#9b98a208738b9cc2634caacbc42d131c97487bf3"
+  integrity sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==
+
 npm-conf@^1.1.0:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/npm-conf/-/npm-conf-1.1.3.tgz#256cc47bd0e218c259c4e9550bf413bc2192aff9"
@@ -14242,6 +14306,24 @@ postcss-flexbugs-fixes@^4.1.0, postcss-flexbugs-fixes@^4.2.1:
   dependencies:
     postcss "^7.0.26"
 
+postcss-functions@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-functions/-/postcss-functions-3.0.0.tgz#0e94d01444700a481de20de4d55fb2640564250e"
+  integrity sha1-DpTQFERwCkgd4g3k1V+yZAVkJQ4=
+  dependencies:
+    glob "^7.1.2"
+    object-assign "^4.1.1"
+    postcss "^6.0.9"
+    postcss-value-parser "^3.3.0"
+
+postcss-js@^2.0.0:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-2.0.3.tgz#a96f0f23ff3d08cec7dc5b11bf11c5f8077cdab9"
+  integrity sha512-zS59pAk3deu6dVHyrGqmC3oDXBdNdajk4k1RyxeVXCrcEDBUBHoIhE4QTsmhxgzXxsaqFDAkUZfmMa5f/N/79w==
+  dependencies:
+    camelcase-css "^2.0.1"
+    postcss "^7.0.18"
+
 postcss-load-config@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-2.1.0.tgz#c84d692b7bb7b41ddced94ee62e8ab31b417b003"
@@ -14386,6 +14468,14 @@ postcss-modules-values@^3.0.0:
     icss-utils "^4.0.0"
     postcss "^7.0.6"
 
+postcss-nested@^4.1.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-4.2.1.tgz#4bc2e5b35e3b1e481ff81e23b700da7f82a8b248"
+  integrity sha512-AMayXX8tS0HCp4O4lolp4ygj9wBn32DJWXvG6gCv+ZvJrEa00GUxJcJEEzMh87BIe6FrWdYkpR2cuyqHKrxmXw==
+  dependencies:
+    postcss "^7.0.21"
+    postcss-selector-parser "^6.0.2"
+
 postcss-normalize-charset@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/postcss-normalize-charset/-/postcss-normalize-charset-4.0.1.tgz#8b35add3aee83a136b0471e0d59be58a50285dd4"
@@ -14543,7 +14633,16 @@ postcss-value-parser@^4.0.0, postcss-value-parser@^4.0.2, postcss-value-parser@^
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb"
   integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==
 
-postcss@^6.0.1, postcss@^6.0.23:
+postcss@7.0.28:
+  version "7.0.28"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.28.tgz#d349ced7743475717ba91f6810efb58c51fb5dbb"
+  integrity sha512-YU6nVhyWIsVtlNlnAj1fHTsUKW5qxm3KEgzq2Jj6KTEFOTK8QWR12eIDvrlWhiSTK8WIBFTBhOJV4DY6dUuEbw==
+  dependencies:
+    chalk "^2.4.2"
+    source-map "^0.6.1"
+    supports-color "^6.1.0"
+
+postcss@^6.0.1, postcss@^6.0.23, postcss@^6.0.9:
   version "6.0.23"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.23.tgz#61c82cc328ac60e677645f979054eb98bc0e3324"
   integrity sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==
@@ -14552,7 +14651,7 @@ postcss@^6.0.1, postcss@^6.0.23:
     source-map "^0.6.1"
     supports-color "^5.4.0"
 
-postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.16, postcss@^7.0.26, postcss@^7.0.27, postcss@^7.0.30, postcss@^7.0.5, postcss@^7.0.6:
+postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.11, postcss@^7.0.14, postcss@^7.0.16, postcss@^7.0.18, postcss@^7.0.21, postcss@^7.0.26, postcss@^7.0.27, postcss@^7.0.30, postcss@^7.0.5, postcss@^7.0.6:
   version "7.0.32"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.32.tgz#4310d6ee347053da3433db2be492883d62cec59d"
   integrity sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==
@@ -14865,6 +14964,16 @@ punycode@^2.1.0, punycode@^2.1.1:
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
   integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
 
+purgecss@^2.2.0:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/purgecss/-/purgecss-2.2.1.tgz#aa3bdf23370f7539df6154f5e25df2da311cd018"
+  integrity sha512-wngRSLW1dpNr8kr3TL9nTJMyTFI5BiRiaUUEys5M1CA4zEHLF25fRHoshEeDqmhstaNTOddmpYM34zRrUtEGbQ==
+  dependencies:
+    commander "^5.0.0"
+    glob "^7.0.0"
+    postcss "7.0.28"
+    postcss-selector-parser "^6.0.2"
+
 q@^1.1.2:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
@@ -15470,6 +15579,14 @@ redent@^1.0.0:
     indent-string "^2.1.0"
     strip-indent "^1.0.1"
 
+reduce-css-calc@^2.1.6:
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-2.1.7.tgz#1ace2e02c286d78abcd01fd92bfe8097ab0602c2"
+  integrity sha512-fDnlZ+AybAS3C7Q9xDq5y8A2z+lT63zLbynew/lur/IR24OQF5x98tfNwf79mzEdfywZ0a2wpM860FhFfMxZlA==
+  dependencies:
+    css-unit-converter "^1.1.1"
+    postcss-value-parser "^3.3.0"
+
 redux-thunk@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.3.0.tgz#51c2c19a185ed5187aaa9a2d08b666d0d6467622"
@@ -15868,7 +15985,7 @@ resolve-url@^0.2.1:
   resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
   integrity sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=
 
-resolve@^1.1.6, resolve@^1.10.0, resolve@^1.11.0, resolve@^1.12.0, resolve@^1.13.1, resolve@^1.15.1, resolve@^1.17.0, resolve@^1.3.2, resolve@^1.8.1:
+resolve@^1.1.6, resolve@^1.10.0, resolve@^1.11.0, resolve@^1.12.0, resolve@^1.13.1, resolve@^1.14.2, resolve@^1.15.1, resolve@^1.17.0, resolve@^1.3.2, resolve@^1.8.1:
   version "1.17.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.17.0.tgz#b25941b54968231cc2d1bb76a79cb7f2c0bf8444"
   integrity sha512-ic+7JYiV8Vi2yzQGFWOkiZD5Z9z7O2Zhm9XMaTxdJExKasieFCr+yXZ/WmXsckHiKl12ar0y6XiXDx3m4RHn1w==
@@ -16955,6 +17072,11 @@ string-similarity@^1.2.2:
     lodash.map "^4.6.0"
     lodash.maxby "^4.6.0"
 
+string-similarity@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/string-similarity/-/string-similarity-4.0.1.tgz#ea7c11f0093cb3088cdcc5eb16cfd90cb54962f7"
+  integrity sha512-v36MJzloekKVvKAsYi6O/qpn2mIuvwEFIT9Gx3yg4spkNjXYsk7yxc37g4ZTyMVIBvt/9PZGxnqEtme8XHK+Mw==
+
 string-width@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-1.0.2.tgz#118bdf5b8cdc51a2a7e70d211e07e2b0b9b107d3"
@@ -17367,6 +17489,31 @@ table@^5.2.3:
     slice-ansi "^2.1.0"
     string-width "^3.0.0"
 
+tailwindcss@^1.4.4, tailwindcss@^1.4.6:
+  version "1.4.6"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-1.4.6.tgz#17b37166ccda08d7e7f9ca995ea48ce1e0089700"
+  integrity sha512-qV0qInUq1FWih39Bc5CWECdgObSzRrbjGD4ke4kAPSIq6WXrPhv0wwOcUWJgJ66ltT9j+XnSRYikG8WNRU/fTQ==
+  dependencies:
+    "@fullhuman/postcss-purgecss" "^2.1.2"
+    autoprefixer "^9.4.5"
+    browserslist "^4.12.0"
+    bytes "^3.0.0"
+    chalk "^4.0.0"
+    color "^3.1.2"
+    detective "^5.2.0"
+    fs-extra "^8.0.0"
+    lodash "^4.17.15"
+    node-emoji "^1.8.1"
+    normalize.css "^8.0.1"
+    postcss "^7.0.11"
+    postcss-functions "^3.0.0"
+    postcss-js "^2.0.0"
+    postcss-nested "^4.1.1"
+    postcss-selector-parser "^6.0.0"
+    pretty-hrtime "^1.0.3"
+    reduce-css-calc "^2.1.6"
+    resolve "^1.14.2"
+
 tapable@^1.0.0, tapable@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2"
@@ -17808,6 +17955,23 @@ tweetnacl@^0.14.3, tweetnacl@~0.14.0:
   resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"
   integrity sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=
 
+twin.macro@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/twin.macro/-/twin.macro-1.3.0.tgz#70cce2d9988dd89badb81828452ac6ee6d70fb7a"
+  integrity sha512-Cl/ZuG+iUoxfM6KmYR6tswIOk6wXVojSxGXKkQsxWPqoSyGJ0Os0wcSFdOrPySluCqewxkD3aHtBGNpLnDPXFQ==
+  dependencies:
+    "@babel/parser" "^7.9.4"
+    babel-plugin-macros "^2.8.0"
+    chalk "^4.0.0"
+    clean-set "^1.1.1"
+    color "^3.1.2"
+    dlv "^1.1.3"
+    dset "^2.0.1"
+    lodash.merge "^4.6.2"
+    string-similarity "^4.0.1"
+    tailwindcss "^1.4.4"
+    timsort "^0.3.0"
+
 type-check@^0.4.0, type-check@~0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.4.0.tgz#07b8203bfa7056c0657050e3ccd2c37730bab8f1"
@@ -19013,7 +19177,7 @@ xstate@^4.10.0:
   resolved "https://registry.yarnpkg.com/xstate/-/xstate-4.10.0.tgz#f87e4ef593fe40300b8eec50a5d9f0763aa4f622"
   integrity sha512-nncQ9gW+xgk5iUEvpBOXhbzSCS0uwzzT4bOAXxo6oUoALgbxzqEyMmaMYwuvOHrabDTdMJYnF+xe2XD8RRgWmA==
 
-xtend@^4.0.0, xtend@^4.0.1, xtend@~4.0.1:
+xtend@^4.0.0, xtend@^4.0.1, xtend@^4.0.2, xtend@~4.0.1:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
   integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==