Remove text-opacity classes as Tailwind has dropped them

src/assets/index.css

@@ -74,9 +74,7 @@ code {
     source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
 }
 
-.text-base-content-important {
+
-  color: hsla(var(--bc) / var(--tw-text-opacity)) !important;
-}
 
 svg {
   vertical-align: unset;

src/components/avatar-card/index.tsx

@@ -70,7 +70,7 @@ const AvatarCard: React.FC<AvatarCardProps> = ({
               </span>
             )}
           </h5>
-          <div className="mt-3 text-base-content text-opacity-60 font-mono">
+          <div className="mt-3 text-base-content font-mono">
             {loading || !profile
               ? skeleton({ widthCls: 'w-48', heightCls: 'h-5' })
               : profile.bio}

src/components/blog-card/index.tsx

@@ -140,7 +140,7 @@ const BlogCard = ({
                         addSuffix: true,
                       })}
                     </p>
-                    <p className="mt-3 text-base-content text-opacity-60 text-sm">
+                    <p className="mt-3 text-base-content text-sm">
                       {article.description}
                     </p>
                     <div className="mt-4 flex items-center flex-wrap justify-center md:justify-start">

src/components/certification-card/index.tsx

@@ -72,7 +72,7 @@ const CertificationCard = ({
             )}
           </h5>
         </div>
-        <div className="text-base-content text-opacity-60">
+        <div className="text-base-content">
           <ol className="relative border-l border-base-300 border-opacity-30 my-2 mx-4">
             {loading ? (
               renderSkeleton()

src/components/details-card/index.tsx

@@ -171,7 +171,7 @@ const DetailsCard = ({ profile, loading, social, github }: Props) => {
   return (
     <div className="card shadow-lg card-sm bg-base-100">
       <div className="card-body">
-        <div className="text-base-content text-opacity-60">
+        <div className="text-base-content">
           {loading || !profile ? (
             renderSkeleton()
           ) : (

src/components/education-card/index.tsx

@@ -64,7 +64,7 @@ const EducationCard = ({
             )}
           </h5>
         </div>
-        <div className="text-base-content text-opacity-60">
+        <div className="text-base-content">
           <ol className="relative border-l border-base-300 border-opacity-30 my-2 mx-4">
             {loading ? (
               renderSkeleton()

src/components/error-page/index.tsx

@@ -16,9 +16,7 @@ const ErrorPage: React.FC<CustomError> = (props) => {
               {`${props.status}`}
             </h1>
             <p className="text-lg pb-2 text-base-content">{props.title}</p>
-            <div className="text-base-content text-opacity-60">
+            <div className="text-base-content">{props.subTitle}</div>
-              {props.subTitle}
-            </div>
           </div>
         </div>
       </div>

src/components/experience-card/index.tsx

@@ -69,7 +69,7 @@ const ExperienceCard = ({
             )}
           </h5>
         </div>
-        <div className="text-base-content text-opacity-60">
+        <div className="text-base-content">
           <ol className="relative border-l border-base-300 border-opacity-30 my-2 mx-4">
             {loading ? (
               renderSkeleton()

src/components/external-project-card/index.tsx

@@ -112,7 +112,7 @@ const ExternalProjectCard = ({
                       </div>
                     </div>
                   )}
-                  <p className="mt-2 text-base-content text-opacity-60 text-sm text-justify">
+                  <p className="mt-2 text-base-content text-sm text-justify">
                     {item.description}
                   </p>
                 </div>

src/components/github-project-card/index.tsx

@@ -99,11 +99,11 @@ const GithubProjectCard = ({
                 <span>{item.name}</span>
               </div>
             </div>
-            <p className="mb-5 mt-1 text-base-content text-opacity-60 text-sm">
+            <p className="mb-5 mt-1 text-base-content text-sm">
               {item.description}
             </p>
           </div>
-          <div className="flex justify-between text-sm text-base-content text-opacity-60 truncate">
+          <div className="flex justify-between text-sm text-base-content truncate">
             <div className="flex grow">
               <span className="mr-3 flex items-center">
                 <AiOutlineStar className="mr-0.5" />

src/components/publication-card/index.tsx

@@ -105,7 +105,7 @@ const PublicationCard = ({
                     </p>
                   )}
                   {item.description && (
-                    <p className="mt-2 text-base-content text-opacity-60 text-sm text-justify">
+                    <p className="mt-2 text-base-content text-sm text-justify">
                       {item.description}
                     </p>
                   )}