chore: update tailwind and related dependencies to latest versions (#7984)

Author: TusharThakur04

.github/dependabot.yml

@@ -8,8 +8,6 @@ updates:
     labels:
       - dependencies
     versioning-strategy: widen
-    ignore:
-      - dependency-name: "tailwindcss"
     groups:
       dependencies:
         patterns:

package.json

@@ -98,9 +98,10 @@
     "@octokit/rest": "^22.0.1",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.6.2",
     "@svgr/webpack": "^8.1.0",
+    "@tailwindcss/postcss": "^4.2.1",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.2",
-    "autoprefixer": "^10.4.24",
+    "autoprefixer": "^10.4.27",
     "babel-loader": "^10.1.1",
     "copy-webpack-plugin": "^14.0.0",
     "css-loader": "^7.1.3",
@@ -132,7 +133,7 @@
     "mkdirp": "^3.0.1",
     "modularscale-sass": "^3.0.3",
     "npm-run-all": "^4.1.1",
-    "postcss": "^8.5.6",
+    "postcss": "^8.5.8",
     "postcss-loader": "^8.2.0",
     "prettier": "^3.8.1",
     "react-refresh": "^0.18.0",
@@ -152,7 +153,7 @@
     "sitemap-static": "^0.4.2",
     "static-site-generator-webpack-plugin": "^3.4.1",
     "style-loader": "^4.0.0",
-    "tailwindcss": "^3.4.16",
+    "tailwindcss": "^4.2.1",
     "tap-spot": "^1.1.2",
     "unist-util-visit": "^5.1.0",
     "webpack": "^5.105.0",

postcss.config.js

@@ -1,5 +1,5 @@
 "use strict";
 
 module.exports = {
-  plugins: [require("tailwindcss"), require("autoprefixer")],
+  plugins: ["@tailwindcss/postcss", "autoprefixer"],
 };

src/components/Dropdown/Dropdown.scss

@@ -11,6 +11,8 @@
     margin: 0;
     padding: 0;
     font-size: inherit;
+    display: flex;
+    align-items: center;
   }
 }
 
@@ -21,6 +23,7 @@
 }
 
 .dropdown__arrow {
+  line-height: 1;
   &:before {
     content: "\25be";
   }

src/components/Footer/Footer.scss

@@ -1,3 +1,5 @@
+@use "../../styles/partials/vars" as *;
+@use "sass:color";
 @use "../../styles/partials/mixins" as *;
 @use "../../styles/partials/functions" as *;
 
@@ -63,6 +65,7 @@
 
   img {
     width: auto;
+    display: inline-block;
     height: 100%;
   }
 }
@@ -94,12 +97,16 @@
 
   img {
     width: auto;
+    display: inline-block;
     height: 100%;
     margin-left: 1rem;
   }
 }
 
 .footer__top {
+  a {
+    color: $text-color-highlight;
+  }
   max-width: 900px;
   margin: 0 auto;
   text-align: center;

src/components/Markdown/Markdown.scss

@@ -125,6 +125,7 @@ $topHeightMobileWithBanner: $bannerHeight + $topHeightMobile;
   ul,
   ol {
     padding-left: 30px;
+    list-style: revert;
 
     &:first-child {
       margin-top: 0;

src/components/Navigation/Navigation.jsx

@@ -240,7 +240,7 @@ function Navigation({ links, pathname, hash = "", toggleSidebar }) {
                 >
                   {link.children.map((child) => {
                     const classNames =
-                      "text-blue-400 py-5 text-sm capitalize hover:text-black dark:hover:text-white";
+                      "text-blue-400 dark:text-[#69a8ee] py-5 text-sm capitalize hover:text-black dark:hover:text-white";
                     const isActive = location.pathname.startsWith(child.url);
                     return (
                       <NavLink

src/components/SplashViz/SplashViz.jsx

@@ -14,7 +14,7 @@ import "./SplashViz.scss";
 export default class SplashViz extends Component {
   render() {
     return (
-      <section className="splash-viz dark:bg-gray-900">
+      <section className="splash-viz dark:bg-gray-900!">
         <h1 className="splash-viz__heading">
           <span> bundle your</span>
           <TextRotator delay={5000} repeatDelay={5000} maxWidth={110}>

src/styles/dark.scss

@@ -112,21 +112,13 @@
   .footer__inner {
     border-color: #252525;
   }
-  a,
-  button.as-link {
-    color: #69a8ee;
-  }
   .page-links__gap {
     color: #999;
   }
   .sidebar-item__toggle,
   .sidebar-item--disabled .sidebar-item__toggle {
     color: #69a8ee;
   }
-  .sidebar-item__anchor a:hover,
-  a:hover {
-    color: #82b7f6;
-  }
   .site {
     background: #121212 !important;
   }
@@ -174,3 +166,17 @@
     color: white;
   }
 }
+
+@layer base {
+  [data-theme="dark"] a,
+  [data-theme="dark"] button.as-link {
+    color: #69a8ee;
+  }
+}
+
+@layer base {
+  [data-theme="dark"] .sidebar-item__anchor a:hover,
+  [data-theme="dark"] a:hover {
+    color: #82b7f6;
+  }
+}

src/styles/index.scss

@@ -2,7 +2,6 @@
 @use "partials/vars" as *;
 @use "partials/functions" as *;
 @use "partials/mixins" as *;
-@use "./reset";
 @use "dark";
 
 @import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;600&family=Source+Sans+Pro:ital,wght@0,400;0,600;1,400&family=Source+Serif+Pro:wght@600&display=swap");
@@ -32,36 +31,38 @@ body {
 [aria-hidden="true"]:hover .header-link {
   visibility: visible;
 }
-a,
-button.as-link {
-  color: $text-color-highlight;
-  text-decoration: none;
-  transition: color 250ms;
+@layer base {
+  a,
+  button.as-link {
+    color: $text-color-highlight;
+    text-decoration: none;
+    transition: color 250ms;
 
-  &.icon-link {
-    display: inline-block;
-    font-size: 0.7em;
-    margin-left: 16px;
-    transform: rotate(-45deg);
+    &.icon-link {
+      display: inline-block;
+      font-size: 0.7em;
+      margin-left: 16px;
+      transform: rotate(-45deg);
+
+      color: color.adjust(getColor(dusty-grey), $lightness: 10%);
+      &:hover {
+        color: $text-color-highlight;
+      }
+    }
 
-    color: color.adjust(getColor(dusty-grey), $lightness: 10%);
     &:hover {
-      color: $text-color-highlight;
+      color: color.adjust(getColor(denim), $lightness: -5%);
     }
   }
 
-  &:hover {
-    color: color.adjust(getColor(denim), $lightness: -5%);
+  ::selection {
+    background: color.adjust(getColor(malibu), $alpha: -0.65);
   }
-}
 
-::selection {
-  background: color.adjust(getColor(malibu), $alpha: -0.65);
-}
-
-.language-diff {
-  .token.prefix.inserted,
-  .token.prefix.deleted {
-    user-select: none;
+  .language-diff {
+    .token.prefix.inserted,
+    .token.prefix.deleted {
+      user-select: none;
+    }
   }
 }