Exporting as an npm package not working

[Klausdk1999]

Hello plate community!
I'm trying to set a basic editor and export it to be used in other projects, I started with a CRA project and installed everything, and it works, but when i export it, I have different issues with the editor not looking or working the same as the one inside the package.

Tailwind styles are being applied, i tested adding underline to a h1 text and it works as expected.

Might be some issue in the React/Ts/Js layer or build, because some props on the Editor aren't working as defined on the package and the emoji dropdown is also broken. For example, i set focusRing=false on my editor component, but when importing and using in other projects, it has the focusRing active.

I did look up for the bug, and tested:

• Different tailwind configurations on both the package and the importer project - but adding node_modules to the content list and reinstalling didn't change much.
• Different tsconfig options to include more files and declarations on the build, but also didn't work.
• PostCSS: on the platejs example they use it, and i added it to our editor project to include tailwind css classes after the main build, but it didn't change much.
• Tried generating the package with Webpack 5, this could be an option but the type declarations are causing a few issues.

I'm using a React component called RichTextEditor with Plate, Fixed Toolbar and Editor. To export the package, i'm using: npx -p typescript tsc --outDir ./dist --noEmit false --declaration --isolatedModules false and then 'npm pack' , so i can import it locally. If someone could point me to the right solution for this or to an example I wold be very thankful!

[12joan]

For example, i set focusRing=false on my editor component, but when importing and using in other projects, it has the focusRing active.

The focusRing={false} option on Editor works by removing the following class names: focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2. With those removed, the default rule of focus-visible:outline-none should remove the browser focus ring.

Are these class names being applied in the HTML generated by React? Is Tailwind outputting CSS for these class names?

[12joan]

Are the CSS styles from Tailwind being applied? Can you share the glob pattern you used to add node_modules to the content list, and does it definitely cover the JS file containing the focus-visible:outline-none string?

[Klausdk1999]

Okay, the tailwind config for the base project, here the editor should be in node_modules, and used inside the src or components is:

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ['class'],
  content: [
    './node_modules',
    './pages/**/*.{ts,tsx}',
    './components/**/*.{ts,tsx}',
    './app/**/*.{ts,tsx}',
    './src/**/*.{ts,tsx}',
  ],
  prefix: '',
  theme: {
    container: {
      center: true,
      padding: '2rem',
      screens: {
        '2xl': '1400px',
      }, ...

and the tailwind config used on the package, where the editor is setup at /scr/components and exported to /dist is:

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ['class'],
  content: [
    './node_modules',
    './pages/**/*.{ts,tsx}',
    './components/**/*.{ts,tsx}',
    './app/**/*.{ts,tsx}',
    './src/**/*.{ts,tsx}',
    './dist/**/*.{ts,tsx}',
    './dist',
    './build',
  ],
  prefix: '',
  theme: {
    container: {
      center: true,
      padding: '2rem',
      screens: {
        '2xl': '1400px',
      },
    },...

I also included postcss on the editor package after checking the templates here on git, but I haven't used it before:
module.exports = { plugins: [require('tailwindcss'), require('autoprefixer')], };

Global CSS is the same on both projects, and has the tailwind imports.
Besides these: npm install @udecode/cn tailwindcss-animate class-variance-authority tailwind-merge lucide-react , there is any other package that could be missing on the project where its imported? Or any step necessary to generate the dist on the package? It didn't return any warnings but maybe something related to the classes.

[Klausdk1999]

Base tailwind classes are being applied, i tested creating <h1 className="text-3xl font-bold underline">Tailwind working if im underlined!</h1> and the text appears underlined. About the plate specific classes, do you have a suggestion on how to test?

[12joan]

'./node_modules',

This entry isn't valid. It needs to be a glob pattern matching specific files, not a directory. Something like ./node_modules/YOUR_PACKAGE/dist/*.js, or whatever is necessary to match the set of source files containing your Tailwind class names.

This grep command might help figure out which files to include:

grep -r focus-visible:outline-none node_modules/YOUR_PACKAGE

[12joan]

Here's Tailwind's explanation of how the content option works.
https://tailwindcss.com/docs/content-configuration

[Klausdk1999]

Thank you so much! This solved the issue : content: [ './node_modules/PACKAGE/dist/**/*.{js,jsx,ts,tsx}', ],
I'm having a few styles issues with my older components css but i can figure it out from here, thanks.