[setup catalog][m]: upgrade TailwindCSS, install dependencies for TailwindUI and fix configs.

examples/catalog/package.json

@@ -25,6 +25,8 @@
     "@apollo/client": "^3.0.2",
     "@apollo/react-hooks": "^3.1.5",
     "@fullhuman/postcss-purgecss": "^2.3.0",
+    "@headlessui/react": "^1.4.0",
+    "@heroicons/react": "^1.0.3",
     "apollo-cache-inmemory": "^1.6.6",
     "apollo-client": "^2.6.10",
     "apollo-link": "^1.2.14",
@@ -38,7 +40,7 @@
     "graphql-tag": "^2.10.3",
     "html-react-parser": "^0.13.0",
     "markdown-it": "^11.0.0",
-    "next": "^10.0.3",
+    "next": "^10.2.3",
     "next-translate": "^0.20.2",
     "portal": "https://github.com/datopian/portal.js",
     "qs": "^6.9.4",
@@ -48,13 +50,15 @@
     "slugify": "^1.4.0"
   },
   "devDependencies": {
+    "@tailwindcss/forms": "^0.3.3",
+    "@tailwindcss/typography": "^0.4.1",
     "@testing-library/jest-dom": "^5.8.0",
     "@testing-library/react": "^10.0.4",
     "@types/jest": "^25.2.3",
     "@types/react": "^16.9.35",
     "@typescript-eslint/eslint-plugin": "^3.8.0",
     "@typescript-eslint/parser": "^3.8.0",
-    "autoprefixer": "^9.8.6",
+    "autoprefixer": "^10.3.1",
     "babel-jest": "^26.0.1",
     "babel-plugin-graphql-tag": "^2.5.0",
     "cypress": "^6.6.0",
@@ -70,12 +74,13 @@
     "lint-staged": ">=10",
     "nock": "^12.0.3",
     "npm-run-all": "^4.1.5",
+    "postcss": "^8.3.6",
     "postcss-cli": "^7.1.1",
     "postcss-import": "^12.0.1",
     "postcss-preset-env": "6.7.0",
     "prettier": "^2.0.5",
     "react-test-renderer": "^16.13.1",
-    "tailwindcss": "^1.4.6",
+    "tailwindcss": "^2.2.7",
     "typescript": "^3.9.3"
   },
   "husky": {

examples/catalog/pages/_app.tsx

@@ -5,7 +5,7 @@ import { DEFAULT_THEME } from '../themes';
 import { applyTheme } from '../themes/utils';
 import I18nProvider from 'next-translate/I18nProvider';
 import { useRouter } from 'next/router';
-import '../styles/app.css';
+import '../styles/globals.css';
 
 interface I8nObject {
   [property: string]: any;

examples/catalog/styles/app.css

@@ -1 +0,0 @@
-@import './tailwind.css';

examples/catalog/styles/globals.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

examples/catalog/styles/tailwind.css

@@ -1,3 +0,0 @@
-@import 'tailwindcss/base';
-@import 'tailwindcss/components';
-@import 'tailwindcss/utilities';

examples/catalog/tailwind.config.js

@@ -1,44 +1,31 @@
+const defaultTheme = require('tailwindcss/defaultTheme');
+
 module.exports = {
-  // 2021-06-24 trying out fix for tailwind production that worked for main site
+  mode: 'jit',
-  // see https://github.com/datopian/portal.js/issues/571
   // purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
   purge: [
-    "./pages/**/*.js",
+    './pages/**/*.js',
-    "./pages/**/*.ts",
+    './pages/**/*.ts',
-    "./pages/**/*.jsx",
+    './pages/**/*.jsx',
-    "./pages/**/*.tsx",
+    './pages/**/*.tsx',
-    "./components/**/*.js",
+    './components/**/*.js',
-    "./components/**/*.ts",
+    './components/**/*.ts',
-    "./components/**/*.jsx",
+    './components/**/*.jsx',
-    "./components/**/*.tsx"
+    './components/**/*.tsx',
   ],
-  mode: 'jit',
+  darkMode: false, // or 'media' or 'class'
   theme: {
-    fontSize: {
+    container: {
-      tiny: 'var(--font-size-small)',
+      center: true,
-      md: 'var(--font-size-medium)',
-      lg: 'var(--font-size-large)',
     },
     extend: {
-      colors: {
+      fontFamily: {
-        primary: 'var(--color-primary)',
+        mono: ['Inconsolata', ...defaultTheme.fontFamily.mono],
-        secondary: 'var(--color-secondary)',
-        negative: 'var(--color-negative)',
-        positive: 'var(--color-positive)',
-        'primary-background': 'var(--background-primary)',
-        'sec-background': 'var(--background-sec)',
-        'primary-text': 'var(--color-text-primary)',
       },
     },
-    backgroundColor: (theme) => ({
-      ...theme('colors'),
-    }),
   },
   variants: {
-    backgroundColor: ['active'],
+    extend: {},
-  },
-  plugins: ['font-size'],
-  corePlugins: {
-    fontSize: true,
   },
+  plugins: [require('@tailwindcss/typography'), require('@tailwindcss/forms')],
 };