feat: updgrade tailwind css to v4

package.json

@@ -84,7 +84,7 @@
     "@octokit/rest": "^21.1.1",
     "@pmmmwh/react-refresh-webpack-plugin": "next",
     "@svgr/webpack": "^8.1.0",
-    "autoprefixer": "^10.4.21",
+    "@tailwindcss/postcss": "^4.0.14",
     "babel-loader": "^10.0.0",
     "copy-webpack-plugin": "^13.0.0",
     "css-loader": "^7.1.2",
@@ -136,7 +136,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.0.14",
     "tap-spot": "^1.1.2",
     "unist-util-visit": "^5.0.0",
     "webpack": "^5.97.1",

postcss.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  plugins: [require('tailwindcss'), require('autoprefixer')],
+  plugins: [require('@tailwindcss/postcss')],
 };

src/components/Configuration/components.js

@@ -81,7 +81,7 @@ export class Details extends Component {
         position={['right', 'top']}
         padding={0}
         onClickOutside={this.clickOutsideHandler}
-        containerClassName={'shadow'}
+        containerClassName={'shadow-sm'}
         content={<Card body={content} />}
       >
         <span

src/components/Contributors/Contributors.jsx

@@ -20,7 +20,7 @@ function Contributor({ contributor, inView }) {
         height={45}
         alt={contributor}
         title={contributor}
-        className="w-full rounded-full shadow"
+        className="w-full rounded-full shadow-sm"
         src={
           inView ? `https://github.com/${contributor}.png?size=90` : SmallIcon
         }

src/components/Navigation/Navigation.jsx

@@ -54,7 +54,7 @@ function NavigationItem({ children, url, isactive, ariaLabel }) {
     <NavLink
       {...obj}
       className={({ isActive }) =>
-        isActive ? `${classes} !text-blue-200` : classes
+        isActive ? `${classes} text-blue-200!` : classes
       }
       to={url}
       aria-label={ariaLabel}
@@ -232,7 +232,7 @@ function Navigation({ links, pathname, hash = '', toggleSidebar }) {
                         title={child.title}
                         className={() =>
                           isActive
-                            ? `!text-black dark:!text-white ${classNames}`
+                            ? `text-black! dark:text-white! ${classNames}`
                             : classNames
                         }
                       >

src/components/NotificationBar/MessageBar.jsx

@@ -27,7 +27,7 @@ export default function MessageBar(props) {
     <>
       {listTransitions((styles) => (
         <animated.div
-          className="flex items-center rounded z-50 fixed left-[1px] right-[1px] bottom-[1px] bg-white border-2 border-solid border-gray-700 max-w-full pl-20 py-20 shadow-2xl md:left-20 md:right-auto md:bottom-20 md:max-w-[300px] dark:bg-gray-500 print:hidden"
+          className="flex items-center rounded-sm z-50 fixed left-[1px] right-[1px] bottom-[1px] bg-white border-2 border-solid border-gray-700 max-w-full pl-20 py-20 shadow-2xl md:left-20 md:right-auto md:bottom-20 md:max-w-[300px] dark:bg-gray-500 print:hidden"
           style={styles}
         >
           <Content />

src/components/Page/Page.jsx

@@ -136,7 +136,7 @@ export default function Page(props) {
 
         {loadContributors && (
           <div data-testid="contributors" className="print:hidden">
-            <h2 className="!font-sans !font-normal">
+            <h2 className="font-sans! font-normal!">
               {numberOfContributors}{' '}
               {numberOfContributors === 1 ? 'Contributor' : 'Contributors'}
             </h2>

src/components/Tooltip/Tooltip.jsx

@@ -41,7 +41,7 @@ const Tooltip = ({
       {isVisible && (
         <div
           className={`
-            absolute z-[9999]
+            absolute z-9999
             ${positions[position]}
             ${isDelayed ? 'opacity-100' : 'opacity-0'}
             transition-opacity duration-200