fix: tailwind config on docs (#1345)

apps/docs/docusaurus.config.js

@@ -218,7 +218,17 @@ module.exports = {
     ],
   ],
   plugins: [
-    'docusaurus-tailwindcss-loader',
+    async function myPlugin(context, options) {
+      return {
+        name: "docusaurus-tailwindcss",
+        configurePostCss(postcssOptions) {
+          // Appends TailwindCSS and AutoPrefixer.
+          postcssOptions.plugins.push(require("tailwindcss"));
+          postcssOptions.plugins.push(require("autoprefixer"));
+          return postcssOptions;
+        },
+      };
+    },
     require.resolve('docusaurus-plugin-image-zoom'),
     [
       'docusaurus-plugin-react-docgen-typescript',

apps/docs/package.json

@@ -23,13 +23,13 @@
     "@mdx-js/react": "^1.6.21",
     "@svgr/webpack": "^5.5.0",
     "@vtex/theme-b2c-tailwind": "^1.8.42",
+    "autoprefixer": "^10.4.7",
     "babel-loader": "^8.2.2",
     "clsx": "^1.1.1",
     "docusaurus-plugin-image-zoom": "^0.0.2",
     "docusaurus-plugin-react-docgen-typescript": "^0.1.0",
-    "docusaurus-tailwindcss-loader": "file:plugins/docusaurus-tailwindcss-loader",
     "file-loader": "^6.2.0",
-    "postcss": "^8.4.8",
+    "postcss": "^8.4.14",
     "postcss-import": "^14.0.2",
     "postcss-preset-env": "^7.4.2",
     "prism-react-renderer": "^1.2.1",
@@ -41,7 +41,7 @@
     "react-icons": "^4.2.0",
     "react-spring": "^9.2.4",
     "redocusaurus": "^0.9.0",
-    "tailwindcss": "^3.0.23",
+    "tailwindcss": "^3.0.24",
     "tinytime": "^0.2.6",
     "url-loader": "^4.1.1"
   },

apps/docs/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: [
+    require("tailwindcss"),
+    require("autoprefixer")
+  ],
+};

apps/docs/tailwind.config.js

@@ -3,30 +3,30 @@ function infima(variable) {
 }
 
 module.exports = {
-content: ['./src/**/*.html', './src/**/*.js', './src/**/*.tsx'],
-theme: {
-  extend: {
-    fontFamily: {
-      VTEXTrust: ['VTEX Trust', 'sans-serif'],
-      VTEXRegular: ['VTEX Trust Regular', 'sans-serif'],
-      VTEXMedium: ['VTEX Trust Medium', 'sans-serif']
+  content: ['./src/**/*.html', './src/**/*.js', './src/**/*.tsx'],
+  theme: {
+    extend: {
+      fontFamily: {
+        VTEXTrust: ['VTEX Trust', 'sans-serif'],
+        VTEXRegular: ['VTEX Trust Regular', 'sans-serif'],
+        VTEXMedium: ['VTEX Trust Medium', 'sans-serif']
+      },
+      colors: {
+        background: infima('--ifm-background-color'),
+        code: infima('--ifm-code-background'),
+        tag: infima('--ifm-tag-background'),
+        tagHighlight: infima('--ifm-tag-highlight'),
+        rebelPink: infima('--ifm-color-rebel-pink'),
+        seriousBlack: infima('--ifm-color-serious-black'),
+        secondary: infima('--ifm-color-secondary'),
+        fontSecondary: infima('--ifm-font-color-secondary'),
+        primary: infima('--ifm-color-primary'),
+        softPink: infima('--ifm-color-soft-pink'),
+        text: infima('--ifm-font-color-base'),
+        details: infima('--ifm-color-details'),
+        border: infima('--ifm-hr-border-color')
+      }
     },
-    colors: {
-      background: infima('--ifm-background-color'),
-      code: infima('--ifm-code-background'),    
-      tag: infima('--ifm-tag-background'),    
-      tagHighlight: infima('--ifm-tag-highlight'),    
-      rebelPink: infima('--ifm-color-rebel-pink'),
-      seriousBlack: infima('--ifm-color-serious-black'),
-      secondary: infima('--ifm-color-secondary'),     
-      fontSecondary: infima('--ifm-font-color-secondary'),     
-      primary: infima('--ifm-color-primary'),
-      softPink: infima('--ifm-color-soft-pink'),     
-      text: infima('--ifm-font-color-base'),     
-      details: infima('--ifm-color-details'),     
-      border: infima('--ifm-hr-border-color')
-    }
   },
-},
-plugins: [],
-}
+  plugins: [],
+}