diff --git a/.eslintrc.js b/.eslintrc.js
index 8a4c14f..c4e3a1d 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -5,10 +5,6 @@ module.exports = {
 
   extends: 'react-app',
 
-  globals: {
-    tw: true
-  },
-
   plugins: ['@emotion'],
 
   rules: {
diff --git a/content/PortfolioProjects.json b/content/PortfolioProjects.json
index 84724f3..5b6f38f 100644
--- a/content/PortfolioProjects.json
+++ b/content/PortfolioProjects.json
@@ -49,7 +49,6 @@
       "GraphQL",
       "TailwindCSS",
       "CSS",
-      "Emotion JS",
       "Netlify"
     ],
     "repoLink": "https://github.com/markschnabel/mark-schnabel-dot-com",
diff --git a/gatsby-browser.js b/gatsby-browser.js
index b1e5c31..d581373 100644
--- a/gatsby-browser.js
+++ b/gatsby-browser.js
@@ -5,3 +5,4 @@
  */
 
 // You can delete this file if you're not using it
+import './src/styles/global.css';
diff --git a/gatsby-config.js b/gatsby-config.js
index 768b2ac..74df9d8 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -20,8 +20,7 @@ module.exports = {
     );
   },
   plugins: [
-    'gatsby-plugin-tailwindcss',
-    'gatsby-plugin-emotion',
+    'gatsby-plugin-postcss',
     'gatsby-plugin-react-helmet',
     'gatsby-plugin-sharp',
     'gatsby-transformer-sharp',
diff --git a/package.json b/package.json
index 06cfebe..70ad786 100644
--- a/package.json
+++ b/package.json
@@ -8,17 +8,12 @@
     "Portfolio"
   ],
   "dependencies": {
-    "@emotion/css": "^11.10.6",
-    "@emotion/react": "^11.10.6",
-    "@emotion/styled": "^11.10.6",
     "gatsby": "^5.8.1",
     "gatsby-image": "^3.11.0",
-    "gatsby-plugin-emotion": "^8.8.0",
     "gatsby-plugin-manifest": "^5.8.0",
     "gatsby-plugin-offline": "^6.8.0",
     "gatsby-plugin-react-helmet": "^6.8.0",
     "gatsby-plugin-sharp": "^5.8.1",
-    "gatsby-plugin-tailwindcss": "^1.0.3",
     "gatsby-source-filesystem": "^5.8.0",
     "gatsby-transformer-json": "^5.8.0",
     "gatsby-transformer-sharp": "^5.8.0",
@@ -33,18 +28,20 @@
     "react-reveal": "^1.2.2",
     "react-scroll": "^1.8.9",
     "react-svg-spinner": "^1.0.4",
-    "tailwindcss": "^3.3.1",
+    "tailwindcss": "^3.3.3",
     "typeface-inter": "^3.18.1",
     "typeface-lato": "1.1.13",
     "validator": "^13.9.0"
   },
   "devDependencies": {
-    "@emotion/eslint-plugin": "^11.10.0",
+    "autoprefixer": "^10.4.15",
     "dotenv": "^16.0.3",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-react-app": "^7.0.1",
+    "gatsby-plugin-postcss": "^6.12.0",
     "http-proxy-middleware": "^2.0.6",
-    "netlify-lambda": "^2.0.16"
+    "netlify-lambda": "^2.0.16",
+    "postcss": "^8.4.29"
   },
   "scripts": {
     "format": "prettier --write '**/*.js'",
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 0000000..5cbc2c7
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
+};
diff --git a/src/components/about/About.js b/src/components/about/About.js
index 9b87178..5365c35 100644
--- a/src/components/about/About.js
+++ b/src/components/about/About.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import { Grid, Row, Col } from 'react-flexbox-grid';
-import styled from '@emotion/styled';
 import { StaticQuery, graphql } from 'gatsby';
 import Fade from 'react-reveal/Fade';
 
@@ -10,16 +9,6 @@ import Bio from './Bio';
 import SkillsHeader from './SkillsHeader';
 import Skill from './Skill';
 
-const SkillsSectionHeader = styled.h2`
-  ${tw`text-xl m-0 text-center tracking-wide font-semibold uppercase mt-20`};
-`;
-
-const Underline = styled.div`
-  ${tw`bg-white w-100% mb-2 m-auto mt-1`};
-  max-width: 180px;
-  height: 1px;
-`;
-
 function formatSkills(skills) {
   return skills.map(skillName => {
     return <Skill key={'skill-' + skillName} name={skillName} />;
@@ -66,12 +55,12 @@ const About = () => {
                 <Row>
                   <Col xs={12}>
                     <Fade left delay={50} distance="25px">
-                      <SkillsSectionHeader>
+                      <h3 className="text-xl m-0 text-center tracking-wide font-semibold uppercase mt-20">
                         Technical Skills
-                      </SkillsSectionHeader>
+                      </h3>
                     </Fade>
                     <Fade right delay={50} distance="25px">
-                      <Underline />
+                      <hr className="bg-white w-100% mb-2 m-auto mt-1 max-w-180" />
                     </Fade>
                   </Col>
                 </Row>
diff --git a/src/components/about/Bio.js b/src/components/about/Bio.js
index a290535..14b78e7 100644
--- a/src/components/about/Bio.js
+++ b/src/components/about/Bio.js
@@ -1,84 +1,51 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
 import Fade from 'react-reveal/Fade';
 
-const BioWrapper = styled.div`
-  ${tw`h-100% flex flex-col justify-between py-2 text-center lg:text-left lg:py-8`};
-  max-width: 500px;
-  margin: auto;
 
-  @media only screen and (min-width: 992px) {
-    margin-left: 25px;
-    min-height: 350px;
-  }
-`;
-
-const BioTitle = styled.h2`
-  ${tw`text-xl m-0 tracking-wide font-semibold uppercase`};
-`;
-
-const Underline = styled.div`
-  ${tw`bg-white w-100% mb-2 max-w-12 m-auto lg:m-0 mb-4`};
-  height: 1px;
-`;
-
-const BioBody = styled.p`
-  ${tw`text-base font-secondary my-1 font-light text-grey-light tracking-wide pt-2 lg:mt-0 mb-12 lg:mb-4`};
-  font-size: 16px;
-
-  @media only screen and (max-width: 576px) {
-    font-size: 0.95rem;
-  }
-`;
-
-const ResumeLink = styled.a`
-  ${tw`border-solid border-2px border-white text-white bg-transparent py-2 px-3
-  text-lg font-thin cursor-pointer w-100% my-2 no-underline
-  hover:bg-white hover:text-black inline mr-5%`};
-  transition: all 0.3s ease;
-
-  @media only screen and (min-width: 992px) {
-    max-width: 160px;
-  }
-
-  @media only screen and (max-width: 450px) {
-    display: block;
-  }
-`;
+// @media only screen and (min-width: 992px) {
+//   margin-left: 25px;
+//   min-height: 350px;
+// }
 
 const Bio = ({ professionalBio, personalBio }) => {
   return (
     <Fade bottom delay={50} distance="25px">
-      <BioWrapper>
+      <div className="h-100% flex flex-col justify-between py-2 text-center lg:text-left lg:py-2 m-auto max-w-lg">
         <div>
           <Fade left delay={50} distance="25px">
-            <BioTitle>Bio</BioTitle>
+            <h2 className="text-2xl m-0 tracking-wide font-semibold uppercase">Bio</h2>
           </Fade>
 
           <Fade right delay={50} distance="25px">
-            <Underline />
+            <hr className="bg-white w-100% max-w-12 m-auto lg:m-0 mb-4 max-w-4xs" />
           </Fade>
-          <BioBody>{professionalBio}</BioBody>
-          <BioBody>{personalBio}</BioBody>
+          <p className="text-base font-secondary my-1 font-light text-grey-light tracking-wide pt-2 lg:mt-0 mb-12 lg:mb-4">
+            {professionalBio}
+          </p>
+          <p className="text-base font-secondary my-1 font-light text-grey-light tracking-wide pt-2 lg:mt-0 mb-12 lg:mb-4">
+            {personalBio}
+          </p>
         </div>
         <div>
-          <ResumeLink
+          <button
+            className="resume-button"
             href="https://drive.google.com/file/d/1gFIOl2FB78QCDlLfV1fZKAjQ4sxJs3Oe/view?usp=sharing"
             target="_blank"
             rel="noopener noreferrer"
           >
             RESUME (PDF)
-          </ResumeLink>
-          <ResumeLink
+          </button>
+          <button
+            className="resume-button"
             href="https://docs.google.com/document/d/1TP3NgI6gz1RBJ5tmNzjpJ5YQ5pczfPp1fPRrcAuk6Dg/edit?usp=sharing"
             target="_blank"
             rel="noopener noreferrer"
           >
             RESUME (DOC)
-          </ResumeLink>
+          </button>
         </div>
-      </BioWrapper>
+      </div>
     </Fade>
   );
 };
diff --git a/src/components/about/ProfilePicture.js b/src/components/about/ProfilePicture.js
index 9f24935..a4ba0ad 100644
--- a/src/components/about/ProfilePicture.js
+++ b/src/components/about/ProfilePicture.js
@@ -1,26 +1,8 @@
 import React from 'react';
-import Img from 'gatsby-image';
+import Image from 'gatsby-image';
 import { StaticQuery, graphql } from 'gatsby';
-import styled from '@emotion/styled';
 import Fade from 'react-reveal/Fade';
 
-const ImageContainer = styled.div`
-  position: relative;
-  max-width: 325px;
-  max-height: 300px;
-  height: 100%;
-  width: 100%;
-  transition: all 0.6s ease;
-  margin: auto;
-
-  @media only screen and (min-width: 992px) {
-    margin-left: auto;
-    margin-right: 35px;
-    max-width: 400px;
-    max-height: 350px;
-  }
-`;
-
 const ProfilePicture = () => {
   return (
     <StaticQuery
@@ -35,20 +17,19 @@ const ProfilePicture = () => {
           }
         }
       `}
+
       render={data => {
         return (
-          <>
-            <div>
-              <Fade top delay={50} distance="25px">
-                <ImageContainer>
-                  <Img
-                    style={{ borderRadius: '5px' }}
-                    fluid={data.file.childImageSharp.fluid}
-                  />
-                </ImageContainer>
-              </Fade>
-            </div>
-          </>
+          <div>
+            <Fade top delay={50} distance="25px">
+              <div className="profile-picture">
+                <Image
+                  style={{ borderRadius: '5px' }}
+                  fluid={data.file.childImageSharp.fluid}
+                />
+              </div>
+            </Fade>
+          </div>
         );
       }}
     />
diff --git a/src/components/about/Skill.js b/src/components/about/Skill.js
index bb99939..7e39c90 100644
--- a/src/components/about/Skill.js
+++ b/src/components/about/Skill.js
@@ -1,13 +1,7 @@
 import React from 'react';
-import styled from '@emotion/styled';
-
-const SkillStyle = styled.p`
-  ${tw`bg-grey px-3 py-2 font-semibold text-black inline-block m-1 `};
-  border-radius: 2px;
-`;
 
 const Skill = ({ name }) => {
-  return <SkillStyle>{name}</SkillStyle>;
+  return <p className="bg-grey px-3 py-2 font-semibold text-black inline-block m-1 rounded-sm">{name}</p>;
 };
 
 export default Skill;
diff --git a/src/components/about/SkillsHeader.js b/src/components/about/SkillsHeader.js
index 38dfcaf..46c0a59 100644
--- a/src/components/about/SkillsHeader.js
+++ b/src/components/about/SkillsHeader.js
@@ -1,13 +1,7 @@
 import React from 'react';
-import styled from '@emotion/styled';
-
-const HeaderText = styled.h2`
-  ${tw`m-0 tracking-wide font-semibold uppercase mt-8 text-center mb-2`};
-  font-size: 1.1rem;
-`;
 
 const SkillsHeader = ({ headerText }) => {
-  return <HeaderText>{headerText}</HeaderText>;
+  return <h4 className="m-0 tracking-wide font-semibold uppercase mt-8 text-center mb-2 text-base">{headerText}</h4>;
 };
 
 export default SkillsHeader;
diff --git a/src/components/contact/Contact.js b/src/components/contact/Contact.js
index 5fc0d93..bde914a 100644
--- a/src/components/contact/Contact.js
+++ b/src/components/contact/Contact.js
@@ -4,15 +4,6 @@ import Fade from 'react-reveal/Fade';
 
 import SectionHeader from '../shared/SectionHeader';
 import ContactLinks from './ContactLinks';
-import styled from '@emotion/styled';
-
-const Header = styled.h2`
-  ${tw`text-6xl m-2`};
-
-  @media only screen and (max-width: 992px) {
-    ${tw`text-3xl text-center m-0`};
-  }
-`;
 
 const Contact = () => {
   return (
@@ -22,10 +13,10 @@ const Contact = () => {
         <Row>
           <Col lg={6}>
             <Fade left delay={50} distance="50px">
-              <Header>Let's build</Header>
+              <h3 className="text-3xl sm:text-center lg:text-6xl lg:m-2">Let's build</h3>
             </Fade>
             <Fade right delay={50} distance="50px">
-              <Header>something</Header>
+              <h3 className="text-3xl sm:text-center lg:text-6xl lg:m-2">something</h3>
             </Fade>
           </Col>
           <Col lg={6}>
diff --git a/src/components/contact/ContactLinks.js b/src/components/contact/ContactLinks.js
index dacd1e2..9d86ecd 100644
--- a/src/components/contact/ContactLinks.js
+++ b/src/components/contact/ContactLinks.js
@@ -1,97 +1,73 @@
 import React from 'react';
-import styled from '@emotion/styled';
 import { FaGithub, FaLinkedin } from 'react-icons/fa';
 import Fade from 'react-reveal/Fade';
 
-import { colors as twColors } from '../../../tailwind';
-
-const ContactLinksContainer = styled.div`
-  ${tw`my-4 lg:my-0 mx-auto h-100% text-center flex flex-col justify-center items-center`};
-  max-height: 576px;
-`;
-const Section = styled.div`
-  ${tw`my-2`};
-`;
-const StyledIconLink = styled.a`
-  ${tw`text-2xl lg:text-3xl mx-5`};
-  transition: all 0.5s ease;
-
-  & {
-    svg {
-      transition: all 0.5s ease;
-    }
-  }
-
-  &:hover {
-    svg {
-      fill: ${twColors.accent};
-    }
-  }
-`;
-const StyledTextLink = styled.a`
-  ${tw`block text-lg lg:text-xl underline font-light italic cursor-pointer hover:text-accent pb-4`};
-  transition: all 0.5s ease;
-`;
-
-const ResumeLink = styled.a`
-  ${tw`border-2px border-solid border-white text-white bg-transparent
-  py-2 text-lg font-thin cursor-pointer my-2 uppercase no-underline
-  hover:bg-white hover:text-black inline mr-5%`};
-  width: 250px !important;
-  display: block !important;
-  transition: all 0.3s ease;
-`;
+const resumeStyles = {
+  width: '250px',
+  display: 'block',
+  transition: 'all 0.3s ease'
+};
 
 const ContactLinks = () => {
   return (
-    <ContactLinksContainer>
+    <div
+      className="my-4 lg:my-0 mx-auto h-100% text-center flex flex-col justify-center items-center"
+      style={{ 'max-height': '576px' }}
+    >
       <Fade top delay={100} distance="25px">
         <div>
-          <Section>
-            <StyledIconLink
+          <div className="my-2">
+            <a
+              className="text-2xl lg:text-3xl mx-5 transition-all duration-500 ease-in-out"
               href="http://github.com/markschnabel"
               target="_blank"
               rel="noopener noreferrer"
             >
-              <FaGithub />
-            </StyledIconLink>
-            <StyledIconLink
+              <FaGithub className="hoverable-icon text-2xl lg:text-3xl mx-5" />
+            </a>
+            <a
+              className="text-2xl lg:text-3xl mx-5 transition-all duration-500 ease-in-out"
               href="http://linkedin.com/in/mark-j-schnabel"
               target="_blank"
               rel="noopener noreferrer"
             >
-              <FaLinkedin />
-            </StyledIconLink>
-          </Section>
+              <FaLinkedin className="hoverable-icon text-2xl lg:text-3xl mx-5" />
+            </a>
+          </div>
         </div>
-        <Section>
-          <StyledTextLink
+        <div className="my-2">
+          <a
+            className="block text-lg lg:text-xl underline font-light italic cursor-pointer hover:text-accent pb-4 transition-all duration-500 ease-in-out"
             href="mailto:mark.schnabel@markschnabel.com"
             target="_top"
           >
             mark.schnabel@markschnabel.com
-          </StyledTextLink>
-        </Section>
-        <Section>
-          <ResumeLink
+          </a>
+        </div>
+        <div className="my-2">
+          <a
+            className="resume-button"
+            style={resumeStyles}
             href="https://drive.google.com/file/d/1qoDypvSZgjD-gUG0RwymL60nwW_iIyeG/view?usp=sharing"
             target="_blank"
             rel="noopener noreferrer"
           >
             RESUME (PDF)
-          </ResumeLink>
-        </Section>
-        <Section>
-          <ResumeLink
+          </a>
+        </div>
+        <div className="my-2">
+          <a
+            className="resume-button"
+            style={resumeStyles}
             href="https://docs.google.com/document/d/1TP3NgI6gz1RBJ5tmNzjpJ5YQ5pczfPp1fPRrcAuk6Dg/edit?usp=sharing"
             target="_blank"
             rel="noopener noreferrer"
           >
             RESUME (DOC)
-          </ResumeLink>
-        </Section>
+          </a>
+        </div>
       </Fade>
-    </ContactLinksContainer>
+    </div>
   );
 };
 
diff --git a/src/components/experience/CompanyLogo.js b/src/components/experience/CompanyLogo.js
index 1d1f313..caf806d 100644
--- a/src/components/experience/CompanyLogo.js
+++ b/src/components/experience/CompanyLogo.js
@@ -1,15 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Img from 'gatsby-image';
-import styled from '@emotion/styled';
+import Image from 'gatsby-image';
 
-const StyledImg = styled(Img)`
-  width: 350px;
-  height: 350px;
-  margin: auto;
-`;
-
-const CompanyLogo = ({ companyLogo }) => <StyledImg fluid={companyLogo.childImageSharp.fluid} />;
+const CompanyLogo = ({ companyLogo }) => (
+  <Image
+    fluid={companyLogo.childImageSharp.fluid}
+    className="w-350 h-350 m-auto"
+  />
+);
 
 CompanyLogo.propTypes = {
   companyLogo: PropTypes.object.isRequired
diff --git a/src/components/experience/RoleText.js b/src/components/experience/RoleText.js
index 88a74a6..4733527 100644
--- a/src/components/experience/RoleText.js
+++ b/src/components/experience/RoleText.js
@@ -1,35 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
-
-const RoleTitle = styled.h3`
-  ${tw`text-xl lg:text-2xl m-0 font-semibold`};
-
-  a {
-    ${tw`no-underline text-accent`};
-    transition: all 0.25s ease;
-  }
-`;
-
-const DurationText = styled.p`
-  ${tw`text-base my-2 font-light tracking-wide`};
-`;
-
-const DescriptionText = styled.p`
-  ${tw`text-base my-2 font-light tracking-wide`};
-`;
-
-const SubHeaderText = styled.h3`
-  ${tw`text-base mt-4 mb-2 font-medium`};
-`;
-
-const List = styled.ul`
-  padding-left: 20px;
-
-  li {
-    ${tw`text-base my-2 font-light`};
-  }
-`;
 
 const RoleText = ({
   company,
@@ -42,21 +12,33 @@ const RoleText = ({
 }) => {
   return (
     <div>
-      <RoleTitle>
-        {title}
-        {' '}
-        <a href={companySite} target="_blank" rel="noopener noreferrer">@{company}</a>
-      </RoleTitle>
-      <DurationText>{duration}</DurationText>
-      <DescriptionText>{description}</DescriptionText>
-      <SubHeaderText>Major Accomplishments:</SubHeaderText>
-      <List>
-        {accomplishments.map((a, i) => <li key={`accomplishments-${i}`}>{a}</li>)}
-      </List>
-      <SubHeaderText>Day to Day Responsiblities:</SubHeaderText>
-      <List>
-        {responsibilities.map((a, i) => <li key={`responsibilities-${i}`}>{a}</li>)}
-      </List>
+      <h3 className="text-xl lg:text-2xl m-0 font-semibold">
+        <span>{title}</span>
+        &nbsp;
+        <a
+          className="no-underline text-accent"
+          href={companySite}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          @{company}
+        </a>
+      </h3>
+
+      <p className="text-base my-2 font-light tracking-wide">{duration}</p>
+      <p className="text-base my-2 font-light tracking-wide">{description}</p>
+
+      <p className="text-base mt-4 mb-2 font-medium">Major Accomplishments:</p>
+      <ul className="pl-5 text-base my-2 font-light">
+        {accomplishments.map((a, i) => (
+          <li key={`accomplishments-${i}`}>{a}</li>
+        ))}
+      </ul>
+
+      <p className="text-base mt-4 mb-2 font-medium">Day to Day Responsiblities:</p>
+      <ul className="pl-5 text-base my-2 font-light">
+        {responsibilities.map((r, i) => <li key={`responsibilities-${i}`}>{r}</li>)}
+      </ul>
     </div>
   );
 };
diff --git a/src/components/landing/Arrow.js b/src/components/landing/Arrow.js
index fd3ea7e..d218292 100644
--- a/src/components/landing/Arrow.js
+++ b/src/components/landing/Arrow.js
@@ -1,27 +1,11 @@
 import React from 'react';
-import styled from '@emotion/styled';
-
-const ArrowWrapper = styled.div`
-  ${tw`absolute`};
-  bottom: 10px;
-`;
-const ArrowBody = styled.div`
-  ${tw`h-12 bg-white p-0`};
-  margin-left: 45%;
-  width: 2px;
-`;
-const ArrowHead = styled.div`
-  ${tw`bg-white w-6 h-6`};
-  clip-path: polygon(50% 60%, 15% 0, 85% 0);
-
-  `;
 
 const IconLinks = () => {
   return (
-    <ArrowWrapper>
-      <ArrowBody />
-      <ArrowHead />
-    </ArrowWrapper>
+    <div className="absolute bottom-10px">
+      <div className="w-2px ml-45% h-12 bg-white p-0" />
+      <div className="bg-white w-6 h-6 arrow-head" />
+    </div>
   );
 };
 
diff --git a/src/components/landing/BackgroundAnimation.js b/src/components/landing/BackgroundAnimation.js
index 1fe5004..f6687c8 100644
--- a/src/components/landing/BackgroundAnimation.js
+++ b/src/components/landing/BackgroundAnimation.js
@@ -1,53 +1,23 @@
 import React from 'react';
-import styled from '@emotion/styled';
 
-const Wrapper = styled.div`
-  ${tw`absolute w-100% h-100% flex justify-center items-center`};
-  background-color: transparent;
-`;
-const Circle = styled.div`
-  ${tw`absolute rounded-circle opacity-50`};
-  height: 75vw;
-  width: 75vw;
-  max-width: 640px;
-  min-width: 330px;
-  max-height: 640px;
-  min-height: 330px;
-  border-right: 5px solid transparent;
-  border-left: 5px solid transparent;
-
-  @keyframes scale {
-    0% {
-      transform: scale(1.05) rotate(0deg) skewX(0deg);
-      opacity: 0.45;
-    }
-    50% {
-      transform: scale(0.75) rotate(180deg) skewX(35deg);
-      opacity: 0;
-      border-color: lightblue;
-    }
-    100% {
-      transform: scale(1.05) rotate(360deg) skewX(0deg);
-      opacity: 0.45;
-    }
-  }
-  animation: scale;
-  animation-iteration-count: infinite;
-  animation-direction: ${props => props.direction};
-  animation-duration: ${props => props.duration};
-  animation-delay: ${props => props.delay};
-  animation-fill-mode: both;
-`;
+const AnimatedCircle = ({ duration, direction = null }) => {
+  return (
+    <div className="animated-circle" style={{
+      animationDirection: direction,
+      animationDuration: duration
+    }}/>
+  );
+};
 
-const BackgroundCircle = () => {
+const BackgroundAnimation = () => {
   return (
-    <Wrapper>
-      <Circle duration="24s" direction="reverse" />
-      <Circle duration="24s" />
-      <Circle duration="32s" direction="reverse" />
-      <Circle duration="32s" />
-    </Wrapper>
+    <div className="relative w-full h-screen flex justify-center items-center bg-transparent">
+      <AnimatedCircle duration="24s" direction="reverse" />
+      <AnimatedCircle duration="24s" />
+      <AnimatedCircle duration="32s" direction="reverse" />
+      <AnimatedCircle duration="32s" />
+    </div>
   );
 };
 
-export default BackgroundCircle;
+export default BackgroundAnimation;
diff --git a/src/components/landing/ContactIcons.js b/src/components/landing/ContactIcons.js
index 8e71964..6a2a3fa 100644
--- a/src/components/landing/ContactIcons.js
+++ b/src/components/landing/ContactIcons.js
@@ -1,39 +1,25 @@
 import React from 'react';
 import { FaGithub, FaLinkedin } from 'react-icons/fa';
-import { css } from '@emotion/css';
-import styled from '@emotion/styled';
-
-const IconLinksWrapper = styled.div`
-  ${tw`absolute flex justify-end w-100%`};
-  bottom: 15px;
-`;
-
-const IconLinkStyle = css`
-  ${tw`text-lg ml-6 text-grey-light cursor-pointer`};
-  transition: all 0.25s ease;
-  &:hover {
-    fill: #b8572c;
-  }
-`;
 
 const ContactIcons = () => {
   return (
-    <IconLinksWrapper>
+    <div className="absolute flex justify-end w-full" style={{ bottom: '15px' }}>
       <a
         href="https://github.com/markschnabel"
         target="_blank"
         rel="noopener noreferrer"
       >
-        <FaGithub className={IconLinkStyle} />
+        <FaGithub className="text-grey-light hoverable-icon" />
       </a>
       <a
+        className="text-lg ml-6 text-grey-light cursor-pointer transition-all duration-200 ease-in-out "
         href="http://linkedin.com/in/mark-j-schnabel"
         target="_blank"
         rel="noopener noreferrer"
       >
-        <FaLinkedin className={IconLinkStyle} />
+        <FaLinkedin className="text-grey-light hoverable-icon" />
       </a>
-    </IconLinksWrapper>
+    </div>
   );
 };
 
diff --git a/src/components/landing/Header.js b/src/components/landing/Header.js
index 2d70ee9..2c883de 100644
--- a/src/components/landing/Header.js
+++ b/src/components/landing/Header.js
@@ -1,75 +1,27 @@
 import React from 'react';
-import styled from '@emotion/styled';
 import Fade from 'react-reveal/Fade';
 
-const FlexContainer = styled.div`
-  ${tw`flex flex-col justify-center h-40%`};
-`;
-
-const Wrapper = styled.div`
-  ${tw`absolute md:ml-5% z-5`};
-  margin-top: 25vh;
-`;
-
-const LandingHeader = styled.h1`
-  ${tw`md:ml-10% font-semibold uppercase my-1 tracking-wide leading-none`};
-  width: 550px;
-
-  & {
-    .react-reveal {
-      span {
-        font-weight: 500;
-      }
-    }
-  }
-
-  /* Calc is used here to give the font a minimum size of 2.5rem */
-  font-size: calc(2.5rem + 3.5vw);
-
-  @media (min-width: 1200px) {
-    font-size: 5.3rem;
-  }
-`;
-
-const LandingSubHeader = styled.h2`
-  ${tw`md:mt-3 md:ml-10% w-100% uppercase tracking-extra-wide leading-none`};
-  & {
-    .react-reveal {
-      span {
-        ${tw`font-secondary text-grey-light font-thin`};
-      }
-    }
-  }
-
-  /* Calc is used here to give the font a minimum size of 1.2em */
-  font-size: calc(1.2rem + 1vw);
-
-  @media (min-width: 1200px) {
-    font-size: 2.25rem;
-  }
-`;
-
 const Header = () => {
   return (
-    <FlexContainer>
-      <Wrapper>
-        <LandingHeader>
+    <div className="absolute z-20 flex flex-col justify-center h-2/5">
+      <div className="absolute ml-5% z-5" style={{ marginTop: '25vh' }}>
+        <h1 className="site-header ml-10% font-semibold uppercase my-1 tracking-wide leading-none bold-reveal">
           <Fade bottom cascade delay={250}>
             Mark
           </Fade>
-        </LandingHeader>
-        <LandingHeader>
+        </h1>
+        <h1 className="site-header ml-10% font-semibold uppercase my-1 tracking-wide leading-none bold-reveal">
           <Fade bottom cascade delay={600}>
             Schnabel
           </Fade>
-        </LandingHeader>
-        <LandingSubHeader>
+        </h1>
+        <h2 className="site-subheader md:mt-3 md:ml-10% w-100% uppercase tracking-extra-wide leading-none">
           <Fade bottom cascade delay={950} distance="100px">
             Software Engineer
           </Fade>
-        </LandingSubHeader>
-      </Wrapper>
-    </FlexContainer>
+        </h2>
+      </div>
+    </div>
   );
 };
 
diff --git a/src/components/landing/Landing.js b/src/components/landing/Landing.js
index bd09587..7e996d1 100644
--- a/src/components/landing/Landing.js
+++ b/src/components/landing/Landing.js
@@ -1,23 +1,18 @@
 import React from 'react';
-import styled from '@emotion/styled';
 
 import BackgroundAnimation from './BackgroundAnimation';
 import Header from './Header';
 import Arrow from './Arrow';
 import ContactIcons from './ContactIcons';
 
-const LandingWrapper = styled.div`
-  ${tw`relative w-100% h-screen mb-15%`};
-`;
-
 const Landing = () => {
   return (
-    <LandingWrapper>
-      <BackgroundAnimation />
+    <div className="relative w-full h-screen">
       <Header />
+      <BackgroundAnimation />
       <Arrow />
       <ContactIcons />
-    </LandingWrapper>
+    </div>
   );
 };
 
diff --git a/src/components/layout/Footer.js b/src/components/layout/Footer.js
index 171c52a..8bea1ae 100644
--- a/src/components/layout/Footer.js
+++ b/src/components/layout/Footer.js
@@ -1,27 +1,16 @@
 import React from 'react';
-import styled from '@emotion/styled';
 import Fade from 'react-reveal/Fade';
 
-const StyledFooter = styled.footer`
-  ${tw`mb-32 mt-12 lg:my-24 text-center pb-16`};
-`;
-const ClosingText = styled.p`
-  ${tw`text-xl lg:text-2xl font-semibold `};
-`;
-const Copyright = styled.p`
-  ${tw`text-base font-light mt-2 text-grey-light`};
-`;
-
 const Footer = () => {
   return (
-    <StyledFooter>
+    <footer className="mb-32 mt-12 lg:my-24 text-center pb-16">
       <Fade left delay={50} distance="50px">
-        <ClosingText>Thank you for visiting!</ClosingText>
+        <p className="text-xl lg:text-2xl font-semibold ">Thank you for visiting!</p>
       </Fade>
       <Fade right delay={50} distance="50px">
-        <Copyright>Copyright {new Date().getFullYear()} © Mark Schnabel</Copyright>
+        <p className="text-base font-light mt-2 text-grey-light">Copyright {new Date().getFullYear()} © Mark Schnabel</p>
       </Fade>
-    </StyledFooter>
+    </footer>
   );
 };
 
diff --git a/src/components/layout/mobileMenu/ContactIcons.js b/src/components/layout/mobileMenu/ContactIcons.js
index fa7b929..277d1ae 100644
--- a/src/components/layout/mobileMenu/ContactIcons.js
+++ b/src/components/layout/mobileMenu/ContactIcons.js
@@ -1,41 +1,26 @@
 import React from 'react';
 import { FaGithub, FaLinkedin } from 'react-icons/fa';
-import styled from '@emotion/styled';
-
-import { colors as twColors } from '../../../../tailwind';
-
-const ContactIconsWrapper = styled.div`
-  ${tw`inline-block w-100% text-center mt-16`};
-`;
-
-const StyledIconLink = styled.a`
-  ${tw`text-xl cursor-pointer mx-4`};
-  &:hover {
-    svg {
-      fill: ${twColors.accent};
-    }
-  }
-  transition: all 0.5s ease;
-`;
 
 const ContactIcons = () => {
   return (
-    <ContactIconsWrapper>
-      <StyledIconLink
+    <div className="inline-block w-100% text-center mt-16">
+      <a
+        className="text-xl cursor-pointer mx-4 transition-all duration-500 ease-in-out"
         href="https://github.com/markschnabel"
         target="_blank"
         rel="noopener noreferrer"
       >
-        <FaGithub />
-      </StyledIconLink>
-      <StyledIconLink
+        <FaGithub className="hoverable-icon" />
+      </a>
+      <a
+        className="text-xl cursor-pointer mx-4 transition-all duration-500 ease-in-out"
         href="https://www.linkedin.com/in/mark-j-schnabel/"
         target="_blank"
         rel="noopener noreferrer"
       >
-        <FaLinkedin />
-      </StyledIconLink>
-    </ContactIconsWrapper>
+        <FaLinkedin className="hoverable-icon" />
+      </a>
+    </div>
   );
 };
 
diff --git a/src/components/layout/mobileMenu/ContactInfo.js b/src/components/layout/mobileMenu/ContactInfo.js
index 8a86a0e..0c5672e 100644
--- a/src/components/layout/mobileMenu/ContactInfo.js
+++ b/src/components/layout/mobileMenu/ContactInfo.js
@@ -1,21 +1,16 @@
 import React from 'react';
-import styled from '@emotion/styled';
-
-const ContactInfoWrapper = styled.div`
-  ${tw`text-center mt-1`};
-`;
-const InfoLink = styled.a`
-  ${tw`italic block hover:text-accent mt-1`};
-  transition: color 0.5s ease;
-`;
 
 const ContactInfo = () => {
   return (
-    <ContactInfoWrapper>
-      <InfoLink href="mailto:mark.schnabel@markschnabel.com" target="_top">
-          mark.schnabel@markschnabel.com
-      </InfoLink>
-    </ContactInfoWrapper>
+    <div className="text-center mt-1">
+      <p
+        className="italic block hover:text-accent mt-1 transition-colors duration-500 ease-in-out"
+        href="mailto:mark.schnabel@markschnabel.com"
+        target="_top"
+      >
+        mark.schnabel@markschnabel.com
+      </p>
+    </div>
   );
 };
 
diff --git a/src/components/layout/mobileMenu/MobileMenu.js b/src/components/layout/mobileMenu/MobileMenu.js
index 36982de..33afadd 100644
--- a/src/components/layout/mobileMenu/MobileMenu.js
+++ b/src/components/layout/mobileMenu/MobileMenu.js
@@ -1,25 +1,26 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
+import PropTypes, { element } from 'prop-types';
 
 import PageLinks from './PageLinks';
 import ContactIcons from './ContactIcons';
 import ContactInfo from './ContactInfo';
 
-const MenuWrapper = styled.div`
-  ${tw`fixed pin bg-background lg:hidden w-100% h-100%`};
-  opacity: ${props => (props.mobileMenuIsOpen ? '1' : '0')};
-  z-index: ${props => (props.mobileMenuIsOpen ? '1' : '0')};
-  transition: opacity 0.25s ease;
-`;
-
 const MobileMenu = ({ mobileMenuIsOpen, closeMobileMenu }) => {
+  const opacity = mobileMenuIsOpen ? 1 : 0;
+  const zIndex = mobileMenuIsOpen ? 40 : -100;
+  const transition = 'opacity 0.25s ease';
+
   return (
-    <MenuWrapper mobileMenuIsOpen={mobileMenuIsOpen}>
+    <div
+      id="wtf"
+      className="fixed bg-background lg:hidden w-full h-screen"
+      style={{ opacity, zIndex, transition }}
+      mobileMenuIsOpen={mobileMenuIsOpen}
+    >
       <PageLinks closeMobileMenu={closeMobileMenu} />
       <ContactIcons />
       <ContactInfo />
-    </MenuWrapper>
+    </div>
   );
 };
 
diff --git a/src/components/layout/mobileMenu/PageLinks.js b/src/components/layout/mobileMenu/PageLinks.js
index 7756475..802c020 100644
--- a/src/components/layout/mobileMenu/PageLinks.js
+++ b/src/components/layout/mobileMenu/PageLinks.js
@@ -1,49 +1,49 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
 import { Link as SmoothScrollLink } from 'react-scroll';
 
-const StyledList = styled.ul`
-  ${tw`list-reset text-center pt-48 m-auto`};
-`;
-
-const StyledLink = styled(SmoothScrollLink)`
-  ${tw`text-3xl my-32 cursor-pointer font-semibold tracking-extra-wide hover:text-accent`};
-  transition: color 0.5s ease;
-`;
+const ListItem = ({ name, id, closeMobileMenu }) => {
+  return (
+    <li>
+      <SmoothScrollLink
+        to={id}
+        spy={true}
+        smooth={true}
+        duration={500}
+        offset={-70}
+        onClick={closeMobileMenu}
+        className="text-3xl my-32 cursor-pointer font-semibold tracking-extra-wide hover:text-accent transition-colors duration-500 ease-in-out"
+      >
+        {name}
+      </SmoothScrollLink>
+    </li>
+  );
+};
 
 const PageLinks = ({ closeMobileMenu }) => {
-  const SCROLL_CONFIG = {
-    spy: true,
-    smooth: true,
-    duration: 500,
-    offset: -70,
-    onClick: closeMobileMenu
-  };
-
   return (
-    <StyledList>
-      <li>
-        <StyledLink to="experienceSection" {...SCROLL_CONFIG}>
-          EXPERIENCE
-        </StyledLink>
-      </li>
-      <li>
-        <StyledLink to="portfolioSection" {...SCROLL_CONFIG}>
-          PORTFOLIO
-        </StyledLink>
-      </li>
-      <li>
-        <StyledLink to="aboutSection" {...SCROLL_CONFIG}>
-          ABOUT
-        </StyledLink>
-      </li>
-      <li>
-        <StyledLink to="contactSection" {...SCROLL_CONFIG}>
-          CONTACT
-        </StyledLink>
-      </li>
-    </StyledList>
+    <ul className="list-reset text-center pt-48 m-auto">
+      <ListItem
+        name="EXPERIENCE"
+        id="experienceSection"
+        closeMobileMenu={closeMobileMenu}
+      />
+      <ListItem
+        name="PORTFOLIO"
+        id="portfolioSection"
+        closeMobileMenu={closeMobileMenu}
+      />
+      <ListItem
+        name="ABOUT"
+        id="aboutSection"
+        closeMobileMenu={closeMobileMenu}
+      />
+      <ListItem
+        name="CONTACT"
+        id="contactSection"
+        closeMobileMenu={closeMobileMenu}
+      />
+    </ul>
   );
 };
 
diff --git a/src/components/layout/navbar/Brand.js b/src/components/layout/navbar/Brand.js
index 9ff441f..aa2e347 100644
--- a/src/components/layout/navbar/Brand.js
+++ b/src/components/layout/navbar/Brand.js
@@ -1,17 +1,20 @@
 import React from 'react';
-import styled from '@emotion/styled';
 import { animateScroll as scroll } from 'react-scroll';
 
-const StyledBrand = styled.a`
-  ${tw`tracking-extra-wide text-lg font-normal cursor-pointer uppercase hover:text-accent`};
-  transition: all 0.5s ease;
-`;
 const Brand = ({ closeMobileMenu } ) => {
   const scrollToTop = () => {
     closeMobileMenu();
     scroll.scrollToTop();
   };
-  return <StyledBrand onClick={scrollToTop}>MARK SCHNABEL</StyledBrand>;
+
+  return (
+    <button
+      onClick={scrollToTop}
+      className="tracking-extra-wide text-xl font-normal cursor-pointer uppercase hover:text-accent transition-all ease-in-out duration-500"
+    >
+      MARK SCHNABEL
+    </button>
+  );
 };
 
 export default Brand;
diff --git a/src/components/layout/navbar/Links.js b/src/components/layout/navbar/Links.js
index 30817b9..1855f68 100644
--- a/src/components/layout/navbar/Links.js
+++ b/src/components/layout/navbar/Links.js
@@ -1,53 +1,31 @@
 import React from 'react';
-import styled from '@emotion/styled';
 import { Link as SmoothScrollLink } from 'react-scroll';
 
-const StyledList = styled.ul`
-  ${tw`list-reset hidden lg:inline-block`};
-`;
-
-const StyledListItem = styled.ul`
-  ${tw`list-reset inline-block`};
-`;
-
-const StyledScrollLink = styled(SmoothScrollLink)`
-  ${tw`font-light tracking-extra-wide text-lg ml-6 cursor-pointer hover:text-accent`};
-  transition: all 0.5s ease;
-`;
-
-const SCROLL_CONFIG = {
-  spy: true,
-  smooth: true,
-  duration: 500,
-  offset: -70
+const Link = ({ name, sectionId }) => {
+  return (
+    <li className="inline-block">
+      <SmoothScrollLink
+        className="font-light tracking-extra-wide text-lg ml-6 cursor-pointer hover:text-accent transition-all ease-in-out duration-500"
+        to={sectionId}
+        spy={true}
+        smooth={true}
+        duration={500}
+        offset={-70}
+      >
+        {name}
+      </SmoothScrollLink>
+    </li>
+  );
 };
 
 const Links = () => {
   return (
-    <StyledList>
-      <StyledListItem>
-        <StyledScrollLink to="experienceSection" {...SCROLL_CONFIG}>
-          EXPERIENCE
-        </StyledScrollLink>
-      </StyledListItem>
-      <StyledListItem>
-        <StyledScrollLink to="portfolioSection" {...SCROLL_CONFIG}
-        >
-          PORTFOLIO
-        </StyledScrollLink>
-      </StyledListItem>
-      <StyledListItem>
-        <StyledScrollLink to="aboutSection" {...SCROLL_CONFIG}
-        >
-          ABOUT
-        </StyledScrollLink>
-      </StyledListItem>
-      <StyledListItem>
-        <StyledScrollLink to="contactSection" {...SCROLL_CONFIG}>
-          CONTACT
-        </StyledScrollLink>
-      </StyledListItem>
-    </StyledList>
+    <ul className="list-reset hidden lg:flex">
+      <Link name="EXPERIENCE" sectionId="experienceSection" />
+      <Link name="PORTFOLIO" sectionId="portfolioSection" />
+      <Link name="ABOUT" sectionId="aboutSection" />
+      <Link name="CONTACT" sectionId="contactSection" />
+    </ul>
   );
 };
 
diff --git a/src/components/layout/navbar/MobileMenuButton.js b/src/components/layout/navbar/MobileMenuButton.js
index 31d9cf6..6889af0 100644
--- a/src/components/layout/navbar/MobileMenuButton.js
+++ b/src/components/layout/navbar/MobileMenuButton.js
@@ -1,76 +1,34 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
-
-const Line = styled.div`
-  ${tw`bg-grey-light block mt-1`};
-  width: 28px;
-  height: 2px;
-  transition: all 0.2s ease-in-out;
-`;
-
-const StyledButton = styled.button`
-  ${tw`flex flex-col items-center outline-none bg-transparent border-none cursor-pointer lg:hidden`};
-
-  /* Hover styles for lines that make up the menu button.
-     Done here to make use of the "nth-child" selectors. */
-  &:hover {
-    .mobile-menu-line-closed {
-      ${tw`bg-accent`};
-
-      ${Line}:nth-child(odd) {
-        transform: translateX(1.5px);
-      }
-      ${Line}:nth-child(even) {
-        transform: translateX(-1.5px);
-      }
-    }
-
-    .mobile-menu-line-open {
-      ${tw`bg-accent`};
-    }
-  }
-
-  /* Styles to turn the menu button into an X while the menu is open.
-     Done here to make use of the "nth-child" selectors. */
-  & {
-    .mobile-menu-line-open {
-      ${Line}:nth-child(1) {
-        opacity: 0;
-        transform: translateX(5px);
-      }
-      ${Line}:nth-child(2) {
-        transform: translateY(3px) rotate(225deg);
-      }
-      ${Line}:nth-child(3) {
-        transform: translateY(-3px) rotate(-225deg);
-      }
-      ${Line}:nth-child(4) {
-        opacity: 0;
-        transform: translateX(-5px);
-      }
-    }
-  }
-`;
-
-const MobileMenuButton = ({ toggleMobileMenu, mobileMenuIsOpen }) => {
-  const lineClass = mobileMenuIsOpen
-    ? 'mobile-menu-line-open'
-    : 'mobile-menu-line-closed';
 
+const Line = () => (
+  <div
+    className="bg-grey-light block mt-1"
+    style={{
+      width: '28px',
+      height: '2px',
+      transition: 'all 0.2s ease-in-out'
+    }}
+  />
+);
+
+const MobileMenuButton = ({ toggleMobileMenu }) => {
   return (
-    <StyledButton onClick={toggleMobileMenu}>
-      <Line className={lineClass} />
-      <Line className={lineClass} />
-      <Line className={lineClass} />
-      <Line className={lineClass} />
-    </StyledButton>
+    // Todo: animate button into an X when clicked
+    <button
+      className="flex flex-col items-center outline-none bg-transparent border-none cursor-pointer lg:hidden"
+      onClick={toggleMobileMenu}
+    >
+      <Line />
+      <Line />
+      <Line />
+      <Line />
+    </button>
   );
 };
 
 MobileMenuButton.propTypes = {
-  toggleMobileMenu: PropTypes.func.isRequired,
-  mobileMenuIsOpen: PropTypes.bool.isRequired
+  toggleMobileMenu: PropTypes.func.isRequired
 };
 
 export default MobileMenuButton;
diff --git a/src/components/layout/navbar/Navbar.js b/src/components/layout/navbar/Navbar.js
index c82a2e3..b3b363c 100644
--- a/src/components/layout/navbar/Navbar.js
+++ b/src/components/layout/navbar/Navbar.js
@@ -1,22 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
 
 import Container from '../../shared/Container';
 import Brand from './Brand';
 import MobileMenuButton from './MobileMenuButton';
 import Links from './Links';
-import { colors as twColors } from '../../../../tailwind';
-
-const StyledNav = styled.nav`
-  ${tw`z-50 fixed pin-t w-100% py-5`};
-  background: ${props =>
-    props.navShouldBeTransparent ? 'transparent' : twColors.background};
-  transition: background 0.5s ease;
-`;
-const FlexContainer = styled.div`
-  ${tw`flex justify-between`};
-`;
 
 const Navbar = ({
   navShouldBeTransparent,
@@ -24,19 +12,24 @@ const Navbar = ({
   mobileMenuIsOpen,
   closeMobileMenu
 }) => {
+  const navBgClass = navShouldBeTransparent ? 'bg-transparent' : 'bg-background';
+
   return (
-    <StyledNav navShouldBeTransparent={navShouldBeTransparent}>
+    <nav
+      className={`z-50 fixed pin-t w-full py-5 ${navBgClass}`}
+      style={{ transition: 'background 0.5s ease;' }}
+    >
       <Container>
-        <FlexContainer>
+        <div className="flex justify-between">
           <Brand closeMobileMenu={closeMobileMenu} />
           <MobileMenuButton
             toggleMobileMenu={toggleMobileMenu}
             mobileMenuIsOpen={mobileMenuIsOpen}
           />
           <Links />
-        </FlexContainer>
+        </div>
       </Container>
-    </StyledNav>
+    </nav>
   );
 };
 
diff --git a/src/components/portfolio/ProjectImage.js b/src/components/portfolio/ProjectImage.js
index c6e311b..4afe348 100644
--- a/src/components/portfolio/ProjectImage.js
+++ b/src/components/portfolio/ProjectImage.js
@@ -2,38 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Col } from 'react-flexbox-grid';
 import Img from 'gatsby-image';
-import styled from '@emotion/styled';
 import Fade from 'react-reveal/Fade';
 
-const ImageContainer = styled.div`
-  position: relative;
-  max-width: 600px;
-  max-height: 400px;
-  height: 100%;
-  width: 100%;
-  margin: auto;
-  transition: all 0.6s ease;
-`;
-const StyledImg = styled(Img)`
-  border-radius: 10px;
-`;
-const HoverOverlay = styled.div`
-  ${tw`absolute pin opacity-0 w-100% h-100% flex flex-col items-center justify-center`};
-  max-width: 600px;
-  max-height: 400px;
-  transition: all 0.6s ease;
-
-  &:hover {
-    box-shadow: inset 0 0 150px #000000;
-    background: rgba(0, 0, 0, 0.2);
-    cursor: pointer;
-    opacity: 1;
-  }
-`;
-const HoverText = styled.p`
-  ${tw`text-white text-3xl font-semibold `};
-`;
-
 const ProjectImage = ({ image, reverse, projectLink, repoLink }) => {
   const hasProjectLink = projectLink && projectLink.length;
 
@@ -48,14 +18,14 @@ const ProjectImage = ({ image, reverse, projectLink, repoLink }) => {
         left={!reverse}
         right={!!reverse}
       >
-        <ImageContainer>
+        <div className="project-image">
           <a href={link} target="_blank" rel="noopener noreferrer">
-            <StyledImg fluid={image.childImageSharp.fluid} />
-            <HoverOverlay>
-              <HoverText>{hoverText}</HoverText>
-            </HoverOverlay>
+            <Img fluid={image.childImageSharp.fluid} style={{ borderRadius: '10px' }} />
+            <div className="absolute pin opacity-0 w-100% h-100% flex flex-col items-center justify-center hover-overlay">
+              <p className="text-white text-3xl font-semibold">{hoverText}</p>
+            </div>
           </a>
-        </ImageContainer>
+        </div>
       </Fade>
     </Col>
   );
diff --git a/src/components/portfolio/ProjectText.js b/src/components/portfolio/ProjectText.js
index 4853928..cd9985e 100644
--- a/src/components/portfolio/ProjectText.js
+++ b/src/components/portfolio/ProjectText.js
@@ -1,76 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Col } from 'react-flexbox-grid';
-import styled from '@emotion/styled';
 import { FaExternalLinkAlt, FaGithub } from 'react-icons/fa';
 import Fade from 'react-reveal/Fade';
 
-import { colors as twColors } from '../../../tailwind';
-
-const TextWrapper = styled.div`
-  ${tw`flex flex-col justify-between z-5 mb-12 pt-5 lg:pt-0`};
-  max-width: 600px;
-  margin: auto;
-
-  @media only screen and (min-width: 992px) {
-    margin: 0px;
-    min-height: 400px;
-    padding: ${props => (props.reverse ? '5px 9.5% 0 0' : '5px 0 0 9.5%')};
-  }
-`;
-
-const ProjectTitle = styled.h3`
-  ${tw`text-xl lg:text-2xl m-0 tracking-wide font-semibold`};
-`;
-
-const Divider = styled.div`
-  ${tw`bg-white opacity-50 w-100% mt-2 lg:hidden`};
-  height: 1px;
-`;
-
-const ProjectNumber = styled.h3`
-  ${tw`absolute text-background font-bold m-0 -mt-32 hidden xxl:block`};
-  font-size: 12vw;
-  opacity: 0.5;
-  text-shadow: -1px 0 #555, 0 1px #555, 1px 0 #555, 0 -1px #555;
-  margin-left: ${props => (props.reverse ? '-13rem' : '26rem')};
-`;
-
-const TextSectionTitle = styled.h6`
-  ${tw`text-base font-semibold lg:text-lg m-0 uppercase tracking-extra-wide pt-3`};
-`;
-
-const TextSectionBody = styled.p`
-  ${tw`text-base my-1 font-light text-grey-light tracking-wide`};
-`;
-
-const LinksWrapper = styled.div`
-  ${tw`mt-5 pb-5 lg:h-100% lg:flex-flex-col lg:justify-end`};
-`;
-
-const Link = styled.a`
-  ${tw`mr-5% cursor-pointer no-underline `};
-  & {
-    svg {
-      transition: fill 0.5s ease;
-    }
-  }
-
-  &:hover {
-    span {
-      ${tw`text-accent`};
-    }
-
-    svg {
-      fill: ${twColors.accent};
-    }
-  }
-`;
-const LinkText = styled.span`
-  ${tw`text-lg mr-2`};
-  transition: color 0.5s ease;
-`;
-
 function formatTechStack(techStack) {
   return techStack.join(', ');
 }
@@ -84,7 +17,13 @@ const ProjectText = ({
   repoLink,
   reverse
 }) => {
-  const projectNumberMargin = reverse ? '0 0 0 25%' : '0 25% 0 0';
+  const projectNumberStyle = (reverse) => ({
+    fontSize: '12vw',
+    opacity: '0.5',
+    textShadow: '-1px 0 #555, 0 1px #555, 1px 0 #555, 0 -1px #555',
+    marginLeft: (reverse ? '-13rem' : '26rem'),
+    zIndex: -999
+  });
 
   return (
     <Col lg={6} style={{ padding: 0 }}>
@@ -94,39 +33,48 @@ const ProjectText = ({
         left={!!reverse}
         right={!reverse}
       >
-        <TextWrapper reverse={reverse}>
+        <div
+          className="flex flex-col justify-between z-5 mb-12 pt-5 lg:pt-0 max-w-600 m-auto project-text-wrapper"
+          style={{ padding: reverse ? '5px 9.5% 0 0' : '5px 0 0 9.5%' }}
+          reverse={reverse}
+        >
           <div>
-            <ProjectNumber
-              style={{ zIndex: -999 }}
-              margin={projectNumberMargin}
-              reverse={reverse}
+            <h3
+              className="absolute text-background font-bold m-0 -mt-32 hidden xl:block"
+              style={projectNumberStyle(reverse)}
             >
               {projectNumber}
-            </ProjectNumber>
-            <ProjectTitle>{title}</ProjectTitle>
-            <Divider />
-            <TextSectionTitle>Description</TextSectionTitle>
-            <TextSectionBody>{description}</TextSectionBody>
-            <TextSectionTitle>Tech Stack</TextSectionTitle>
-            <TextSectionBody>{formatTechStack(techStack)}</TextSectionBody>
+            </h3>
+            <h3 className="text-xl lg:text-2xl m-0 tracking-wide font-semibold">{title}</h3>
+            <hr className="bg-white opacity-50 w-100% mt-2 lg:hidden" />
+            <h6 className="text-base font-semibold lg:text-lg m-0 uppercase tracking-extra-wide pt-3">Description</h6>
+            <p className="text-base my-1 font-light text-grey-light tracking-wide">{description}</p>
+            <h6 className="text-base font-semibold lg:text-lg m-0 uppercase tracking-extra-wide pt-3">Tech Stack</h6>
+            <p className="text-base my-1 font-light text-grey-light tracking-wide">{formatTechStack(techStack)}</p>
           </div>
-          <LinksWrapper>
+          <div className="mt-5 pb-5 lg:h-100% lg:flex-flex-col lg:justify-end">
             {projectLink && projectLink.length ? (
-              <Link
+              <a
+                className="mr-5% cursor-pointer no-underline "
                 href={projectLink}
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                <LinkText>Visit Project</LinkText>
-                <FaExternalLinkAlt />
-              </Link>
+                <span className="text-lg mr-2 transition-colors duration-500 ease-in-out">Visit Project</span>
+                <FaExternalLinkAlt className="hoverable-icon" />
+              </a>
             ) : null}
-            <Link href={repoLink} target="_blank" rel="noopener noreferrer">
-              <LinkText>View Source</LinkText>
-              <FaGithub />
-            </Link>
-          </LinksWrapper>
-        </TextWrapper>
+            <a
+              className="mr-5% cursor-pointer no-underline "
+              href={repoLink}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <span className="text-lg mr-2 transition-colors duration-500 ease-in-out">View Source</span>
+              <FaGithub className="hoverable-icon" />
+            </a>
+          </div>
+        </div>
       </Fade>
     </Col>
   );
diff --git a/src/components/shared/Container.js b/src/components/shared/Container.js
index 31918f0..c62f1f0 100644
--- a/src/components/shared/Container.js
+++ b/src/components/shared/Container.js
@@ -1,13 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
-
-const ContainerStyles = styled.div`
-  ${tw`mx-5% xl:mx-auto max-w-1200`};
-`;
 
 const Container = ({ children }) => {
-  return <ContainerStyles>{children}</ContainerStyles>;
+  return <div className="mx-5% xl:mx-auto max-w-screen-xl">{children}</div>;
 };
 
 Container.propTypes = {
diff --git a/src/components/shared/SectionHeader.js b/src/components/shared/SectionHeader.js
index 89aed68..2926b61 100644
--- a/src/components/shared/SectionHeader.js
+++ b/src/components/shared/SectionHeader.js
@@ -1,34 +1,16 @@
 import React, { Fragment } from 'react';
-import styled from '@emotion/styled';
 import Fade from 'react-reveal/Fade';
 
-const Header = styled.h1`
-  ${tw`text-3xl sm:text-4xl md:text-6xl font-semibold uppercase my-1 tracking-wide
-  leading-none`};
-
-  & {
-    .react-reveal {
-      span {
-        font-weight: 500;
-      }
-    }
-  }
-`;
-const Divider = styled.div`
-  ${tw`bg-white opacity-50 w-100% mt-4 lg:mt-6 mb-8 lg:mb-20`};
-  height: 1px;
-`;
-
 const SectionHeader = ({ headerText }) => {
   return (
     <Fragment>
-      <Header>
+      <h1 className="text-3xl sm:text-4xl md:text-7xl font-bold uppercase my-1 tracking-wide leading-none bold-reveal">
         <Fade bottom cascade delay={50}>
           {headerText}
         </Fade>
-      </Header>
+      </h1>
       <Fade left delay={375} distance="50px">
-        <Divider />
+        <hr className="bg-white opacity-50 w-100% mt-4 lg:mt-6 mb-8 lg:mb-20" />
       </Fade>
     </Fragment>
   );
diff --git a/src/pages/404.js b/src/pages/404.js
index f7f9dbb..aac2882 100644
--- a/src/pages/404.js
+++ b/src/pages/404.js
@@ -1,34 +1,20 @@
 import React from 'react';
-import styled from '@emotion/styled';
 import { Link } from 'gatsby';
 
 import '../components/layout/layout.css';
 
-const Wrapper = styled.div`
-  ${tw`text-center`}
-`;
-const Styled404 = styled.h1`
-${tw`font-black text-background text-center`};
-  font-size: 25vh;
-  text-shadow: -2px 0 #aaa, 0 2px #aaa, 2px 0 #aaa, 0 -2px #aaa;
-`;
-const Whoops = styled.p`
-  ${tw`text-3xl font-bold`};
-`;
-const Message = styled.p`
-  ${tw`text-xl font-light italic`};
-`;
-const StyledLink = styled(Link)`
-  ${tw`text-accent text-xl`};
-`;
-
 const NotFoundPage = () => (
-  <Wrapper>
-    <Styled404>404</Styled404>
-    <Whoops>Whoops!</Whoops>
-    <Message>This website only has one page!</Message>
-    <StyledLink to="/">Click here to go back</StyledLink>
-  </Wrapper>
+  <div className="text-center flex justify-center items-center flex-col h-screen">
+    <h2
+      className="font-black text-background text-center text-9xl my-5"
+      style={{ 'text-shadow': '-2px 0 #aaa, 0 2px #aaa, 2px 0 #aaa, 0 -2px #aaa' }}
+    >
+      404
+    </h2>
+    <p className="text-3xl font-bold my-4">Whoops!</p>
+    <p className="text-xl font-light italic">This website only has one page!</p>
+    <Link to="/" className="text-accent text-xl">Click here to go back</Link>
+  </div>
 );
 
 export default NotFoundPage;
diff --git a/src/styles/global.css b/src/styles/global.css
new file mode 100644
index 0000000..75b9dc7
--- /dev/null
+++ b/src/styles/global.css
@@ -0,0 +1,142 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.hoverable-icon {
+  transition: all 0.5s ease;
+}
+
+.hoverable-icon:hover {
+  fill: theme(colors.accent);
+}
+
+.resume-button {
+  border: 2px solid theme(colors.white);
+  text: theme(colors.white);
+  background: transparent;
+  padding: 2px 0;
+  text: theme(fontSize.lg);
+  font-weight: theme(fontWeight.thin);
+  cursor: pointer;
+  margin: 2px 0;
+  text-transform: uppercase;
+  text-decoration: none;
+  display: inline;
+  margin-right: 5%;
+}
+
+.resume-button:hover {
+  background: theme(colors.white);
+  color: theme(colors.black);
+}
+
+.bold-reveal .react-reveal span {
+  font-weight: theme(fontWeight.semibold);
+}
+
+.profile-picture {
+  position: relative;
+  max-width: 325px;
+  max-height: 300px;
+  height: 100%;
+  width: 100%;
+  transition: all 0.6s ease;
+  margin: auto;
+
+  @media only screen and (min-width: 992px) {
+    margin-left: auto;
+    margin-right: 35px;
+    max-width: 400px;
+    max-height: 350px;
+  }
+}
+
+.arrow-head {
+  clip-path: polygon(50% 60%, 15% 0, 85% 0);
+}
+
+@keyframes landing-animation {
+  0% {
+    transform: scale(1.05) rotate(0deg) skewX(0deg);
+    opacity: 0.45;
+  }
+  50% {
+    transform: scale(0.75) rotate(180deg) skewX(35deg);
+    opacity: 0;
+    border-color: lightblue;
+  }
+  100% {
+    transform: scale(1.05) rotate(360deg) skewX(0deg);
+    opacity: 0.45;
+  }
+}
+
+.animated-circle {
+  position: absolute;
+  border-radius: 50%;
+  opacity: 50%;
+  height: 75vw;
+  width: 75vw;
+  max-width: 640px;
+  min-width: 330px;
+  max-height: 640px;
+  min-height: 330px;
+  border-right: 5px solid transparent;
+  border-left: 5px solid transparent;
+  animation: landing-animation;
+  animation-iteration-count: infinite;
+  animation-fill-mode: both;
+}
+
+.site-header {
+  width: 550px;
+  font-size: calc(2.5rem + 3.5vw);
+
+  @media (min-width: 1200px) {
+    font-size: 5.3rem;
+  }
+}
+
+.site-subheader {
+  font-size: calc(1.2rem + 1vw);
+
+  @media (min-width: 1200px) {
+    font-size: 2.25rem;
+  }
+}
+
+.site-subheader .react-reveal span {
+  font-family: theme(fontFamily.secondary);
+  color: theme(colors.grey-light);
+  font-weight: theme(fontWeight.light);
+}
+
+.project-text-wrapper {
+  @media only screen and (min-width: 992px) {
+    margin: 0px;
+    min-height: 400px;
+  }
+}
+
+.project-image {
+  position: relative;
+  max-width: 600px;
+  max-height: 400px;
+  height: 100%;
+  width: 100%;
+  margin: auto;
+  transition: all 0.6s ease;
+}
+
+.hover-overlay {
+  max-width: 600px;
+  max-height: 400px;
+  transition: all 0.6s ease;
+
+  &:hover {
+    box-shadow: inset 0 0 150px #000000;
+    background: rgba(0, 0, 0, 0.2);
+    cursor: pointer;
+    opacity: 1;
+  }
+}
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..3b9e7d6
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,77 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './src/pages/**/*.{js,jsx,ts,tsx}',
+    './src/components/**/*.{js,jsx,ts,tsx}'
+  ],
+
+  theme: {
+    fontFamily: {
+      secondary: [
+        'inter-ui',
+        'system-ui',
+        'BlinkMacSystemFont',
+        '-apple-system',
+        'Segoe UI',
+        'Roboto',
+        'Oxygen',
+        'Ubuntu',
+        'Cantarell',
+        'Fira Sans',
+        'Droid Sans',
+        'Helvetica Neue',
+        'sans-serif'
+      ]
+    },
+
+    extend: {
+      colors: {
+        transparent: 'transparent',
+        background: '#0C0C0C',
+        'focus-background': '#1C1C1C',
+        primary: '#14324D',
+        accent: '#F07814',
+        highlight: '#487B78',
+        'error-dark': '#8e0808',
+        error: '#bb0000',
+        'error-light': '#f2b6d6',
+        'success-dark': '#078414',
+        success: '#22bf33',
+        'success-light': '#cafbd2',
+        black: '#000',
+        'grey-dark': '#222',
+        grey: '#a2a7af',
+        'grey-light': '#ddd',
+        white: '#F2F1ED'
+      },
+
+      margin: {
+        '5%': '5%',
+        '45%': '45%'
+      },
+
+      width: {
+        350: '350px',
+        '2px': '2px'
+      },
+
+      height: {
+        350: '350px'
+      },
+
+      maxWidth: {
+        180: '180px',
+        '4xs': '2.2rem',
+        '600px': '600px'
+      },
+
+      spacing: {
+        '10px': '10px',
+        '5%': '5%',
+        '10%': '10%'
+      }
+    }
+  },
+
+  plugins: []
+};
diff --git a/yarn.lock b/yarn.lock
index 9296ef9..4debeba 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,6 +2,11 @@
 # yarn lockfile v1
 
 
+"@alloc/quick-lru@^5.2.0":
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/@alloc/quick-lru/-/quick-lru-5.2.0.tgz#7bf68b20c0a350f936915fcae06f58e32007ce30"
+  integrity sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==
+
 "@ampproject/remapping@^2.2.0":
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.2.1.tgz#99e8e11851128b8702cd57c33684f1d0f260b630"
@@ -82,7 +87,7 @@
     eslint-visitor-keys "^2.1.0"
     semver "^6.3.0"
 
-"@babel/generator@^7.0.0", "@babel/generator@^7.14.0", "@babel/generator@^7.20.14", "@babel/generator@^7.21.4":
+"@babel/generator@^7.14.0", "@babel/generator@^7.20.14", "@babel/generator@^7.21.4":
   version "7.21.4"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.21.4.tgz#64a94b7448989f421f919d5239ef553b37bb26bc"
   integrity sha512-NieM3pVIYW2SwGzKoqfPrQsf4xGs9M9AIG3ThppsSRmO+m7eQhmI6amajKMUeIO37wFfsvnvcxQFx6x6iqxDnA==
@@ -186,7 +191,7 @@
   dependencies:
     "@babel/types" "^7.21.0"
 
-"@babel/helper-module-imports@^7.0.0-beta.49", "@babel/helper-module-imports@^7.16.7", "@babel/helper-module-imports@^7.18.6", "@babel/helper-module-imports@^7.21.4":
+"@babel/helper-module-imports@^7.0.0-beta.49", "@babel/helper-module-imports@^7.18.6", "@babel/helper-module-imports@^7.21.4":
   version "7.21.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.21.4.tgz#ac88b2f76093637489e718a90cec6cf8a9b029af"
   integrity sha512-orajc5T2PsRYUN3ZryCEFeMDYwyw09c/pZeaQEZPH0MpKzSvn3e0uXsDBu3k03VI+9DBiRo+l22BfKTpKwa/Wg==
@@ -305,7 +310,7 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
-"@babel/parser@^7.0.0", "@babel/parser@^7.14.0", "@babel/parser@^7.16.8", "@babel/parser@^7.20.13", "@babel/parser@^7.20.7", "@babel/parser@^7.21.4":
+"@babel/parser@^7.14.0", "@babel/parser@^7.16.8", "@babel/parser@^7.20.13", "@babel/parser@^7.20.7", "@babel/parser@^7.21.4":
   version "7.21.4"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.21.4.tgz#94003fdfc520bbe2875d4ae557b43ddb6d880f17"
   integrity sha512-alVJj7k7zIxqBZ7BTRhz0IqJFxW1VJbm6N8JbcYhQ186df9ZBPbZBmWSqAMXwHGsCJdYks7z/voa3ibiS5bCIw==
@@ -529,7 +534,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
-"@babel/plugin-syntax-jsx@^7.0.0", "@babel/plugin-syntax-jsx@^7.17.12", "@babel/plugin-syntax-jsx@^7.18.6", "@babel/plugin-syntax-jsx@^7.21.4":
+"@babel/plugin-syntax-jsx@^7.0.0", "@babel/plugin-syntax-jsx@^7.18.6", "@babel/plugin-syntax-jsx@^7.21.4":
   version "7.21.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.21.4.tgz#f264ed7bf40ffc9ec239edabc17a50c4f5b6fea2"
   integrity sha512-5hewiLct5OKyh6PLKEYaFclcqtIgCb6bmELouxjF6up5q3Sov7rOayW4RwhbaBL0dit8rA80GNfY+UuDp2mBbQ==
@@ -813,7 +818,7 @@
   dependencies:
     "@babel/plugin-transform-react-jsx" "^7.18.6"
 
-"@babel/plugin-transform-react-jsx@^7.0.0", "@babel/plugin-transform-react-jsx@^7.17.12", "@babel/plugin-transform-react-jsx@^7.18.6":
+"@babel/plugin-transform-react-jsx@^7.0.0", "@babel/plugin-transform-react-jsx@^7.18.6":
   version "7.21.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.21.0.tgz#656b42c2fdea0a6d8762075d58ef9d4e3c4ab8a2"
   integrity sha512-6OAWljMvQrZjR2DaNhVfRz6dkCAVV+ymcLUmaf8bccGOHn2v5rHJK3tTpij0BuhdYWP4LLaqj5lwcdlpAAPuvg==
@@ -1040,7 +1045,7 @@
   resolved "https://registry.yarnpkg.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310"
   integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.14.6", "@babel/runtime@^7.16.3", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.13", "@babel/runtime@^7.20.7", "@babel/runtime@^7.3.4", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.14.6", "@babel/runtime@^7.16.3", "@babel/runtime@^7.20.13", "@babel/runtime@^7.20.7", "@babel/runtime@^7.3.4", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
   version "7.21.0"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.21.0.tgz#5b55c9d394e5fcf304909a8b00c07dc217b56673"
   integrity sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==
@@ -1086,146 +1091,6 @@
   resolved "https://registry.yarnpkg.com/@builder.io/partytown/-/partytown-0.7.6.tgz#697acea6b552167a4dd43ddd4827018aa42e0364"
   integrity sha512-snXIGNiZpqjno3XYQN2lbBB+05hsQR/LSttbtIW1c0gmZ7Kh/DIo0YrxlDxCDulAMFPFM8J+4voLwvYepSj3sw==
 
-"@emotion/babel-plugin-jsx-pragmatic@^0.2.0":
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/@emotion/babel-plugin-jsx-pragmatic/-/babel-plugin-jsx-pragmatic-0.2.0.tgz#6fdd78600417973fa2610704693158181d8505b7"
-  integrity sha512-VPfKAtb/bVyu5y+HzCPj9bb2nHnj9yX5mMAU7N0pIDcrFZo8aqDyHXLYF8BD7tY4pNL09N87dygVLKIkQvshJw==
-  dependencies:
-    "@babel/plugin-syntax-jsx" "^7.17.12"
-
-"@emotion/babel-plugin@^11.10.0", "@emotion/babel-plugin@^11.10.6":
-  version "11.10.6"
-  resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.10.6.tgz#a68ee4b019d661d6f37dec4b8903255766925ead"
-  integrity sha512-p2dAqtVrkhSa7xz1u/m9eHYdLi+en8NowrmXeF/dKtJpU8lCWli8RUAati7NcSl0afsBott48pdnANuD0wh9QQ==
-  dependencies:
-    "@babel/helper-module-imports" "^7.16.7"
-    "@babel/runtime" "^7.18.3"
-    "@emotion/hash" "^0.9.0"
-    "@emotion/memoize" "^0.8.0"
-    "@emotion/serialize" "^1.1.1"
-    babel-plugin-macros "^3.1.0"
-    convert-source-map "^1.5.0"
-    escape-string-regexp "^4.0.0"
-    find-root "^1.1.0"
-    source-map "^0.5.7"
-    stylis "4.1.3"
-
-"@emotion/babel-preset-css-prop@^11.10.0":
-  version "11.10.0"
-  resolved "https://registry.yarnpkg.com/@emotion/babel-preset-css-prop/-/babel-preset-css-prop-11.10.0.tgz#23922787561d8376782b0e9006323512fe797275"
-  integrity sha512-oN2lCP0NJTEt80IIeFM1RbmapeEVNYzKXYk2pYirAuom9WvV9Oz/aJQN5Hn3RyBMPaY+Of1OZYpTVMle2jUm4g==
-  dependencies:
-    "@babel/plugin-transform-react-jsx" "^7.17.12"
-    "@babel/runtime" "^7.18.3"
-    "@emotion/babel-plugin" "^11.10.0"
-    "@emotion/babel-plugin-jsx-pragmatic" "^0.2.0"
-
-"@emotion/cache@^11.10.5":
-  version "11.10.7"
-  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.10.7.tgz#2e3b12d3c7c74db0a020ae79eefc52a1b03a6908"
-  integrity sha512-VLl1/2D6LOjH57Y8Vem1RoZ9haWF4jesHDGiHtKozDQuBIkJm2gimVo0I02sWCuzZtVACeixTVB4jeE8qvCBoQ==
-  dependencies:
-    "@emotion/memoize" "^0.8.0"
-    "@emotion/sheet" "^1.2.1"
-    "@emotion/utils" "^1.2.0"
-    "@emotion/weak-memoize" "^0.3.0"
-    stylis "4.1.3"
-
-"@emotion/css@^11.10.6":
-  version "11.10.6"
-  resolved "https://registry.yarnpkg.com/@emotion/css/-/css-11.10.6.tgz#5d226fdd8ef2a46d28e4eb09f66dc01a3bda5a04"
-  integrity sha512-88Sr+3heKAKpj9PCqq5A1hAmAkoSIvwEq1O2TwDij7fUtsJpdkV4jMTISSTouFeRvsGvXIpuSuDQ4C1YdfNGXw==
-  dependencies:
-    "@emotion/babel-plugin" "^11.10.6"
-    "@emotion/cache" "^11.10.5"
-    "@emotion/serialize" "^1.1.1"
-    "@emotion/sheet" "^1.2.1"
-    "@emotion/utils" "^1.2.0"
-
-"@emotion/eslint-plugin@^11.10.0":
-  version "11.10.0"
-  resolved "https://registry.yarnpkg.com/@emotion/eslint-plugin/-/eslint-plugin-11.10.0.tgz#e0d8544c8a568bb2dac605b87346baaa3b846e80"
-  integrity sha512-nWpuoQQrzI9aM9fgn+Pbb0pOau4BhheXyVqHcOYKFq46uSuSR2ivZaDwwCJKI6ScA8Pm7OcoOpwdRH2iisf9cg==
-
-"@emotion/hash@^0.9.0":
-  version "0.9.0"
-  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.0.tgz#c5153d50401ee3c027a57a177bc269b16d889cb7"
-  integrity sha512-14FtKiHhy2QoPIzdTcvh//8OyBlknNs2nXRwIhG904opCby3l+9Xaf/wuPvICBF0rc1ZCNBd3nKe9cd2mecVkQ==
-
-"@emotion/is-prop-valid@^1.2.0":
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz#7f2d35c97891669f7e276eb71c83376a5dc44c83"
-  integrity sha512-3aDpDprjM0AwaxGE09bOPkNxHpBd+kA6jty3RnaEXdweX1DF1U3VQpPYb0g1IStAuK7SVQ1cy+bNBBKp4W3Fjg==
-  dependencies:
-    "@emotion/memoize" "^0.8.0"
-
-"@emotion/memoize@^0.8.0":
-  version "0.8.0"
-  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.0.tgz#f580f9beb67176fa57aae70b08ed510e1b18980f"
-  integrity sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA==
-
-"@emotion/react@^11.10.6":
-  version "11.10.6"
-  resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.10.6.tgz#dbe5e650ab0f3b1d2e592e6ab1e006e75fd9ac11"
-  integrity sha512-6HT8jBmcSkfzO7mc+N1L9uwvOnlcGoix8Zn7srt+9ga0MjREo6lRpuVX0kzo6Jp6oTqDhREOFsygN6Ew4fEQbw==
-  dependencies:
-    "@babel/runtime" "^7.18.3"
-    "@emotion/babel-plugin" "^11.10.6"
-    "@emotion/cache" "^11.10.5"
-    "@emotion/serialize" "^1.1.1"
-    "@emotion/use-insertion-effect-with-fallbacks" "^1.0.0"
-    "@emotion/utils" "^1.2.0"
-    "@emotion/weak-memoize" "^0.3.0"
-    hoist-non-react-statics "^3.3.1"
-
-"@emotion/serialize@^1.1.1":
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.1.1.tgz#0595701b1902feded8a96d293b26be3f5c1a5cf0"
-  integrity sha512-Zl/0LFggN7+L1liljxXdsVSVlg6E/Z/olVWpfxUTxOAmi8NU7YoeWeLfi1RmnB2TATHoaWwIBRoL+FvAJiTUQA==
-  dependencies:
-    "@emotion/hash" "^0.9.0"
-    "@emotion/memoize" "^0.8.0"
-    "@emotion/unitless" "^0.8.0"
-    "@emotion/utils" "^1.2.0"
-    csstype "^3.0.2"
-
-"@emotion/sheet@^1.2.1":
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.2.1.tgz#0767e0305230e894897cadb6c8df2c51e61a6c2c"
-  integrity sha512-zxRBwl93sHMsOj4zs+OslQKg/uhF38MB+OMKoCrVuS0nyTkqnau+BM3WGEoOptg9Oz45T/aIGs1qbVAsEFo3nA==
-
-"@emotion/styled@^11.10.6":
-  version "11.10.6"
-  resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.10.6.tgz#d886afdc51ef4d66c787ebde848f3cc8b117ebba"
-  integrity sha512-OXtBzOmDSJo5Q0AFemHCfl+bUueT8BIcPSxu0EGTpGk6DmI5dnhSzQANm1e1ze0YZL7TDyAyy6s/b/zmGOS3Og==
-  dependencies:
-    "@babel/runtime" "^7.18.3"
-    "@emotion/babel-plugin" "^11.10.6"
-    "@emotion/is-prop-valid" "^1.2.0"
-    "@emotion/serialize" "^1.1.1"
-    "@emotion/use-insertion-effect-with-fallbacks" "^1.0.0"
-    "@emotion/utils" "^1.2.0"
-
-"@emotion/unitless@^0.8.0":
-  version "0.8.0"
-  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.0.tgz#a4a36e9cbdc6903737cd20d38033241e1b8833db"
-  integrity sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw==
-
-"@emotion/use-insertion-effect-with-fallbacks@^1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.0.tgz#ffadaec35dbb7885bd54de3fa267ab2f860294df"
-  integrity sha512-1eEgUGmkaljiBnRMTdksDV1W4kUnmwgp7X9G8B++9GYwl1lUdqSndSriIrTJ0N7LQaoauY9JJ2yhiOYK5+NI4A==
-
-"@emotion/utils@^1.2.0":
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.2.0.tgz#9716eaccbc6b5ded2ea5a90d65562609aab0f561"
-  integrity sha512-sn3WH53Kzpw8oQ5mgMmIzzyAaH2ZqFEbozVVBSYp538E06OSE6ytOp7pRAjNQR+Q/orwqdQYJSe2m3hCOeznkw==
-
-"@emotion/weak-memoize@^0.3.0":
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.3.0.tgz#ea89004119dc42db2e1dba0f97d553f7372f6fcb"
-  integrity sha512-AHPmaAx+RYfZz0eYu6Gviiagpmiyw98ySSlQvCUhVGDRtDFe4DBS0x1bSjdF3gqUDYOczB+yYvBTtEylYSdRhg==
-
 "@eslint-community/eslint-utils@^4.2.0":
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz#a23514e8fb9af1269d5f7788aa556798d61c6b59"
@@ -2934,6 +2799,11 @@ argparse@^1.0.7:
   dependencies:
     sprintf-js "~1.0.2"
 
+argparse@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
+  integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
+
 aria-query@^5.1.3:
   version "5.1.3"
   resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.1.3.tgz#19db27cd101152773631396f7a95a3b58c22c35e"
@@ -3111,6 +2981,18 @@ autoprefixer@^10.4.13:
     picocolors "^1.0.0"
     postcss-value-parser "^4.2.0"
 
+autoprefixer@^10.4.15:
+  version "10.4.15"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.15.tgz#a1230f4aeb3636b89120b34a1f513e2f6834d530"
+  integrity sha512-KCuPB8ZCIqFdA4HwKXsvz7j6gvSDNhDP7WnUjBleRkKjPdvCmHFuQ77ocavI8FT6NdvlBnE2UFr2H4Mycn8Vew==
+  dependencies:
+    browserslist "^4.21.10"
+    caniuse-lite "^1.0.30001520"
+    fraction.js "^4.2.0"
+    normalize-range "^0.1.2"
+    picocolors "^1.0.0"
+    postcss-value-parser "^4.2.0"
+
 available-typed-arrays@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz#92f95616501069d07d10edb2fc37d3e1c65123b7"
@@ -3180,15 +3062,6 @@ babel-plugin-lodash@^3.3.4:
     lodash "^4.17.10"
     require-package-name "^2.0.1"
 
-babel-plugin-macros@^2.1.0:
-  version "2.8.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz#0f958a7cc6556b1e65344465d99111a1e5e10138"
-  integrity sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==
-  dependencies:
-    "@babel/runtime" "^7.7.2"
-    cosmiconfig "^6.0.0"
-    resolve "^1.12.0"
-
 babel-plugin-macros@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz#9ef6dc74deb934b4db344dc973ee851d148c50c1"
@@ -3241,15 +3114,6 @@ babel-plugin-syntax-trailing-function-commas@^7.0.0-beta.0:
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-trailing-function-commas/-/babel-plugin-syntax-trailing-function-commas-7.0.0-beta.0.tgz#aa213c1435e2bffeb6fca842287ef534ad05d5cf"
   integrity sha512-Xj9XuRuz3nTSbaTXWv3itLOcxyF4oPD8douBBmj7U9BBC6nEBYfyOJYQMf/8PJAFotC62UY5dFfIGEPr7WswzQ==
 
-babel-plugin-tailwind-components@^0.5.10:
-  version "0.5.10"
-  resolved "https://registry.yarnpkg.com/babel-plugin-tailwind-components/-/babel-plugin-tailwind-components-0.5.10.tgz#33e3574e7a5ec80d108c7d3d7c424ccd018e390c"
-  integrity sha512-AVZuc+ts2FtTUKJgHb0GyIA89xYeczqTDAM9qjxtEVKgz4gWmqs7HtsC4DPXg0telTZWobwLK1Jw1Cimik1CgA==
-  dependencies:
-    "@babel/generator" "^7.0.0"
-    "@babel/parser" "^7.0.0"
-    babel-plugin-macros "^2.1.0"
-
 babel-plugin-transform-object-rest-spread@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.26.0.tgz#0f36692d50fef6b7e2d4b3ac1478137a963b7b06"
@@ -3607,6 +3471,16 @@ browserslist@^4.0.0, browserslist@^4.14.5, browserslist@^4.16.3, browserslist@^4
     node-releases "^2.0.8"
     update-browserslist-db "^1.0.10"
 
+browserslist@^4.21.10:
+  version "4.21.10"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.21.10.tgz#dbbac576628c13d3b2231332cb2ec5a46e015bb0"
+  integrity sha512-bipEBdZfVH5/pwrvqc+Ub0kUPVfGUhlKxbvfD+z1BDnPEO/X98ruXGA1WP5ASpAFKan7Qr6j736IacbZQuAlKQ==
+  dependencies:
+    caniuse-lite "^1.0.30001517"
+    electron-to-chromium "^1.4.477"
+    node-releases "^2.0.13"
+    update-browserslist-db "^1.0.11"
+
 bser@2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/bser/-/bser-2.1.1.tgz#e6787da20ece9d07998533cfd9de6f5c38f4bc05"
@@ -3800,6 +3674,11 @@ caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001449, caniuse-lite@^1.0.30001464:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001481.tgz#f58a717afe92f9e69d0e35ff64df596bfad93912"
   integrity sha512-KCqHwRnaa1InZBtqXzP98LPg0ajCVujMKjqKDhZEthIpAsJl/YEIa3YvXjGXPVqzZVguccuu7ga9KOE1J9rKPQ==
 
+caniuse-lite@^1.0.30001517, caniuse-lite@^1.0.30001520:
+  version "1.0.30001527"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001527.tgz#813826554828245ccee776c850566dce12bdeaba"
+  integrity sha512-YkJi7RwPgWtXVSgK4lG9AHH57nSzvvOp9MesgXmw4Q7n0C3H04L0foHqfxcmSAm5AcWb8dW9AYj2tR7/5GnddQ==
+
 capital-case@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/capital-case/-/capital-case-1.0.4.tgz#9d130292353c9249f6b00fa5852bee38a717e669"
@@ -4056,7 +3935,7 @@ color-name@1.1.3:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
   integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==
 
-color-name@^1.0.0, color-name@^1.1.4, color-name@~1.1.4:
+color-name@^1.0.0, color-name@~1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
@@ -4235,7 +4114,7 @@ convert-hrtime@^3.0.0:
   resolved "https://registry.yarnpkg.com/convert-hrtime/-/convert-hrtime-3.0.0.tgz#62c7593f5809ca10be8da858a6d2f702bcda00aa"
   integrity sha512-7V+KqSvMiHp8yWDuwfww06XleMWVVB9b9tURBx+G7UTADuo5hYPuowKloz4OzOqbPezxgo+fdQ1522WzPG4OeA==
 
-convert-source-map@^1.5.0, convert-source-map@^1.7.0:
+convert-source-map@^1.7.0:
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.9.0.tgz#7faae62353fb4213366d0ca98358d22e8368b05f"
   integrity sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==
@@ -4337,6 +4216,16 @@ cosmiconfig@^7.0.0:
     path-type "^4.0.0"
     yaml "^1.10.0"
 
+cosmiconfig@^8.2.0:
+  version "8.3.4"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-8.3.4.tgz#ee1356e7f24e248a6bb34ec5d438c3dcebeb410c"
+  integrity sha512-SF+2P8+o/PTV05rgsAjDzL4OFdVXAulSfC/L19VaeVT7+tpOOSscCt2QLxDZ+CLxF2WOiq6y1K5asvs8qUJT/Q==
+  dependencies:
+    import-fresh "^3.3.0"
+    js-yaml "^4.1.0"
+    parse-json "^5.2.0"
+    path-type "^4.0.0"
+
 create-ecdh@^4.0.0:
   version "4.0.4"
   resolved "https://registry.yarnpkg.com/create-ecdh/-/create-ecdh-4.0.4.tgz#d6e7f4bffa66736085a0762fd3a632684dabcc4e"
@@ -4960,6 +4849,11 @@ electron-to-chromium@^1.4.284:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.369.tgz#a98d838cdd79be4471cd04e9b4dffe891d037874"
   integrity sha512-LfxbHXdA/S+qyoTEA4EbhxGjrxx7WK2h6yb5K2v0UCOufUKX+VZaHbl3svlzZfv9sGseym/g3Ne4DpsgRULmqg==
 
+electron-to-chromium@^1.4.477:
+  version "1.4.508"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.508.tgz#5641ff2f5ba11df4bd960fe6a2f9f70aa8b9af96"
+  integrity sha512-FFa8QKjQK/A5QuFr2167myhMesGrhlOBD+3cYNxO9/S4XzHEXesyTD/1/xF644gC8buFPz3ca6G1LOQD0tZrrg==
+
 elliptic@^6.5.3:
   version "6.5.4"
   resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.4.tgz#da37cebd31e79a1367e941b592ed1fbebd58abbb"
@@ -5914,11 +5808,6 @@ find-cache-dir@^3.3.1, find-cache-dir@^3.3.2:
     make-dir "^3.0.2"
     pkg-dir "^4.1.0"
 
-find-root@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4"
-  integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==
-
 find-up@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-3.0.0.tgz#49169f1d7993430646da61ecc5ae355c21c97b73"
@@ -6278,14 +6167,6 @@ gatsby-parcel-config@^1.9.0:
     "@parcel/transformer-js" "2.8.3"
     "@parcel/transformer-json" "2.8.3"
 
-gatsby-plugin-emotion@^8.8.0:
-  version "8.9.0"
-  resolved "https://registry.yarnpkg.com/gatsby-plugin-emotion/-/gatsby-plugin-emotion-8.9.0.tgz#71009ec92b1cc26f070ca4e401b947b25e92c515"
-  integrity sha512-cYDxkgDRE/vdXmX6W7z1HgJb5+LSaekNUFFrqigA/Hias/fooJUf0qCP8bPyLtdlGnp1+sCGxUXj5egxzS2iSA==
-  dependencies:
-    "@babel/runtime" "^7.20.13"
-    "@emotion/babel-preset-css-prop" "^11.10.0"
-
 gatsby-plugin-manifest@^5.8.0:
   version "5.9.0"
   resolved "https://registry.yarnpkg.com/gatsby-plugin-manifest/-/gatsby-plugin-manifest-5.9.0.tgz#0d181c86e840400f93b263d2dcbbf486f6d5388c"
@@ -6328,6 +6209,14 @@ gatsby-plugin-page-creator@^5.9.0:
     globby "^11.1.0"
     lodash "^4.17.21"
 
+gatsby-plugin-postcss@^6.12.0:
+  version "6.12.0"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-postcss/-/gatsby-plugin-postcss-6.12.0.tgz#f992f5312cb648cffa99a7a940ffd627b32895c9"
+  integrity sha512-uzlmFvPcsYKbyyMMsBR0W1iWGOiJPJVNiVwut7h3ah0mL0ooMO5ANO+E7Sv0crEXrSJ/4QymFRX4kHDBfVn87g==
+  dependencies:
+    "@babel/runtime" "^7.20.13"
+    postcss-loader "^7.3.3"
+
 gatsby-plugin-react-helmet@^6.8.0:
   version "6.9.0"
   resolved "https://registry.yarnpkg.com/gatsby-plugin-react-helmet/-/gatsby-plugin-react-helmet-6.9.0.tgz#a6594a2e56f9c995d1c4f189b11e769500e6aa1c"
@@ -6353,13 +6242,6 @@ gatsby-plugin-sharp@^5.8.1:
     semver "^7.3.8"
     sharp "^0.31.3"
 
-gatsby-plugin-tailwindcss@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/gatsby-plugin-tailwindcss/-/gatsby-plugin-tailwindcss-1.0.3.tgz#12ebde7422ec5ae5c6a40f1f8d6c18fa5ffe1a7e"
-  integrity sha512-aWwZZR4eboMl0T3c4+XEE/MbOL4w6JPM8QBMl5dSXmBwEVofzXvOFP6P+dJAEnSy9fHi1WKw/fTojDN6xgAG2A==
-  dependencies:
-    babel-plugin-tailwind-components "^0.5.10"
-
 gatsby-plugin-typescript@^5.9.0:
   version "5.9.0"
   resolved "https://registry.yarnpkg.com/gatsby-plugin-typescript/-/gatsby-plugin-typescript-5.9.0.tgz#2906da588df5144cdc6d0afb6cdb4c41929afabd"
@@ -7107,13 +6989,6 @@ hmac-drbg@^1.0.1:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-hoist-non-react-statics@^3.3.1:
-  version "3.3.2"
-  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
-  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
-  dependencies:
-    react-is "^16.7.0"
-
 hosted-git-info@^3.0.8:
   version "3.0.8"
   resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-3.0.8.tgz#6e35d4cc87af2c5f816e4cb9ce350ba87a3f370d"
@@ -7263,7 +7138,7 @@ immutable@~3.7.6:
   resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.7.6.tgz#13b4d3cb12befa15482a26fe1b2ebae640071e4b"
   integrity sha512-AizQPcaofEtO11RZhPPHBOJRdo/20MKQF9mBLnVkBoyHi1/zXK8fzVdnEpSV9gxqtnh6Qomfp3F0xT5qP/vThw==
 
-import-fresh@^3.0.0, import-fresh@^3.1.0, import-fresh@^3.2.1:
+import-fresh@^3.0.0, import-fresh@^3.1.0, import-fresh@^3.2.1, import-fresh@^3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
   integrity sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==
@@ -7461,6 +7336,13 @@ is-core-module@^2.11.0, is-core-module@^2.9.0:
   dependencies:
     has "^1.0.3"
 
+is-core-module@^2.13.0:
+  version "2.13.0"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.13.0.tgz#bb52aa6e2cbd49a30c2ba68c42bf3435ba6072db"
+  integrity sha512-Z7dk6Qo8pOCp3l4tsX2C5ZVas4V+UxwQodwZhLopL91TX8UyyHEXafPcyoeeWuLrwzHcr3igO78wNLwHJHsMCQ==
+  dependencies:
+    has "^1.0.3"
+
 is-data-descriptor@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz#0b5ee648388e2c860282e793f1856fec3f301b56"
@@ -7829,10 +7711,10 @@ jest-worker@^27.4.5, jest-worker@^27.5.1:
     merge-stream "^2.0.0"
     supports-color "^8.0.0"
 
-jiti@^1.17.2:
-  version "1.18.2"
-  resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.18.2.tgz#80c3ef3d486ebf2450d9335122b32d121f2a83cd"
-  integrity sha512-QAdOptna2NYiSSpv0O/BwoHBSmz4YhpzJHyi+fnMRTXFjp7B8i/YG5Z8IfusxB1ufjcD2Sre1F3R+nX3fvy7gg==
+jiti@^1.18.2:
+  version "1.19.3"
+  resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.19.3.tgz#ef554f76465b3c2b222dc077834a71f0d4a37569"
+  integrity sha512-5eEbBDQT/jF1xg6l36P+mWGGoH9Spuy0PCdSr2dtWRDGC6ph/w9ZCL4lmESW8f8F7MwT3XKescfP0wnZWAKL9w==
 
 joi@^17.7.0, joi@^17.9.1:
   version "17.9.1"
@@ -7858,6 +7740,13 @@ js-yaml@^3.13.1:
     argparse "^1.0.7"
     esprima "^4.0.0"
 
+js-yaml@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-4.1.0.tgz#c1fb65f8f5017901cdd2c951864ba18458a10602"
+  integrity sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==
+  dependencies:
+    argparse "^2.0.1"
+
 jsesc@^2.5.1:
   version "2.5.2"
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4"
@@ -8036,7 +7925,7 @@ levn@^0.4.1:
     prelude-ls "^1.2.1"
     type-check "~0.4.0"
 
-lilconfig@^2.0.3, lilconfig@^2.0.5, lilconfig@^2.0.6:
+lilconfig@^2.0.3, lilconfig@^2.0.5, lilconfig@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.1.0.tgz#78e23ac89ebb7e1bfbf25b18043de756548e7f52"
   integrity sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==
@@ -8853,6 +8742,11 @@ node-object-hash@^2.3.10:
   resolved "https://registry.yarnpkg.com/node-object-hash/-/node-object-hash-2.3.10.tgz#4b0c1a3a8239e955f0db71f8e00b38b5c0b33992"
   integrity sha512-jY5dPJzw6NHd/KPSfPKJ+IHoFS81/tJ43r34ZeNMXGzCOM8jwQDCD12HYayKIB6MuznrnqIYy2e891NA2g0ibA==
 
+node-releases@^2.0.13:
+  version "2.0.13"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.13.tgz#d5ed1627c23e3461e819b02e57b75e4899b1c81d"
+  integrity sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==
+
 node-releases@^2.0.8:
   version "2.0.10"
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.10.tgz#c311ebae3b6a148c89b1813fd7c4d3c024ef537f"
@@ -9224,7 +9118,7 @@ parse-filepath@^1.0.2:
     map-cache "^0.2.0"
     path-root "^0.1.1"
 
-parse-json@^5.0.0:
+parse-json@^5.0.0, parse-json@^5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-5.2.0.tgz#c76fc66dee54231c962b22bcc8a72cf2f99753cd"
   integrity sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==
@@ -9487,29 +9381,29 @@ postcss-flexbugs-fixes@^5.0.2:
   resolved "https://registry.yarnpkg.com/postcss-flexbugs-fixes/-/postcss-flexbugs-fixes-5.0.2.tgz#2028e145313074fc9abe276cb7ca14e5401eb49d"
   integrity sha512-18f9voByak7bTktR2QgDveglpn9DTbBWPUzSOe9g0N4WR/2eSt6Vrcbf0hmspvMI6YWGywz6B9f7jzpFNJJgnQ==
 
-postcss-import@^14.1.0:
-  version "14.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-14.1.0.tgz#a7333ffe32f0b8795303ee9e40215dac922781f0"
-  integrity sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==
+postcss-import@^15.1.0:
+  version "15.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-15.1.0.tgz#41c64ed8cc0e23735a9698b3249ffdbf704adc70"
+  integrity sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==
   dependencies:
     postcss-value-parser "^4.0.0"
     read-cache "^1.0.0"
     resolve "^1.1.7"
 
-postcss-js@^4.0.0:
+postcss-js@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-4.0.1.tgz#61598186f3703bab052f1c4f7d805f3991bee9d2"
   integrity sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==
   dependencies:
     camelcase-css "^2.0.1"
 
-postcss-load-config@^3.1.4:
-  version "3.1.4"
-  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-3.1.4.tgz#1ab2571faf84bb078877e1d07905eabe9ebda855"
-  integrity sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==
+postcss-load-config@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-4.0.1.tgz#152383f481c2758274404e4962743191d73875bd"
+  integrity sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==
   dependencies:
     lilconfig "^2.0.5"
-    yaml "^1.10.2"
+    yaml "^2.1.1"
 
 postcss-loader@^5.3.0:
   version "5.3.0"
@@ -9520,6 +9414,15 @@ postcss-loader@^5.3.0:
     klona "^2.0.4"
     semver "^7.3.4"
 
+postcss-loader@^7.3.3:
+  version "7.3.3"
+  resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-7.3.3.tgz#6da03e71a918ef49df1bb4be4c80401df8e249dd"
+  integrity sha512-YgO/yhtevGO/vJePCQmTxiaEwER94LABZN0ZMT4A0vsak9TpO+RvKRs7EmJ8peIlB9xfXCsS7M8LjqncsUZ5HA==
+  dependencies:
+    cosmiconfig "^8.2.0"
+    jiti "^1.18.2"
+    semver "^7.3.8"
+
 postcss-merge-longhand@^5.1.7:
   version "5.1.7"
   resolved "https://registry.yarnpkg.com/postcss-merge-longhand/-/postcss-merge-longhand-5.1.7.tgz#24a1bdf402d9ef0e70f568f39bdc0344d568fb16"
@@ -9598,12 +9501,12 @@ postcss-modules-values@^4.0.0:
   dependencies:
     icss-utils "^5.0.0"
 
-postcss-nested@6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-6.0.0.tgz#1572f1984736578f360cffc7eb7dca69e30d1735"
-  integrity sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==
+postcss-nested@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-6.0.1.tgz#f83dc9846ca16d2f4fa864f16e9d9f7d0961662c"
+  integrity sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==
   dependencies:
-    postcss-selector-parser "^6.0.10"
+    postcss-selector-parser "^6.0.11"
 
 postcss-normalize-charset@^5.1.0:
   version "5.1.0"
@@ -9691,7 +9594,7 @@ postcss-reduce-transforms@^5.1.0:
   dependencies:
     postcss-value-parser "^4.2.0"
 
-postcss-selector-parser@^6.0.10, postcss-selector-parser@^6.0.11, postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4, postcss-selector-parser@^6.0.5, postcss-selector-parser@^6.0.9:
+postcss-selector-parser@^6.0.11, postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4, postcss-selector-parser@^6.0.5, postcss-selector-parser@^6.0.9:
   version "6.0.11"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.11.tgz#2e41dc39b7ad74046e1615185185cd0b17d0c8dc"
   integrity sha512-zbARubNdogI9j7WY4nQJBiNqQf3sLS3wCP4WfOidu+p28LofJqDH1tcXypGrcmMHhDk2t9wGhCsYe/+szLTy1g==
@@ -9719,7 +9622,7 @@ postcss-value-parser@^4.0.0, postcss-value-parser@^4.1.0, postcss-value-parser@^
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
-postcss@^8.0.9, postcss@^8.2.15, postcss@^8.2.9, postcss@^8.4.21:
+postcss@^8.2.15, postcss@^8.2.9, postcss@^8.4.21:
   version "8.4.23"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.23.tgz#df0aee9ac7c5e53e1075c24a3613496f9e6552ab"
   integrity sha512-bQ3qMcpF6A/YjR55xtoTr0jGOlnPOKAIMdOWiv0EIT6HVPEaJiJB4NLljSbiHoC2RX7DN5Uvjtpbg1NPdwv1oA==
@@ -9728,6 +9631,15 @@ postcss@^8.0.9, postcss@^8.2.15, postcss@^8.2.9, postcss@^8.4.21:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
+postcss@^8.4.23, postcss@^8.4.29:
+  version "8.4.29"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.29.tgz#33bc121cf3b3688d4ddef50be869b2a54185a1dd"
+  integrity sha512-cbI+jaqIeu/VGqXEarWkRCCffhjgXc0qjBtXpqJhTBohMUjUQnbBr0xqX3vEKudc4iviTewcJo5ajcec5+wdJw==
+  dependencies:
+    nanoid "^3.3.6"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
+
 prebuild-install@^7.1.1:
   version "7.1.1"
   resolved "https://registry.yarnpkg.com/prebuild-install/-/prebuild-install-7.1.1.tgz#de97d5b34a70a0c81334fd24641f2a1702352e45"
@@ -10079,7 +9991,7 @@ react-icons@^4.8.0:
   resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.8.0.tgz#621e900caa23b912f737e41be57f27f6b2bff445"
   integrity sha512-N6+kOLcihDiAnj5Czu637waJqSnwlMNROzVZMhfX68V/9bu9qHaMIJC4UdozWoOk57gahFCNHwVvWzm0MTzRjg==
 
-react-is@^16.13.1, react-is@^16.7.0:
+react-is@^16.13.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -10391,7 +10303,7 @@ resolve-url@^0.2.1:
   resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
   integrity sha512-ZuF55hVUQaaczgOIwqWzkEcEidmlD/xl44x1UZnhOXcYuFN2S6+rcxpG+C1N3So0wvNI3DmJICUFfu2SxhBmvg==
 
-resolve@^1.1.7, resolve@^1.10.0, resolve@^1.12.0, resolve@^1.14.2, resolve@^1.19.0, resolve@^1.22.1:
+resolve@^1.1.7, resolve@^1.10.0, resolve@^1.14.2, resolve@^1.19.0, resolve@^1.22.1:
   version "1.22.2"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.2.tgz#0ed0943d4e301867955766c9f3e1ae6d01c6845f"
   integrity sha512-Sb+mjNHOULsBv818T40qSPeRiuWLyaGMa5ewydRLFimneixmVy2zdivRl+AF6jaYPC8ERxGDmFSiqui6SfPd+g==
@@ -10400,6 +10312,15 @@ resolve@^1.1.7, resolve@^1.10.0, resolve@^1.12.0, resolve@^1.14.2, resolve@^1.19
     path-parse "^1.0.7"
     supports-preserve-symlinks-flag "^1.0.0"
 
+resolve@^1.22.2:
+  version "1.22.4"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.4.tgz#1dc40df46554cdaf8948a486a10f6ba1e2026c34"
+  integrity sha512-PXNdCiPqDqeUou+w1C2eTQbNfxKSuMxqTCuvlmmMsk1NWHL5fRrhY6Pl0qEYYc6+QqGClco1Qj8XnjPego4wfg==
+  dependencies:
+    is-core-module "^2.13.0"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
 resolve@^2.0.0-next.4:
   version "2.0.0-next.4"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-2.0.0-next.4.tgz#3d37a113d6429f496ec4752d2a2e58efb1fd4660"
@@ -10913,7 +10834,7 @@ source-map-url@^0.4.0:
   resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.1.tgz#0af66605a745a5a2f91cf1bbf8a7afbc283dec56"
   integrity sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw==
 
-source-map@^0.5.6, source-map@^0.5.7:
+source-map@^0.5.6:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
   integrity sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==
@@ -11217,15 +11138,10 @@ stylehacks@^5.1.1:
     browserslist "^4.21.4"
     postcss-selector-parser "^6.0.4"
 
-stylis@4.1.3:
-  version "4.1.3"
-  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.1.3.tgz#fd2fbe79f5fed17c55269e16ed8da14c84d069f7"
-  integrity sha512-GP6WDNWf+o403jrEp9c5jibKavrtLW+/qYGhFxFrG8maXhwTBI7gLLhiBb0o7uFccWN+EOS9aMO6cGHWAO07OA==
-
-sucrase@^3.29.0:
-  version "3.32.0"
-  resolved "https://registry.yarnpkg.com/sucrase/-/sucrase-3.32.0.tgz#c4a95e0f1e18b6847127258a75cf360bc568d4a7"
-  integrity sha512-ydQOU34rpSyj2TGyz4D2p8rbktIOZ8QY9s+DGLvFU1i5pWJE8vkpruCjGCMHsdXwnD7JDcS+noSwM/a7zyNFDQ==
+sucrase@^3.32.0:
+  version "3.34.0"
+  resolved "https://registry.yarnpkg.com/sucrase/-/sucrase-3.34.0.tgz#1e0e2d8fcf07f8b9c3569067d92fbd8690fb576f"
+  integrity sha512-70/LQEZ07TEcxiU2dz51FKaE6hCTWC6vr7FOk3Gr0U60C3shtAN+H+BFr9XlYe5xqf3RA8nrc+VIwzCfnxuXJw==
   dependencies:
     "@jridgewell/gen-mapping" "^0.3.2"
     commander "^4.0.0"
@@ -11297,35 +11213,33 @@ table@^6.0.9:
     string-width "^4.2.3"
     strip-ansi "^6.0.1"
 
-tailwindcss@^3.3.1:
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.3.1.tgz#b6662fab6a9b704779e48d083a9fef5a81d2b81e"
-  integrity sha512-Vkiouc41d4CEq0ujXl6oiGFQ7bA3WEhUZdTgXAhtKxSy49OmKs8rEfQmupsfF0IGW8fv2iQkp1EVUuapCFrZ9g==
+tailwindcss@^3.3.3:
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.3.3.tgz#90da807393a2859189e48e9e7000e6880a736daf"
+  integrity sha512-A0KgSkef7eE4Mf+nKJ83i75TMyq8HqY3qmFIJSWy8bNt0v1lG7jUcpGpoTFxAwYcWOphcTBLPPJg+bDfhDf52w==
   dependencies:
+    "@alloc/quick-lru" "^5.2.0"
     arg "^5.0.2"
     chokidar "^3.5.3"
-    color-name "^1.1.4"
     didyoumean "^1.2.2"
     dlv "^1.1.3"
     fast-glob "^3.2.12"
     glob-parent "^6.0.2"
     is-glob "^4.0.3"
-    jiti "^1.17.2"
-    lilconfig "^2.0.6"
+    jiti "^1.18.2"
+    lilconfig "^2.1.0"
     micromatch "^4.0.5"
     normalize-path "^3.0.0"
     object-hash "^3.0.0"
     picocolors "^1.0.0"
-    postcss "^8.0.9"
-    postcss-import "^14.1.0"
-    postcss-js "^4.0.0"
-    postcss-load-config "^3.1.4"
-    postcss-nested "6.0.0"
+    postcss "^8.4.23"
+    postcss-import "^15.1.0"
+    postcss-js "^4.0.1"
+    postcss-load-config "^4.0.1"
+    postcss-nested "^6.0.1"
     postcss-selector-parser "^6.0.11"
-    postcss-value-parser "^4.2.0"
-    quick-lru "^5.1.1"
-    resolve "^1.22.1"
-    sucrase "^3.29.0"
+    resolve "^1.22.2"
+    sucrase "^3.32.0"
 
 tapable@^1.0.0, tapable@^1.1.3:
   version "1.1.3"
@@ -11782,7 +11696,7 @@ upath@^1.1.1:
   resolved "https://registry.yarnpkg.com/upath/-/upath-1.2.0.tgz#8f66dbcd55a883acdae4408af8b035a5044c1894"
   integrity sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==
 
-update-browserslist-db@^1.0.10:
+update-browserslist-db@^1.0.10, update-browserslist-db@^1.0.11:
   version "1.0.11"
   resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.11.tgz#9a2a641ad2907ae7b3616506f4b977851db5b940"
   integrity sha512-dCwEFf0/oT85M1fHBg4F0jtLwJrutGoHSQXCh7u4o2t1drG+c0a9Flnqww6XUKSfQMPpJBRjU8d4RXB09qtvaA==
@@ -12374,6 +12288,11 @@ yaml@^2.0.0:
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.2.1.tgz#3014bf0482dcd15147aa8e56109ce8632cd60ce4"
   integrity sha512-e0WHiYql7+9wr4cWMx3TVQrNwejKaEe7/rHNmQmqRjazfOP5W8PB6Jpebb5o6fIapbz9o9+2ipcaTM2ZwDI6lw==
 
+yaml@^2.1.1:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.3.2.tgz#f522db4313c671a0ca963a75670f1c12ea909144"
+  integrity sha512-N/lyzTPaJasoDmfV7YTrYCI0G/3ivm/9wdG0aHuheKowWQwGTsK0Eoiw6utmzAnI6pkJa0DUVygvp3spqqEKXg==
+
 yargs-parser@^18.1.2:
   version "18.1.3"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-18.1.3.tgz#be68c4975c6b2abf469236b0c870362fab09a7b0"