How to implement in a React Router app?

[adeeb1]

Hello,

I'm having a lot of trouble implementing this editor in my app that uses React, React Router, SCSS, and Webpack. I thought it would be plug-and-play, but it doesn't seem to be that way. I see that Shadcn and TailwindCSS are dependencies, so I've added them to my project, but the editor is not showing properly at all. I've spent hours trying to get this to work and would appreciate some guidance.

Currently, my editor looks like this:

The editor technically works, but all of the styles aren't applying despite adding Tailwind and Shadcn to the project.

I added a base Shadcn config in ./components.json:

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "src/index.css",
    "baseColor": "zinc",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/src/client/lib/utils",
    "ui": "@/src/client/components/ui",
    "lib": "@/src/client/lib",
    "hooks": "@/src/client/hooks"
  },
  "iconLibrary": "lucide"
}

I also added a base ./tailwind.config.js file:

module.exports = {
  content: [
    './src/client/**/*.{js,html}',
    './src/client/**/*.scss',
    './public/index.html'
  ],
  prefix: 'richtext-',
  darkMode: ['class'],
  theme: {
    extend: {
      colors: {
        border: 'hsl(var(--border))',
        input: 'hsl(var(--input))',
        ring: 'hsl(var(--ring))',
        background: 'hsl(var(--background))',
        foreground: 'hsl(var(--foreground))',
        primary: {
          DEFAULT: 'hsl(var(--primary))',
          foreground: 'hsl(var(--primary-foreground))'
        },
        secondary: {
          DEFAULT: 'hsl(var(--secondary))',
          foreground: 'hsl(var(--secondary-foreground))'
        },
        destructive: {
          DEFAULT: 'hsl(var(--destructive))',
          foreground: 'hsl(var(--destructive-foreground))'
        },
        muted: {
          DEFAULT: 'hsl(var(--muted))',
          foreground: 'hsl(var(--muted-foreground))'
        },
        accent: {
          DEFAULT: 'hsl(var(--accent))',
          foreground: 'hsl(var(--accent-foreground))'
        },
        popover: {
          DEFAULT: 'hsl(var(--popover))',
          foreground: 'hsl(var(--popover-foreground))'
        },
        card: {
          DEFAULT: 'hsl(var(--card))',
          foreground: 'hsl(var(--card-foreground))'
        }
      },
      borderRadius: {
        lg: `var(--radius)`,
        md: `calc(var(--radius) - 2px)`,
        sm: 'calc(var(--radius) - 4px)'
      }
    }
  },
  plugins: [require('tailwindcss-animate')]
}

In my webpack config, I've added the postcss-loader:

{
        test: /\.s[ac]ss$/i,
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader',
          {
            loader: 'sass-loader',
            options: {
              implementation: require('node-sass')
            }
          }
        ]
      }

And here's my ./postcss.config.js file contents:

module.exports = {
  plugins: {
    '@tailwindcss/postcss': {}
  }
}

Finally, I added @import "tailwindcss"; at the top of my project's root CSS file (./src/client/index.scss).

Any ideas as to what is missing?

[hunghg255]

can you create a repo? I can check easier

[jerejacobson]

Any updates on this? I am running into the same issue.

[jerejacobson]

Looking through other open Issues I was able to solve the problem from @alexvoedi on https://github.com/hunghg255/reactjs-tiptap-editor/issues/165

Use import('reactjs-tiptap-editor/style.css'); instead of using import 'reactjs-tiptap-editor/style.css'; For reference of where to make that change in your application. https://github.com/hunghg255/reactjs-tiptap-editor-demo/blob/251b4bc1616e100398fe76b56fea4b2fce77f5af/src/components/Editor/Editor.tsx#L64