Create postcss tailwindcss loader plugin for docusaurus

docusaurus.config.js

@@ -9,6 +9,7 @@ module.exports = {
   favicon: 'img/favicon.ico',
   organizationName: 'Discord4J',
   projectName: 'Discord4J',
+  plugins: ['docusaurus-tailwindcss-loader'],
   themeConfig: {
     navbar: {
       title: 'Discord4J',

package.json

@@ -16,8 +16,12 @@
     "@docusaurus/preset-classic": "2.0.0-alpha.69",
     "@mdx-js/react": "^1.6.21",
     "clsx": "^1.1.1",
+    "docusaurus-tailwindcss-loader": "file:plugins/docusaurus-tailwindcss-loader",
+    "postcss": "^7.0.34",
+    "postcss-import": "^12.0.0",
     "react": "^17.0.1",
-    "react-dom": "^17.0.1"
+    "react-dom": "^17.0.1",
+    "tailwindcss": "npm:@tailwindcss/postcss7-compat"
   },
   "browserslist": {
     "production": [

plugins/docusaurus-tailwindcss-loader/index.js

@@ -0,0 +1,34 @@
+module.exports = function (context, options) {
+  return {
+    name: 'postcss-tailwindcss-loader',
+    configureWebpack(config, isServer, utils) {
+      return {
+        module: {
+          rules: [
+            {
+              test: /\.css$/,
+              use: [
+                {
+                  loader: require.resolve('postcss-loader'),
+                  options: {
+                    ident: 'postcss',
+                    plugins: () => [
+                      require('postcss-import'),
+                      require('tailwindcss'),
+                      require('postcss-preset-env')({
+                        autoprefixer: {
+                          flexbox: 'no-2009',
+                        },
+                        stage: 4,
+                      }),
+                    ],
+                  },
+                },
+              ],
+            },
+          ],
+        },
+      }
+    },
+  }
+}

src/css/custom.css

@@ -5,6 +5,10 @@
  * work well for content-centric websites.
  */
 
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 /* You can override the default Infima variables here. */
 :root {
   --ifm-color-primary: #25c2a0;

tailwind.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  purge: ['./src/**/*.html', './src/**/*.js', './src/**/*.tsx'],
+  darkMode: false, // or 'media' or 'class'
+  theme: {
+    extend: {},
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [],
+}