Preview not working properly and had to manually include the css file for it to be bundled with webpack. Am I missing something?

Describe your question Please describe your question in as much detail as possible.

Using webpack to bundle all my js and packages. Have to include css manually otherwise it is not working on the page. Also the preview is not working after all is imported? Am I doing something wrong or is there another prerequisite I don’t have?

admin.js

import $ from 'jquery';
import * as EasyMDE from 'easymde';
import 'easymde/dist/easymde.min.css';

var easyMDE = new EasyMDE({
    element: $("#postAdminContent")[0],
    forceSync: true,
    placeholder: "Write using markdown here. Content will be automatically translated to be presentable on your site.",
    renderingConfig: {
        codeSyntaxHighlighting: true,
    },
});

dependencies

  "dependencies": {
    "@babel/preset-env": "^7.13.15",
    "@tailwindcss/forms": "^0.2.1",
    "@tailwindcss/line-clamp": "^0.2.0",
    "autoprefixer": "^10.1.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.2.2",
    "codemirror": "^5.60.0",
    "cross-env": "^7.0.3",
    "easymde": "^2.14.0",
    "jquery": "^3.6.0",
    "postcss": "^8.2.1",
    "postcss-cli": "^8.3.1",
    "postcss-import": "^14.0.0",
    "tailwindcss": "^2.0.2",
    "webpack": "^5.31.0",
    "webpack-dev-server": "^3.11.2",
    "zxcvbn": "^4.4.2"
  },
  "devDependencies": {
    "css-loader": "^5.2.0",
    "style-loader": "^2.0.0",
    "webpack-cli": "^4.6.0"
  }

[aaronduce]

Sorted - it seems if you are using Tailwind, it conflicts as default styling is overridden in favour of utility classes.

To get around this, you would need to:

• Install the Tailwind Typography plugin npm install @tailwindcss/typography
• Add as a plugin to your tailwind.config.js file:

  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/line-clamp'),
    require('@tailwindcss/typography'),
  ],

• Wrap the textarea or target element for EasyMDE to use in a ‘prose’ element

<article class="prose max-w-none">
    <!-- textarea..... -->
</article>

[Ionaru]

The preview window relies on the standard browser styling of elements, combined with whatever marked adds.