Upgrade to Tailwind 3

components/Editor/index.tsx

@@ -446,23 +446,23 @@ const Editor = ({ readOnly = false }: Props) => {
       <div className="flex flex-col md:flex-row-reverse">
         <div className="w-full md:w-1/2">
           <div
-            className="pane pane-dark overflow-auto border-t border-black-900 border-opacity-25 bg-gray-800 dark:bg-black-700 text-white px-4 py-3"
+            className="pane pane-dark overflow-auto border-t border-black-900/25 bg-gray-800 dark:bg-black-700 text-white px-4 py-3"
             style={{ height: consoleHeight }}
           >
             <ExecutionState />
           </div>
         </div>
         <div className="w-full md:w-1/2">
           <div
-            className="pane pane-dark overflow-auto bg-gray-800 dark:bg-black-700 text-white border-t border-black-900 border-opacity-25 md:border-r"
+            className="pane pane-dark overflow-auto bg-gray-800 dark:bg-black-700 text-white border-t border-black-900/25 md:border-r"
             style={{ height: consoleHeight }}
           >
             <Console output={output} />
           </div>
         </div>
       </div>
 
-      <div className="rounded-b-lg py-2 px-4 border-t bg-gray-800 dark:bg-black-700 border-black-900 border-opacity-25 text-gray-400 dark:text-gray-600 text-xs">
+      <div className="rounded-b-lg py-2 px-4 border-t bg-gray-800 dark:bg-black-700 border-black-900/25 text-gray-400 dark:text-gray-600 text-xs">
         Solidity Compiler {compilerSemVer}
       </div>
     </div>

components/Reference/DynamicFee.tsx

@@ -123,7 +123,7 @@ const DynamicFee = ({ referenceItem, fork }: Props) => {
                   name={key}
                   value={inputs[key]}
                   onChange={(e) => handleChange(key, e.target.value)}
-                  className="bg-white bg-opacity-75 dark:bg-black-400 mb-4 text-sm font-mono"
+                  className="bg-white/75 dark:bg-black-400/75 mb-4 text-sm font-mono"
                 />
               )}
 

components/layouts/Nav.tsx

@@ -29,7 +29,7 @@ const Nav = () => {
             className={cn(
               'py-2 md:py-0 px-2 flex justify-between items-start md:items-center flex-col md:flex-row w-full md:w-auto fixed md:static shadow-md md:shadow-none transition-all',
               {
-                'left-0 bg-white dark:bg-black-800 md:bg-transparent bg-opacity-85 md:bg-opacity-100':
+                'left-0 bg-white dark:bg-black-800 md:bg-transparent dark:md:bg-transparent':
                   isMenuVisible,
                 '-left-full': !isMenuVisible,
               },

components/ui/Message.tsx

@@ -12,13 +12,13 @@ type Props = {
 export const Message: React.FC<Props> = ({ type, text }) => {
   const bgColor = useMemo(() => {
     if (type === 'success') {
-      return 'bg-green-400'
+      return 'bg-green-400/85'
     }
     if (type === 'warning') {
-      return 'bg-yellow-400'
+      return 'bg-yellow-400/85'
     }
     if (type === 'error') {
-      return 'bg-red-400'
+      return 'bg-red-400/85'
     }
   }, [type])
 
@@ -29,7 +29,7 @@ export const Message: React.FC<Props> = ({ type, text }) => {
   return (
     <div
       className={cn(
-        'flex items-center rounded text-white text-xs px-3 py-2 bg-opacity-85',
+        'flex items-center rounded text-white text-xs px-3 py-2',
         bgColor,
       )}
     >

package.json

@@ -37,7 +37,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-select": "^5.1.0",
-    "react-simple-code-editor": "^0.11.0",
+    "react-simple-code-editor": "^0.11.2",
     "react-table": "^7.7.0",
     "react-tooltip": "^4.2.21"
   },
@@ -50,7 +50,7 @@
     "@types/react-table": "^7.7.6",
     "@typescript-eslint/eslint-plugin": "^5.0.0",
     "@typescript-eslint/parser": "^5.0.0",
-    "autoprefixer": "^10.3.7",
+    "autoprefixer": "^10.4.7",
     "eslint": "7.32.0",
     "eslint-config-next": "12.0.7",
     "eslint-config-prettier": "^8.3.0",
@@ -61,10 +61,10 @@
     "husky": "^7.0.2",
     "next-images": "^1.8.4",
     "nstall": "^0.2.0",
-    "postcss": "^8.3.9",
+    "postcss": "^8.4.14",
     "prettier": "^2.4.1",
     "sort-package-json": "^1.52.0",
-    "tailwindcss": "^2.2.17",
+    "tailwindcss": "^3.1.2",
     "tinyify": "^3.0.0",
     "typescript": "4.4.4"
   }

styles/globals.css

@@ -55,11 +55,11 @@ html {
 
 .pane.pane-light::-webkit-scrollbar-thumb,
 .select__menu-list::-webkit-scrollbar-thumb {
-  @apply bg-opacity-50 bg-gray-200 hover:bg-gray-300 dark:bg-black-500 dark:hover:bg-black-400 hover:bg-opacity-75;
+  @apply bg-gray-200/50 hover:bg-gray-300/75 dark:bg-black-500/50 dark:hover:bg-black-400/75;
 }
 
 .pane.pane-dark::-webkit-scrollbar-thumb {
-  @apply bg-opacity-50 bg-gray-700 hover:bg-gray-600 dark:bg-black-600 dark:hover:bg-black-500 hover:bg-opacity-75;
+  @apply bg-gray-700/50 hover:bg-gray-600/75 dark:bg-black-600/50 dark:hover:bg-black-500/75;
 }
 
 .pane::-webkit-scrollbar-track,

tailwind.config.js

@@ -1,12 +1,9 @@
 module.exports = {
   darkMode: 'class', // or 'media' or 'class'
-  purge: {
-    enabled: true,
-    content: [
-      './pages/**/*.{js,ts,jsx,tsx}',
-      './components/**/*.{js,ts,jsx,tsx}',
-    ],
-  },
+  content: [
+    './pages/**/*.{js,ts,jsx,tsx}',
+    './components/**/*.{js,ts,jsx,tsx}',
+  ],
   theme: {
     fontFamily: {
       serif: ['Inter', 'sans-serif'],
@@ -31,11 +28,5 @@ module.exports = {
       },
     },
   },
-  variants: {
-    extend: {
-      backgroundColor: ['dark'],
-      textColor: ['dark'],
-    },
-  },
   plugins: [],
 }