Configuration for Tailwind Integration

.gitignore

@@ -18,6 +18,8 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.yarn
+.yarnrc.yml
 
 # argos
 /screenshots

docusaurus.config.js

@@ -1,5 +1,6 @@
 // @ts-check
 // Note: type annotations allow type checking and IDEs autocompletion
+import tailwindPlugin from "./plugins/tailwind-config.cjs";
 
 const { themes } = require('prism-react-renderer');
 const lightTheme = themes.github;
@@ -109,6 +110,7 @@ const config = {
         sidebarPath: './sidebarEnhancements.js',
       },
     ],
+    tailwindPlugin,
   ],
 
   themeConfig:

package.json

@@ -31,7 +31,10 @@
     "@docusaurus/module-type-aliases": "^3.1.0",
     "@docusaurus/types": "^3.1.0",
     "@playwright/test": "^1.39.0",
-    "cheerio": "^1.0.0-rc.12"
+    "autoprefixer": "^10.4.17",
+    "cheerio": "^1.0.0-rc.12",
+    "postcss": "^8.4.33",
+    "tailwindcss": "^3.4.1"
   },
   "browserslist": {
     "production": [

plugins/tailwind-config.cjs

@@ -0,0 +1,15 @@
+function tailwindPlugin(context, options) {
+    return {
+        name: 'tailwind-plugin',
+        configurePostCss(postcssOptions) {
+            postcssOptions.plugins = [
+                require('postcss-import'),
+                require('tailwindcss'),
+                require('autoprefixer'),
+            ];
+            return postcssOptions;
+        },
+    };
+}
+
+module.exports = tailwindPlugin;

src/css/custom.css

@@ -4,6 +4,10 @@
  * work well for content-centric websites.
  */
 
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 /* You can override the default Infima variables here. */
 @font-face {
   font-family: 'Nunito';

tailwind.config.js

@@ -0,0 +1,18 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./src/**/*.{jsx,tsx,html}"],
+  theme: {
+    extend: {
+      fontFamily: {
+        nunito: ['Nunito', 'sans'],
+        openSans: ['OpenSans', 'sans'],
+      },
+      screens: {
+        'max-sm': {'max': '489px'},
+        'max-md': {'max': '649px'},
+      },
+    },
+  },
+  plugins: [],
+}
+