Enable JIT for Tailwind + Emotion CSS example (vercel#23912)

Author: styxlab

examples/with-tailwindcss-emotion/package.json

@@ -7,19 +7,20 @@
     "start": "next start"
   },
   "dependencies": {
-    "@emotion/react": "^11.1.1",
-    "@emotion/styled": "11.0.0",
-    "react": "17.0.1",
-    "react-dom": "17.0.1"
+    "@emotion/react": "^11.1.5",
+    "@emotion/styled": "11.3.0",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "tailwindcss-filters": "3.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.9",
-    "@emotion/babel-plugin": "11.0.0",
-    "autoprefixer": "10.0.2",
+    "@babel/core": "^7.13.15",
+    "@emotion/babel-plugin": "11.3.0",
+    "autoprefixer": "10.2.5",
     "next": "latest",
-    "postcss": "8.1.10",
+    "postcss": "8.2.10",
     "tailwindcss": "^2.1.1",
-    "xwind": "0.7.2"
+    "xwind": "0.8.0"
   },
   "license": "MIT"
 }

examples/with-tailwindcss-emotion/postcss.config.js

@@ -0,0 +1,8 @@
+// If you want to use other PostCSS plugins, see the following:
+// https://tailwindcss.com/docs/using-with-preprocessors
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

examples/with-tailwindcss-emotion/tailwind.config.js

@@ -2,14 +2,15 @@ const colors = require('tailwindcss/colors')
 
 module.exports = {
   mode: 'jit',
+  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
   darkMode: 'class',
   theme: {
     extend: {
       colors,
     },
   },
   variants: {},
-  plugins: [],
+  plugins: [require('tailwindcss-filters')],
   // xwind options
   xwind: {
     mode: 'objectstyles',