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: {
+  purge: ['./src/**/*.html', './src/**/*.js', './src/**/*.ts', './src/**/*.tsx'],
-    removeDeprecatedGapUtilities: true,
+  darkMode: false, // or 'media' or 'class'
-    purgeLayersByDefault: true,
-    defaultLineHeights: true,
-    standardFontWeights: true,
-  },
-  purge: [],
   theme: {
     extend: {
       backgroundImage: () => ({

docs/package.json

@@ -15,11 +15,13 @@
   },
   "dependencies": {
     "@docusaurus/core": "2.0.0-alpha.72",
-    "@docusaurus/plugin-ideal-image": "^2.0.0-alpha.72",
+    "@docusaurus/plugin-ideal-image": "2.0.0-alpha.72",
     "@docusaurus/preset-classic": "2.0.0-alpha.72",
     "@mdx-js/react": "^1.6.21",
+    "autoprefixer": "^10.2.5",
     "clsx": "^1.1.1",
     "docusaurus-tailwindcss-loader": "file:plugins/docusaurus-tailwindcss-loader",
+    "postcss": "^8.2.13",
     "react": "^17.0.1",
     "react-dom": "^17.0.1"
   },
@@ -40,7 +42,6 @@
     ]
   },
   "devDependencies": {
-    "@tailwindcss/postcss7-compat": "npm:@tailwindcss/postcss7-compat",
     "postcss-import": "^14.0.1",
     "tailwindcss": "^2.1.2"
   }

docs/tailwind.config.js

@@ -1,2 +1,2 @@
-const webConfig = require('../web/tailwind.config.js')
+const webConfig = require('../app/web/tailwind.config.js')
 module.exports = webConfig