Fix tailwindcss-border-gradient package version again

package.json

@@ -41,7 +41,7 @@
     "react-icons": "^3.11.0",
     "react-share": "^4.2.1",
     "tailwindcss": "^1.8.8",
-    "tailwindcss-border-gradients": "1.0.1",
+    "tailwindcss-border-gradients": "^2.0.3",
     "tailwindcss-bulma-modals": "^1.0.2",
     "typescript": "^4.0.2"
   },

src/common/components/UI/Sidebar/Profile.tsx

@@ -18,7 +18,7 @@ const Profile: React.FC = () => (
     render={data => (
       <div style={{ maxWidth: '175px' }} className="mx-auto">
         <Img
-          className="border-2 border-blue-transparent border-gradient-t-blue-custom"
+          className="border-2 border-blue-transparent border-gradient-t-blue-dark"
           fixed={data.placeholderImage.childImageSharp.fixed}
         />
       </div>

src/common/components/UI/Sidebar/Sidebar.tsx

@@ -9,7 +9,7 @@ interface SidebarProps {
 
 const mobileClass: (props: SidebarProps) => string = props => {
   return classNames({
-    'border-blue-transparent border-gradient-b-blue-custom flex-col justify-center px-5 mt-24 md:w-75 md:fixed md:h-screen md:mt-0 md:border-r': true,
+    'border-blue-transparent border-gradient-b-blue-dark flex-col justify-center px-5 mt-24 md:w-75 md:fixed md:h-screen md:mt-0 md:border-r': true,
     'hidden md:flex': !props.showOnMobile,
     flex: props.showOnMobile,
   });

src/common/components/UI/Sidebar/Social.tsx

@@ -12,7 +12,7 @@ const iconClass = 'hover:text-blue-lighter text-xl';
 
 const Social: React.FC = () => {
   return (
-    <div className="border-t border-blue-transparent border-gradient-r-blue-custom py-3 mt-3">
+    <div className="border-t border-blue-transparent border-gradient-r-blue-dark py-3 mt-3">
       <ul className="flex justify-center space-x-4">
         <li>
           <a className={linkClass} href="https://github.com/markhagemann">

src/portfolio/components/Company.tsx

@@ -10,7 +10,7 @@ interface CompanyProps {
 const Company: React.FC<CompanyProps> = (props: CompanyProps) => {
   return (
     <div>
-      <hr className="border-b border-blue-transparent border-gradient-r-blue-custom my-8" />
+      <hr className="border-b border-blue-transparent border-gradient-r-blue-dark my-8" />
       <h2 className="mb-2 text-3xl font-bold leading-9"> {props.company} </h2>
       {props.role && (
         <h2 className="text-grey-standard font-light text-xl mb-1 leading-6">
@@ -20,7 +20,7 @@ const Company: React.FC<CompanyProps> = (props: CompanyProps) => {
       )}
       {props.years && <p className="text-grey-dark font-exo"> {props.years}</p>}
       {!props.noPosts && (
-        <hr className="border-b border-blue-transparent border-gradient-r-blue-custom my-8" />
+        <hr className="border-b border-blue-transparent border-gradient-r-blue-dark my-8" />
       )}
     </div>
   );

tailwind.config.js

@@ -19,7 +19,7 @@ module.exports = {
     },
     linearBorderGradients: {
       colors: {
-        'blue-custom': ['#12223c', '#0a3557', '#12223c'],
+        'blue-dark': ['#12223c', '#0a3557', '#12223c'],
       },
     },
     extend: {