How to embed an excel data table in a next.js static site with tailwind css
- Step 1Maintain your reference data in Excel — Update pricing, features, or team data in .xlsx. Export when ready for the next build.
- Step 2Generate the Tailwind HTML table — Upload and choose your style. Copy the HTML snippet.
- Step 3Paste into your Next.js page or MDX file — Add the HTML to your .tsx or .mdx page. Tailwind renders it on the next build.
Frequently asked questions
Should I use dangerouslySetInnerHTML to embed the HTML in React?+
For static page content that doesn't include user input, dangerouslySetInnerHTML is acceptable. Alternatively, convert the HTML to JSX using a tool like htmltojsx.com.
Can I use this with Next.js MDX pages?+
MDX supports embedded HTML. Paste the table HTML directly into your .mdx file — it renders as HTML in the Markdown context.
Does the table HTML work with Tailwind's purge/content config?+
Yes. Add the file path containing the table to your Tailwind content array so the class names are not purged from the production CSS build.
Privacy first
Every JAD Excel tool runs entirely in your browser using SheetJS and ExcelJS. Your spreadsheets, formulas, and data never leave your device — verified by zero outbound network requests during processing.