feat(markdown): usage without tailwindcss (#496)

.changeset/lazy-peaches-allow.md

@@ -0,0 +1,5 @@
+---
+"@assistant-ui/react-markdown": patch
+---
+
+feat(markdown): usage without tailwindcss

packages/react-markdown/package.json

@@ -60,9 +60,14 @@
     }
   },
   "devDependencies": {
+    "@assistant-ui/tailwindcss-transformer": "workspace:^",
     "@assistant-ui/tsconfig": "workspace:*",
+    "@types/node": "^20.14.10",
+    "autoprefixer": "^10.4.19",
     "eslint-config-next": "14.2.5",
+    "postcss": "^8.4.39",
     "tailwindcss": "^3.4.4",
+    "tailwindcss-animate": "^1.0.7",
     "tsup": "^8.1.0",
     "tsx": "^4.16.2"
   },

packages/react-markdown/postcss.config.mjs

@@ -0,0 +1,10 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+    "@assistant-ui/tailwindcss-transformer": {},
+  },
+};
+
+export default config;

packages/react-markdown/tailwind.config.ts

@@ -0,0 +1,58 @@
+import type { Config } from "tailwindcss";
+import animatePlugin from "tailwindcss-animate";
+
+const config = {
+  content: ["./src/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}"],
+  corePlugins: {
+    backgroundOpacity: false,
+    touchAction: false,
+    scrollSnapType: false,
+    gradientColorStops: false,
+    fontVariantNumeric: false,
+    ringOffsetWidth: false,
+    ringOffsetColor: false,
+    ringOpacity: false,
+    boxShadowColor: false,
+    blur: false,
+    brightness: false,
+    contrast: false,
+    grayscale: false,
+    hueRotate: false,
+    invert: false,
+    saturate: false,
+    sepia: false,
+    dropShadow: false,
+    backdropBlur: false,
+    backdropBrightness: false,
+    backdropContrast: false,
+    backdropGrayscale: false,
+    backdropHueRotate: false,
+    backdropInvert: false,
+    backdropOpacity: false,
+    backdropSaturate: false,
+    backdropSepia: false,
+    container: false,
+  },
+  theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
+    extend: {
+      borderRadius: {
+        lg: "var(--aui-radius)",
+        md: "calc(var(--aui-radius) - 2px)",
+        sm: "calc(var(--aui-radius) - 4px)",
+      },
+    },
+  },
+  plugins: [
+    animatePlugin,
+    require("@assistant-ui/react/tailwindcss")({ components: [] }),
+  ],
+} satisfies Config;
+
+export default config;