ianhitchman/tiptap
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

add a tailwind demo

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

11
docs/src/docPages/guide/custom-styling.md → docs/src/docPages/guide/styling.md
View File

@@ -72,6 +72,17 @@ new Editor({
}) })
``` ```
### With Tailwind CSS
The editor works fine with Tailwind CSS, too. Find an example that’s 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 ## Option 3: Customize the HTML
You can even customize the markup for every extension. This will make a custom bold extension that doesn’t render a `<strong>` tag, but a `<b>` tag: You can even customize the markup for every extension. This will make a custom bold extension that doesn’t render a `<strong>` tag, but a `<b>` tag:

2
docs/src/links.yaml
View File

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