diff --git a/.changeset/lazy-peaches-allow.md b/.changeset/lazy-peaches-allow.md new file mode 100644 index 000000000..140603222 --- /dev/null +++ b/.changeset/lazy-peaches-allow.md @@ -0,0 +1,5 @@ +--- +"@assistant-ui/react-markdown": patch +--- + +feat(markdown): usage without tailwindcss diff --git a/packages/react-markdown/package.json b/packages/react-markdown/package.json index 280bdf53a..47b99a942 100644 --- a/packages/react-markdown/package.json +++ b/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" }, diff --git a/packages/react-markdown/postcss.config.mjs b/packages/react-markdown/postcss.config.mjs new file mode 100644 index 000000000..3e6a865dd --- /dev/null +++ b/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; diff --git a/packages/react-markdown/tailwind.config.ts b/packages/react-markdown/tailwind.config.ts new file mode 100644 index 000000000..f3a045f9c --- /dev/null +++ b/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; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b50c32eb3..61eb8194b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -799,15 +799,30 @@ importers: specifier: ^9.0.1 version: 9.0.1(@types/react@18.3.3)(react@18.3.1) devDependencies: + '@assistant-ui/tailwindcss-transformer': + specifier: workspace:^ + version: link:../tailwindcss-transformer '@assistant-ui/tsconfig': specifier: workspace:* version: link:../tsconfig + '@types/node': + specifier: ^20.14.10 + version: 20.14.10 + autoprefixer: + specifier: ^10.4.19 + version: 10.4.19(postcss@8.4.39) eslint-config-next: specifier: 14.2.5 version: 14.2.5(eslint@8.57.0)(typescript@5.5.3) + postcss: + specifier: ^8.4.39 + version: 8.4.39 tailwindcss: specifier: ^3.4.4 version: 3.4.4 + tailwindcss-animate: + specifier: ^1.0.7 + version: 1.0.7(tailwindcss@3.4.4) tsup: specifier: ^8.1.0 version: 8.1.0(postcss@8.4.39)(typescript@5.5.3) @@ -8304,7 +8319,7 @@ snapshots: eslint: 8.57.0 eslint-import-resolver-node: 0.3.9 eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0) - eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0) + eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0) eslint-plugin-jsx-a11y: 6.9.0(eslint@8.57.0) eslint-plugin-react: 7.34.3(eslint@8.57.0) eslint-plugin-react-hooks: 4.6.2(eslint@8.57.0) @@ -8328,7 +8343,7 @@ snapshots: enhanced-resolve: 5.17.0 eslint: 8.57.0 eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0) - eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0) + eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0) fast-glob: 3.3.2 get-tsconfig: 4.7.5 is-core-module: 2.14.0 @@ -8350,7 +8365,7 @@ snapshots: transitivePeerDependencies: - supports-color - eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0): + eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0): dependencies: array-includes: 3.1.8 array.prototype.findlastindex: 1.2.5