Fixes support for tailwindcss

.npmignore

@@ -3,3 +3,8 @@ node_modules
 tsconfig.json
 docs
 src/ui
+docgen
+tests
+build
+tailwind.config.ts
+tsup.config.ts

docs/components/tailwind.mdx

@@ -22,7 +22,7 @@ Support
 
 #### Preview
 
-<Frame type="glass"><img src="../images/previews/tailwind-39f5e262/document.1.jpg" style={{ maxHeight: '400px', borderRadius: "0.25rem", overflow: "hidden" }} /></Frame>
+<Frame type="glass"><img src="../images/previews/tailwind-d34cd362/document.1.jpg" style={{ maxHeight: '400px', borderRadius: "0.25rem", overflow: "hidden" }} /></Frame>
 
 <div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeGroup>
 ```jsx template.tsx
@@ -57,7 +57,7 @@ body {
 
 You can also pass a custom Tailwind config to the Tailwind component.
 
-<Frame type="glass"><img src="../images/previews/tailwind-75273488/document.1.jpg" style={{ maxHeight: '400px', borderRadius: "0.25rem", overflow: "hidden" }} /></Frame>
+<Frame type="glass"><img src="../images/previews/tailwind-841def4d/document.1.jpg" style={{ maxHeight: '400px', borderRadius: "0.25rem", overflow: "hidden" }} /></Frame>
 
 <div style={{paddingTop: "1rem", paddingBottom: "1rem"}}><CodeGroup>
 ```jsx template.tsx

docs/ui/templates.mdx

@@ -8,12 +8,12 @@ icon: list
 <CardGroup>
  <Card title="Scientific" href="../../../ui/templates/scientific-report">
  <div style={{ marginTop: "1rem", borderRadius: "0.25rem", overflow: "hidden" }}>
- <img src="../images/previews/ui-templates-scientific-report-556d96d9/document.1.jpg"/>
+ <img src="../images/previews/ui-templates-scientific-report-01382231/document.1.jpg"/>
  </div>
  </Card>
  <Card title="With charts" href="../../../ui/templates/report-charts">
  <div style={{ marginTop: "1rem", borderRadius: "0.25rem", overflow: "hidden" }}>
- <img src="../images/previews/ui-templates-report-charts-56eaa9e7/document.1.jpg"/>
+ <img src="../images/previews/ui-templates-report-charts-568a756b/document.1.jpg"/>
  </div>
  </Card>
 </CardGroup>
@@ -23,7 +23,7 @@ icon: list
 <CardGroup>
  <Card title="Receipt" href="../../../ui/templates/receipt">
  <div style={{ marginTop: "1rem", borderRadius: "0.25rem", overflow: "hidden" }}>
- <img src="../images/previews/ui-templates-receipt-d84c20b5/document.1.jpg"/>
+ <img src="../images/previews/ui-templates-receipt-3f97df85/document.1.jpg"/>
  </div>
  </Card>
 </CardGroup>
@@ -33,7 +33,7 @@ icon: list
 <CardGroup>
  <Card title="NDA Markdown" href="../../../ui/templates/nda-markdown">
  <div style={{ marginTop: "1rem", borderRadius: "0.25rem", overflow: "hidden" }}>
- <img src="../images/previews/ui-templates-nda-markdown-68b17497/document.1.jpg"/>
+ <img src="../images/previews/ui-templates-nda-markdown-555147ca/document.1.jpg"/>
  </div>
  </Card>
 </CardGroup>
@@ -43,12 +43,12 @@ icon: list
 <CardGroup>
  <Card title="Basic" href="../../../ui/templates/invoice">
  <div style={{ marginTop: "1rem", borderRadius: "0.25rem", overflow: "hidden" }}>
- <img src="../images/previews/ui-templates-invoice-347d83f3/document.1.jpg"/>
+ <img src="../images/previews/ui-templates-invoice-b87296fc/document.1.jpg"/>
  </div>
  </Card>
  <Card title="Advanced with QR" href="../../../ui/templates/invoice-advanced">
  <div style={{ marginTop: "1rem", borderRadius: "0.25rem", overflow: "hidden" }}>
- <img src="../images/previews/ui-templates-invoice-advanced-a7bdef10/document.1.jpg"/>
+ <img src="../images/previews/ui-templates-invoice-advanced-4497fe25/document.1.jpg"/>
  </div>
  </Card>
 </CardGroup>

docs/ui/templates/invoice-advanced.mdx

@@ -4,7 +4,7 @@ icon: file-invoice
 category: Invoices
 ---
 
-<Frame type="glass"><img src="../../images/previews/ui-templates-invoice-advanced-a7bdef10/document.1.jpg" style={{ maxHeight: '600px', borderRadius: "0.25rem", overflow: "hidden" }} /></Frame>
+<Frame type="glass"><img src="../../images/previews/ui-templates-invoice-advanced-4497fe25/document.1.jpg" style={{ maxHeight: '600px', borderRadius: "0.25rem", overflow: "hidden" }} /></Frame>
 
 ```jsx
 import { Footnote, PageBottom, Tailwind, CSS } from "@onedoc/react-print";

docs/ui/templates/invoice.mdx

@@ -4,7 +4,7 @@ icon: file-invoice
 category: Invoices
 ---
 
-<Frame type="glass"><img src="../../images/previews/ui-templates-invoice-347d83f3/document.1.jpg" style={{ maxHeight: '600px', borderRadius: "0.25rem", overflow: "hidden" }} /></Frame>
+<Frame type="glass"><img src="../../images/previews/ui-templates-invoice-b87296fc/document.1.jpg" style={{ maxHeight: '600px', borderRadius: "0.25rem", overflow: "hidden" }} /></Frame>
 
 ```jsx
 import { Footnote, PageBottom, Tailwind } from "@onedoc/react-print";

docs/ui/templates/nda-markdown.mdx

@@ -4,7 +4,7 @@ icon: file-contract
 category: NDA
 ---
 
-<Frame type="glass"><img src="../../images/previews/ui-templates-nda-markdown-68b17497/document.1.jpg" style={{ maxHeight: '600px', borderRadius: "0.25rem", overflow: "hidden" }} /></Frame>
+<Frame type="glass"><img src="../../images/previews/ui-templates-nda-markdown-555147ca/document.1.jpg" style={{ maxHeight: '600px', borderRadius: "0.25rem", overflow: "hidden" }} /></Frame>
 
 ```jsx
 import React from "react";

docs/ui/templates/receipt.mdx

@@ -4,7 +4,7 @@ icon: receipt
 category: Receipts
 ---
 
-<Frame type="glass"><img src="../../images/previews/ui-templates-receipt-d84c20b5/document.1.jpg" style={{ maxHeight: '600px', borderRadius: "0.25rem", overflow: "hidden" }} /></Frame>
+<Frame type="glass"><img src="../../images/previews/ui-templates-receipt-3f97df85/document.1.jpg" style={{ maxHeight: '600px', borderRadius: "0.25rem", overflow: "hidden" }} /></Frame>
 
 ```jsx
 import { Footnote, Tailwind } from "@onedoc/react-print";

docs/ui/templates/report-charts.mdx

@@ -4,7 +4,7 @@ icon: chart-pie
 category: Reports
 ---
 
-<Frame type="glass"><img src="../../images/previews/ui-templates-report-charts-56eaa9e7/document.1.jpg" style={{ maxHeight: '600px', borderRadius: "0.25rem", overflow: "hidden" }} /></Frame>
+<Frame type="glass"><img src="../../images/previews/ui-templates-report-charts-568a756b/document.1.jpg" style={{ maxHeight: '600px', borderRadius: "0.25rem", overflow: "hidden" }} /></Frame>
 
 ```jsx
 import { Footnote, PageBottom, Tailwind, CSS } from "@onedoc/react-print";

docs/ui/templates/scientific-report.mdx

@@ -4,7 +4,7 @@ icon: flask
 category: Reports
 ---
 
-<Frame type="glass"><img src="../../images/previews/ui-templates-scientific-report-556d96d9/document.1.jpg" style={{ maxHeight: '600px', borderRadius: "0.25rem", overflow: "hidden" }} /></Frame>
+<Frame type="glass"><img src="../../images/previews/ui-templates-scientific-report-01382231/document.1.jpg" style={{ maxHeight: '600px', borderRadius: "0.25rem", overflow: "hidden" }} /></Frame>
 
 ```jsx
 import React, { createContext, useEffect, useState } from "react";

package.json

@@ -48,7 +48,6 @@
  "@chakra-ui/react": "^2.8.2",
  "@esbuild-plugins/node-modules-polyfill": "^0.2.2",
  "@heroicons/react": "^2.1.1",
- "@hyrious/esbuild-plugin-commonjs": "^0.2.4",
  "@mdx-js/esbuild": "^3.0.0",
  "@onedoc/client": "^0.1.28",
  "@swc/core": "^1.3.107",
@@ -61,6 +60,7 @@
  "acorn-typescript": "^1.4.13",
  "autoprefixer": "^10.4.17",
  "dotenv": "^16.4.1",
+ "esbuild-plugin-alias": "^0.2.1",
  "front-matter": "^4.0.2",
  "mintlify": "^4.0.122",
  "patch-package": "^8.0.0",

src/tailwind/tailwind.tsx

@@ -49,7 +49,7 @@ export const Tailwind = ({
 
  const { css } = postcss([
  createTailwindcssPlugin({
- ...tailwindConfig,
+ tailwindConfig,
  content: [{ content: markup, extension: "html" }],
  }),
  // postcssCssVariables,

tsup.config.ts

@@ -1,6 +1,5 @@
 import { defineConfig } from "tsup";
 import { RawPlugin } from "./build/raw";
-import { commonjs } from "@hyrious/esbuild-plugin-commonjs";
 
 export default defineConfig({
  entry: ["src/index.ts", "src/mdx.ts", "src/server.ts", "src/client.ts"],
@@ -9,6 +8,6 @@ export default defineConfig({
  clean: false,
  format: ["cjs", "esm"],
  dts: true,
- esbuildPlugins: [RawPlugin(), commonjs()],
+ esbuildPlugins: [RawPlugin()],
  bundle: true,
 });