add a tailwind demo

This commit is contained in:
Hans Pagel
2020-12-03 15:58:04 +01:00
parent e92769f5fb
commit f19a303908
2 changed files with 12 additions and 1 deletions

View File

@@ -72,6 +72,17 @@ new Editor({
})
```
### With Tailwind CSS
The editor works fine with Tailwind CSS, too. Find an example thats styled with the `@tailwindcss/typography` plugin.
<iframe
src="https://codesandbox.io/embed/tiptap-demo-tailwind-iqjz0?fontsize=14&hidenavigation=1&module=%2Fsrc%2Findex.js&theme=dark&view=preview"
style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
title="tiptap-demo-tailwind"
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>
## Option 3: Customize the HTML
You can even customize the markup for every extension. This will make a custom bold extension that doesnt render a `<strong>` tag, but a `<b>` tag:

View File

@@ -46,7 +46,7 @@
link: /guide/create-a-toolbar
draft: true
- title: Custom styling
link: /guide/custom-styling
link: /guide/styling
- title: Store content
link: /guide/store-content
- title: Build extensions