Upgrade Tailwind to version 3 with JIT mode (#540)

nuxt.config.js

@@ -146,6 +146,7 @@ export default {
     { src: '~/plugins/migration-notice.js' },
   ],
   css: [
+    '~/styles/tailwind.css',
     '~/assets/fonts.css',
     '~/styles/vocabulary.scss',
     '~/styles/global.scss',
@@ -156,7 +157,7 @@ export default {
   dev: process.env.NODE_ENV !== 'production',
   buildModules: [
     '@nuxtjs/composition-api/module',
-    '@nuxtjs/tailwindcss',
+    '@nuxt/postcss8',
     '@nuxtjs/style-resources',
     '@nuxtjs/svg',
     '@nuxtjs/eslint-module',
@@ -222,9 +223,13 @@ export default {
     environment: process.env.NODE_ENV,
     lazy: true,
   },
-  tailwindcss: {
-    // https://github.com/nuxt-community/tailwindcss-module/issues/114#issuecomment-698885369
-    configPath: '~~/tailwind.config.js',
+  build: {
+    postcss: {
+      plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+      },
+    },
   },
   storybook: {
     port: 6006, // standard port for Storybook

package.json

@@ -38,7 +38,9 @@
     "i18n:create-locales-list": "node src/locales/scripts/create-wp-locale-list"
   },
   "dependencies": {
+    "@babel/eslint-parser": "^7.16.5",
     "@nuxt/components": "^2.1.6",
+    "@nuxt/postcss8": "^1.1.3",
     "@nuxtjs/composition-api": "^0.27.0",
     "@nuxtjs/i18n": "^7.0.3",
     "@nuxtjs/redirect-module": "^0.3.1",
@@ -48,7 +50,6 @@
     "axios": "^0.21.2",
     "axios-mock-adapter": "^1.20.0",
     "babel-core": "^7.0.0-bridge.0",
-    "@babel/eslint-parser": "^7.16.5",
     "build-url": "^6.0.1",
     "case": "^1.6.3",
     "clipboard": "^2.0.8",
@@ -77,14 +78,13 @@
     "@nuxtjs/eslint-module": "^3.0.2",
     "@nuxtjs/storybook": "^4.1.1",
     "@nuxtjs/style-resources": "^1.0.0",
-    "@nuxtjs/tailwindcss": "^4.2.1",
     "@playwright/test": "^1.16.2",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/user-event": "^13.2.1",
     "@testing-library/vue": "^5.8.2",
     "@types/jest": "^26.0.22",
     "@vue/test-utils": "^1.1.3",
-    "autoprefixer": "^10.3.1",
+    "autoprefixer": "^10.4.0",
     "babel-jest": "^26.6.3",
     "cross-env": "^7.0.3",
     "eslint": "^7.32.0",
@@ -98,13 +98,13 @@
     "jest": "^26.6.3",
     "jest-transform-stub": "^2.0.0",
     "lint-staged": "^11.1.1",
-    "postcss": "^8.3.6",
+    "postcss": "^8.4.5",
     "prettier": "^2.2.1",
     "sass": "^1.34.0",
     "sass-loader": "^10.1.1",
     "start-server-and-test": "^1.14.0",
-    "tailwindcss": "^2.2.7",
-    "tailwindcss-rtl": "^0.7.3",
+    "tailwindcss": "^3.0.7",
+    "tailwindcss-rtl": "^0.8.0",
     "ts-node": "^10.4.0",
     "typescript": "^4.5.2",
     "vue-i18n-extract": "^2.0.0",