Upgrade to tailwind 2

app/web/package.json

@@ -44,11 +44,12 @@
     "three": "^0.118.3"
   },
   "devDependencies": {
-    "autoprefixer": "9.8.6",
+    "postcss": "^8.2.13",
+    "autoprefixer": "^10.2.5",
     "html-webpack-plugin": "^4.5.0",
     "opentype.js": "^1.3.3",
     "postcss-loader": "4.0.2",
-    "tailwindcss": "^1.9.1",
+    "tailwindcss": "^2.1.2",
     "worker-loader": "^3.0.7"
   }
 }

app/web/src/components/EmojiReaction/EmojiReaction.js

@@ -77,7 +77,7 @@ const EmojiReaction = ({
           </div>
         </div>
 
-        <div className="whitespace-no-wrap absolute right-0 inset-y-0 flex items-center flex-row-reverse">
+        <div className="whitespace-nowrap absolute right-0 inset-y-0 flex items-center flex-row-reverse">
           {(emotes.length ? emotes : noEmotes).map((emote, i) => (
             <span
               className={getActiveClasses(

app/web/src/index.css

@@ -10,7 +10,7 @@
 @import "tailwindcss/utilities";
 
 @import url('https://fonts.googleapis.com/css2?family=Ropa+Sans&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,500;1,700&display=swap')
+@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,500;1,700&display=swap');
 /**
  * END --- TAILWIND GENERATOR EDIT
  */

app/web/tailwind.config.js

@@ -1,11 +1,6 @@
 module.exports = {
-  future: {
-    removeDeprecatedGapUtilities: true,
-    purgeLayersByDefault: true,
-    defaultLineHeights: true,
-    standardFontWeights: true,
-  },
-  purge: [],
+  purge: ['./src/**/*.html', './src/**/*.js', './src/**/*.ts', './src/**/*.tsx'],
+  darkMode: false, // or 'media' or 'class'
   theme: {
     extend: {
       backgroundImage: () => ({