[Bug] tailwind prefix="richtext-" Causing No Style Applied on the Component

[salaarkhan-dev]

I'm currently working on an ongoing project that uses Tailwind CSS along with ShadeCN. We recently integrated a rich text editor, but the styles are not aligning with our theme. After investigating, it appears that the issue is related to the prefix configuration in Tailwind.

Expected Behavior:

The editor should apply the Tailwind styles according to our theme, with the prefix richtext- functioning correctly.

Actual Behavior:

No Tailwind styles are being applied to the component due to the prefix configuration in the build.

Steps to Reproduce:

1. Set up a project using Tailwind CSS and ShadeCN with custom tailwind theme.
2. Integrate the rich text editor.
3. Observe that styles do not apply as expected.

[hunghg255]

@salaarkhan-dev I'm not sure about this problem, you can fork my repo and implement it

[salaarkhan-dev]

I did work around using my own custom CSS styles and then import this CSS file where importing this component.

/* Styles for the rich text editor container */
.richtext-rounded-\[0\.5rem\] {
  @apply rounded-lg; /* Using 0.5rem (8px) rounding */
}

.richtext-bg-background {
  @apply bg-background; /* Apply your preferred background color */
}

.richtext-shadow {
  @apply shadow-lg; /* Adds a large shadow around the container */
}

.richtext-overflow-hidden {
  @apply overflow-hidden; /* Ensures content is clipped to bounds */
}

.richtext-outline {
  @apply outline-none focus:outline-blue-500; /* Default and focus outline styles */
}

.richtext-outline-1 {
  @apply outline-1; /* Sets the outline thickness */
}

/* Flex layout and size styles */
.richtext-flex {
  @apply flex;
}

.richtext-flex-col {
  @apply flex-col;
}

.richtext-w-full {
  @apply w-full;
}

.richtext-max-h-full {
  @apply max-h-full;
}

/* Editor content specific styles */
.richtext-relative {
  @apply relative; /* Sets position relative for inner components */
}

/* Character count styling */
.richtext-character-count {
  @apply text-foreground-400 text-sm; /* Use subtle color and smaller font */
}

/* Bubble menu styles */
.richtext-bubble-menu {
  @apply absolute bg-background rounded-md shadow-md p-2;
  /* Adjust padding, background, and shadow for a custom popup style */
}