editcrafter/dist/editcrafter.css

To use **EditCrafter** with Tailwind CSS, you need to set up Tailwind CSS in your project. Here's a step-by-step guide to help you integrate Tailwind CSS and customize your `tailwind.config.js` file for use with **EditCrafter**.

.edit-crafter .ProseMirror code.inline{border-radius:.25rem;border-width:1px;border-color:var(--mt-code-color);background-color:var(--mt-code-background);padding:.125rem .25rem;font-size:.875rem;line-height:1.25rem}.edit-crafter .ProseMirror pre{position:relative;overflow:auto;border-radius:.25rem;border-width:1px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:.875rem;line-height:1.25rem;border-color:var(--mt-pre-border);background-color:var(--mt-pre-background);color:var(--mt-pre-color);-webkit-hyphens:none;hyphens:none;white-space:pre;text-align:left}.edit-crafter .ProseMirror code{overflow-wrap:break-word;line-height:1.7em}.edit-crafter .ProseMirror pre code{display:block;overflow-x:auto;padding:.875rem}.edit-crafter .ProseMirror pre .hljs-keyword,.edit-crafter .ProseMirror pre .hljs-operator,.edit-crafter .ProseMirror pre .hljs-function,.edit-crafter .ProseMirror pre .hljs-built_in,.edit-crafter .ProseMirror pre .hljs-builtin-name{color:var(--hljs-keyword)}.edit-crafter .ProseMirror pre .hljs-attr,.edit-crafter .ProseMirror pre .hljs-symbol,.edit-crafter .ProseMirror pre .hljs-property,.edit-crafter .ProseMirror pre .hljs-attribute,.edit-crafter .ProseMirror pre .hljs-variable,.edit-crafter .ProseMirror pre .hljs-template-variable,.edit-crafter .ProseMirror pre .hljs-params{color:var(--hljs-attr)}.edit-crafter .ProseMirror pre .hljs-name,.edit-crafter .ProseMirror pre .hljs-regexp,.edit-crafter .ProseMirror pre .hljs-link,.edit-crafter .ProseMirror pre .hljs-type,.edit-crafter .ProseMirror pre .hljs-addition{color:var(--hljs-name)}.edit-crafter .ProseMirror pre .hljs-string,.edit-crafter .ProseMirror pre .hljs-bullet{color:var(--hljs-string)}.edit-crafter .ProseMirror pre .hljs-title,.edit-crafter .ProseMirror pre .hljs-subst,.edit-crafter .ProseMirror pre .hljs-section{color:var(--hljs-title)}.edit-crafter .ProseMirror pre .hljs-literal,.edit-crafter .ProseMirror pre .hljs-type,.edit-crafter .ProseMirror pre .hljs-deletion{color:var(--hljs-literal)}.edit-crafter .ProseMirror pre .hljs-selector-tag,.edit-crafter .ProseMirror pre .hljs-selector-id,.edit-crafter .ProseMirror pre .hljs-selector-class{color:var(--hljs-selector-tag)}.edit-crafter .ProseMirror pre .hljs-number{color:var(--hljs-number)}.edit-crafter .ProseMirror pre .hljs-comment,.edit-crafter .ProseMirror pre .hljs-meta,.edit-crafter .ProseMirror pre .hljs-quote{color:var(--hljs-comment)}.edit-crafter .ProseMirror pre .hljs-emphasis{font-style:italic}.edit-crafter .ProseMirror pre .hljs-strong{font-weight:700}.edit-crafter .ProseMirror>p.is-editor-empty:before{content:attr(data-placeholder);pointer-events:none;float:left;height:0px;color:var(--mt-secondary)}.edit-crafter .ProseMirror ol{list-style-type:decimal}.edit-crafter .ProseMirror ol ol{list-style:lower-alpha}.edit-crafter .ProseMirror ol ol ol{list-style:lower-roman}.edit-crafter .ProseMirror ul{list-style:disc}.edit-crafter .ProseMirror ul ul{list-style:circle}.edit-crafter .ProseMirror ul ul ul{list-style:square}.edit-crafter .ProseMirror .heading-node{position:relative;font-weight:600}.edit-crafter .ProseMirror .heading-node:first-child{margin-top:0}.edit-crafter .ProseMirror h1{margin-bottom:1rem;margin-top:46px;font-size:1.375rem;line-height:1.75rem;letter-spacing:-.004375rem}.edit-crafter .ProseMirror h2{margin-bottom:.875rem;margin-top:2rem;font-size:1.1875rem;line-height:1.75rem;letter-spacing:.003125rem}.edit-crafter .ProseMirror h3{margin-bottom:.75rem;margin-top:1.5rem;font-size:1.0625rem;line-height:1.5rem;letter-spacing:.00625rem}.edit-crafter .ProseMirror h4{margin-bottom:.5rem;margin-top:1rem;font-size:.9375rem;line-height:1.5rem}.edit-crafter .ProseMirror h5{margin-bottom:.5rem;margin-top:1rem;font-size:.875rem;line-height:1.25rem}.edit-crafter .ProseMirror a.link{cursor:pointer;color:hsl(var(--primary))}.edit-crafter .ProseMirror a.link:hover{text-decoration-line:underline}[data-rmiz-ghost]{position:absolute;pointer-events:none}[data-rmiz-btn-zoom],[data-rmiz-btn-unzoom]{background-color:#000000b3;border-radius:50%;border:none;box-shadow:0 0 1px #ffffff80;color:#fff;height:40px;margin:0;outline-offset:2px;padding:9px;touch-action:manipulation;width:40px;-webkit-appearance:none;-moz-appearance:none;appearance:none}[data-rmiz-btn-zoom]:not(:focus):not(:active){position:absolute;clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;pointer-events:none;white-space:nowrap;width:1px}[data-rmiz-btn-zoom]{position:absolute;inset:10px 10px auto auto;cursor:zoom-in}[data-rmiz-btn-unzoom]{position:absolute;inset:20px 20px auto auto;cursor:zoom-out;z-index:1}[data-rmiz-content=found] img,[data-rmiz-content=found] svg,[data-rmiz-content=found] [role=img],[data-rmiz-content=found] [data-zoom]{cursor:inherit}[data-rmiz-modal]::backdrop{display:none}[data-rmiz-modal][open]{position:fixed;width:100vw;width:100dvw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;overflow:hidden}[data-rmiz-modal-overlay]{position:absolute;top:0;right:0;bottom:0;left:0;transition:background-color .3s}[data-rmiz-modal-overlay=hidden]{background-color:#fff0}[data-rmiz-modal-overlay=visible]{background-color:#fff}[data-rmiz-modal-content]{position:relative;width:100%;height:100%}[data-rmiz-modal-img]{position:absolute;cursor:zoom-out;image-rendering:high-quality;transform-origin:top left;transition:transform .3s}@media (prefers-reduced-motion: reduce){[data-rmiz-modal-overlay],[data-rmiz-modal-img]{transition-duration:.01ms!important}}.edit-crafter .table_wp{position:relative;width:100%;overflow-x:auto;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}@media (min-width: 640px){.edit-crafter .table_wp{border-radius:var(--radius)}}.edit-crafter table{width:100%;text-align:left;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.edit-crafter table:is(.dark *){--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.edit-crafter table:where([dir=rtl],[dir=rtl] *){text-align:right}.edit-crafter table{table-layout:auto}.edit-crafter table td,.edit-crafter table th,.edit-crafter table tr,.edit-crafter table tbody,.edit-crafter table thead,.edit-crafter table tfoot{border-width:1px}.edit-crafter thead{--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1));font-size:.75rem;line-height:1rem;text-transform:uppercase;--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.edit-crafter thead:is(.dark *){--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.edit-crafter th{padding:.75rem 1.5rem}.edit-crafter tr{border-bottom-width:1px}.edit-crafter tr:nth-child(odd){--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.edit-crafter tr:nth-child(2n){--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1))}.edit-crafter tr:is(.dark *){--tw-border-opacity: 1;border-color:rgb(55 65 81 / var(--tw-border-opacity, 1))}.edit-crafter tr:is(.dark *):nth-child(odd){--tw-bg-opacity: 1;background-color:rgb(17 24 39 / var(--tw-bg-opacity, 1))}.edit-crafter tr:is(.dark *):nth-child(2n){--tw-bg-opacity: 1;background-color:rgb(31 41 55 / var(--tw-bg-opacity, 1))}.edit-crafter th,.edit-crafter td{padding:1rem 1.5rem;resize:horizontal}.edit-crafter a{font-weight:500;--tw-text-opacity: 1;color:rgb(37 99 235 / var(--tw-text-opacity, 1))}.edit-crafter a:hover{text-decoration-line:underline}.edit-crafter a:is(.dark *){--tw-text-opacity: 1;color:rgb(59 130 246 / var(--tw-text-opacity, 1))}.edit-crafter th[scope=row]{white-space:nowrap;font-weight:500;--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity, 1))}.edit-crafter th[scope=row]:is(.dark *){--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.edit-crafter tbody tr:nth-child(odd){--tw-bg-opacity: 1;background-color:rgb(239 246 255 / var(--tw-bg-opacity, 1))}.edit-crafter tbody tr:nth-child(odd):is(.dark *){--tw-bg-opacity: 1;background-color:rgb(31 41 55 / var(--tw-bg-opacity, 1))}.edit-crafter tbody tr:nth-child(2n){--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.edit-crafter tbody tr:nth-child(2n):is(.dark *){--tw-bg-opacity: 1;background-color:rgb(17 24 39 / var(--tw-bg-opacity, 1))}:root{--mt-overlay: rgba(251, 251, 251, .75);--mt-transparent-foreground: rgba(0, 0, 0, .4);--mt-bg-secondary: rgba(251, 251, 251, .8);--mt-code-background: #082b781f;--mt-code-color: #d4d4d4;--mt-secondary: #9d9d9f;--mt-pre-background: #ececec;--mt-pre-border: #e0e0e0;--mt-pre-color: #2f2f31;--mt-hr: #dcdcdc;--mt-drag-handle-hover: #5c5c5e;--mt-accent-bold-blue: #05c;--mt-accent-bold-teal: #206a83;--mt-accent-bold-green: #216e4e;--mt-accent-bold-orange: #a54800;--mt-accent-bold-red: #ae2e24;--mt-accent-bold-purple: #5e4db2;--mt-accent-gray: #758195;--mt-accent-blue: #1d7afc;--mt-accent-teal: #2898bd;--mt-accent-green: #22a06b;--mt-accent-orange: #fea362;--mt-accent-red: #c9372c;--mt-accent-purple: #8270db;--mt-accent-blue-subtler: #cce0ff;--mt-accent-teal-subtler: #c6edfb;--mt-accent-green-subtler: #baf3db;--mt-accent-yellow-subtler: #f8e6a0;--mt-accent-red-subtler: #ffd5d2;--mt-accent-purple-subtler: #dfd8fd;--hljs-string: #aa430f;--hljs-title: #b08836;--hljs-comment: #999999;--hljs-keyword: #0c5eb1;--hljs-attr: #3a92bc;--hljs-literal: #c82b0f;--hljs-name: #259792;--hljs-selector-tag: #c8500f;--hljs-number: #3da067}.dark{--mt-overlay: rgba(31, 32, 35, .75);--mt-transparent-foreground: rgba(255, 255, 255, .4);--mt-bg-secondary: rgba(31, 32, 35, .8);--mt-code-background: #ffffff13;--mt-code-color: #2c2e33;--mt-secondary: #595a5c;--mt-pre-background: #080808;--mt-pre-border: #23252a;--mt-pre-color: #e3e4e6;--mt-hr: #26282d;--mt-drag-handle-hover: #969799;--mt-accent-bold-blue: #85b8ff;--mt-accent-bold-teal: #9dd9ee;--mt-accent-bold-green: #7ee2b8;--mt-accent-bold-orange: #fec195;--mt-accent-bold-red: #fd9891;--mt-accent-bold-purple: #b8acf6;--mt-accent-gray: #738496;--mt-accent-blue: #388bff;--mt-accent-teal: #42b2d7;--mt-accent-green: #2abb7f;--mt-accent-orange: #a54800;--mt-accent-red: #e2483d;--mt-accent-purple: #8f7ee7;--mt-accent-blue-subtler: #09326c;--mt-accent-teal-subtler: #164555;--mt-accent-green-subtler: #164b35;--mt-accent-yellow-subtler: #533f04;--mt-accent-red-subtler: #5d1f1a;--mt-accent-purple-subtler: #352c63;--hljs-string: #da936b;--hljs-title: #f1d59d;--hljs-comment: #aaaaaa;--hljs-keyword: #6699cc;--hljs-attr: #90cae8;--hljs-literal: #f2777a;--hljs-name: #5fc0a0;--hljs-selector-tag: #e8c785;--hljs-number: #b6e7b6}.edit-crafter .ProseMirror{display:flex;max-width:100%;cursor:text;flex-direction:column;z-index:0;outline-width:0px}.edit-crafter .ProseMirror>div.editor{display:block;flex:1 1 0%;white-space:pre-wrap}.edit-crafter .ProseMirror .block-node:not(:last-child),.edit-crafter .ProseMirror .list-node:not(:last-child),.edit-crafter .ProseMirror .text-node:not(:last-child){margin-bottom:.625rem}.edit-crafter .ProseMirror ol,.edit-crafter .ProseMirror ul{padding-left:1.5rem}.edit-crafter .ProseMirror blockquote,.edit-crafter .ProseMirror dl,.edit-crafter .ProseMirror ol,.edit-crafter .ProseMirror p,.edit-crafter .ProseMirror pre,.edit-crafter .ProseMirror ul{margin:0}.edit-crafter .ProseMirror li{line-height:1.75rem}.edit-crafter .ProseMirror p{overflow-wrap:break-word}.edit-crafter .ProseMirror li .text-node:has(+.list-node),.edit-crafter .ProseMirror li>.list-node,.edit-crafter .ProseMirror li>.text-node,.edit-crafter .ProseMirror li p{margin-bottom:0}.edit-crafter .ProseMirror blockquote{position:relative;padding-left:.875rem}.edit-crafter .ProseMirror blockquote:before,.edit-crafter .ProseMirror blockquote.is-empty:before{position:absolute;bottom:0;left:0;top:0;height:100%;width:.25rem;border-radius:calc(var(--radius) - 4px);background-color:hsl(var(--accent-foreground) / .15);--tw-content: "";content:var(--tw-content)}.edit-crafter .ProseMirror hr{margin-top:.75rem;margin-bottom:.75rem;height:.125rem;width:100%;border-style:none;background-color:var(--mt-hr)}.edit-crafter .ProseMirror-focused hr.ProseMirror-selectednode{border-radius:9999px;outline-style:solid;outline-width:2px;outline-offset:1px;outline-color:hsl(var(--muted-foreground))}.edit-crafter .ProseMirror .ProseMirror-gapcursor{pointer-events:none;position:absolute;display:none}.edit-crafter .ProseMirror .ProseMirror-hideselection{caret-color:transparent}.edit-crafter .ProseMirror.resize-cursor{cursor:col-resize}.edit-crafter .ProseMirror .selection{display:inline-block}.edit-crafter .ProseMirror s span{text-decoration-line:line-through}.edit-crafter .ProseMirror *::-moz-selection,::-moz-selection{background-color:hsl(var(--primary) / .25)}.edit-crafter .ProseMirror .selection,.edit-crafter .ProseMirror *::selection,::selection{background-color:hsl(var(--primary) / .25)}.edit-crafter .ProseMirror .selection::-moz-selection{background:transparent}.edit-crafter .ProseMirror .selection::selection{background:transparent}