Customizing Trix Editor with DaisyUI

Trix is a fantastic WYSIWYG editor from the team at Basecamp that works seamlessly with Rails. While it comes with its own set of default styles, you might want to customize it to match your application's design system - especially if you're using modern CSS frameworks like TailwindCSS and DaisyUI.

In this guide, I'll describe how I replaced the default Trix CSS with custom styles using DaisyUI and TailwindCSS, including how to replace the default icons with custom SVGs.

The Motivation


The default Trix toolbar is functional but might not align with your application design, especially if you use DaisyUI and TailwindCSS. By customizing the toolbar, we can create a more consistent user experience and take advantage of DaisyUI's theming capabilities.

Key advantages to this approach:
  • Complete control over the Trix editor's appearance
  • Consistency with your application's design system
  • Ability to leverage dark/light mode from DaisyUI
  • Custom SVG icons for better visuals


Setting Up the Structure


First, let's understand the approach. Rather than importing Trix's default CSS, we'll create our own styles using DaisyUI and TailwindCSS classes. We'll wrap everything in @layer base to ensure proper CSS specificity.

/* TRIX CUSTOMIZATION START */
@charset "UTF-8";

@layer base {
  /* Our custom styles will go here */
}
/* TRIX CUSTOMIZATION STOP */

Styling the Toolbar


The toolbar is the most visually prominent part of the Trix editor. Let's make it stick to the top with a nice background:

trix-toolbar {
  @apply sticky top-0 border-0 bg-base-200 z-10;

  * {
    box-sizing: border-box;
  }
}

This applies:
  • sticky positioning so the toolbar stays at the top when scrolling
  • A DaisyUI bg-base-200 background that adapts to light/dark themes
  • A higher z-index to ensure the toolbar remains above other content

Button Row Layout


Next, we need to structure the button row to be responsive and look good on all devices:

.trix-button-row {
  @apply flex flex-nowrap justify-between overflow-x-auto gap-4 p-2;
}

This creates:
  • A flexible layout that doesn't wrap (but scrolls horizontally if needed)
  • Even spacing between button groups
  • Proper padding around the buttons

Button Groups


Button groups need to look cohesive and distinct:

.trix-button-group {
  @apply flex mb-2 rounded-lg shadow-sm overflow-hidden;
  margin-right: 0.5rem;
}

.trix-button-group-spacer {
  @apply flex-grow;
}

This provides:
  • Rounded corners for the entire group
  • A subtle shadow for depth
  • Proper spacing between groups

Styling the Buttons


Basic Button Styling


The basic button styling sets up general appearance rules:

.trix-button {
  @apply relative bg-neutral-content hover:bg-neutral font-normal text-base text-neutral whitespace-nowrap outline-none transition-colors duration-200 px-2 py-1;

  &:not(:first-child) {
    @apply border-l border-l-base-300;
  }

  &.trix-active {
    @apply bg-primary text-primary-content;
  }

  &:not(:disabled) {
    @apply cursor-pointer;
  }

  svg {
    @apply w-4 h-4 fill-current stroke-current;
  }
}

Here we're:
  • Using DaisyUI's color system with neutral-content for background and neutral for text
  • Adding a smooth hover effect
  • Making active buttons stand out with the primary color
  • Adding a left border to all buttons except the first in a group
  • Ensuring icons scale properly

Icon Button Styling


This is where the magic happens for replacing Trix's default icons:

.trix-button--icon {
  @apply bg-neutral-content hover:bg-neutral w-8 h-8 p-0;

  text-indent: -9999px;

  &::before {
    @apply inline-block absolute opacity-60 content-[''] bg-center bg-no-repeat bg-contain inset-[0.4rem];
  }

  &:hover {
    @apply bg-accent text-accent-content;
  }

  &.trix-active::before {
    @apply opacity-100;
  }
}

The key parts:
  • We use text-indent: -9999px to hide the default text labels
  • Add a ::before pseudo-element where we'll place our SVG icons
  • Set up the icon buttons with consistent dimensions (8×8)
  • Add a nice hover state with the accent color from DaisyUI

Custom SVG Icons


Next comes the part where we specify custom SVG icons for each button:

/* SVG icons */
.trix-button--icon-attach::before { background-image: url("/trix/attach.svg") !important; }
.trix-button--icon-bold::before { background-image: url("/trix/bold.svg") !important; }
.trix-button--icon-italic::before { background-image: url("/trix/italic.svg") !important; }
/* and so on for each icon */

The !important flag ensures our custom icons always precede any default Trix styles.

Styling the Editor and Content


Now, we need to style both the editor itself and how the content appears:

/* Common styles for editor and content */
trix-editor, .trix-content {
  @apply w-full h-full max-w-none p-2;
  
  /* Styles for links, headings, etc. will go here */
}

Link Styling


a {
  @apply link link-accent;

  &:not(.no-underline) {
    @apply underline;
  }

  &:visited {
    @apply link;
  }
}

This uses DaisyUI's link class with the accent color for consistent styling.

Heading Styles


Each heading level gets its own styling:

h1 {
  @apply text-3xl sm:text-5xl font-extrabold mb-6;
}

h2 {
  @apply text-2xl sm:text-3xl font-bold mb-4;
}

/* and so on for h3-h6 */

Note the responsive text sizes that change based on screen width.

Blockquote Styling


Blockquotes get special treatment with open and close quote symbols:

blockquote {
  @apply text-left py-3 px-8 my-8 mx-auto text-base-content bg-base-200 dark:bg-base-300 border-l-accent rounded-s;

  &::before, &::after {
    @apply text-center block h-6 w-6 text-3xl font-semibold italic text-accent float-left rounded-full;

    content: open-quote;
  }

  &::after {
    @apply float-right;

    content: close-quote;
  }

  &:hover::before, &:hover::after {
    @apply font-extrabold;

    transition: all 350ms;
  }
}

This creates beautiful blockquotes with:
  • A light background that changes in dark mode
  • An accent-colored left border
  • Opening and closing quote symbols that change on hover

List Styling


ul {
  list-style-type: disc;
  padding-left: 1rem;

  li {
    list-style: disc;
    margin-left: 1rem;
  }
}

ol {
  list-style-type: decimal;
  padding-left: 1rem;

  li {
    list-style: decimal;
    margin-left: 1rem;
  }
}

This ensures lists have proper indentation and bullet/number styles.

Code Block Styling


For the rendered content, we style code blocks specifically:

.trix-content {
  pre, .code {
    @apply bg-base-300 !p-0 rounded-lg shadow-md border border-secondary;
    @apply font-mono inline-block w-full overflow-x-auto no-scrollbar;

    > code {
      @apply !bg-base-300 !px-2 !py-2;
      @apply rounded-md;
      @apply font-mono inline-block w-full overflow-x-auto;
      @apply text-gray-800 dark:text-base-content;
    }
  }
}

This creates code blocks with:
  • A distinct background color
  • Rounded corners and a subtle shadow
  • Horizontal scrolling for overflow
  • Proper padding and font styling

Attachment Gallery Styling


Trix has a built-in attachment gallery feature, which we can style like this:

.attachment-gallery {
  > action-text-attachment,
  > .attachment {
    flex: 1 0 33%;
    padding: 0 0.5em;
    max-width: 33%;
  }

  &.attachment-gallery--2,
  &.attachment-gallery--4 {
    > action-text-attachment,
    > .attachment {
      flex-basis: 50%;
      max-width: 50%;
    }
  }
}

This creates a responsive grid layout for attachments, with different configurations based on the number of attachments.

Image Attachment Styling


For image attachments specifically:

action-text-attachment {
  figure img {
    @apply rounded-lg shadow-xl;
  }

  .attachment {
    padding: 0 !important;
    max-width: 100% !important;
  }
}
This applies:
  • Rounded corners and a shadow to images
  • Proper sizing constraints to prevent layout issues

Complete Source Code


Here's the complete CSS file for customizing Trix with DaisyUI and TailwindCSS:

/* TRIX CUSTOMIZATION START */

@charset "UTF-8";

@layer base {
  trix-toolbar {
    @apply sticky top-0 border-0 bg-base-200 z-10;

    * {
      box-sizing: border-box;
    }

    .trix-button-row {
      @apply flex flex-nowrap justify-between overflow-x-auto gap-4 p-2;
    }

    .trix-button-group {
      @apply flex mb-2 rounded-lg shadow-sm overflow-hidden;

      margin-right: 0.5rem;
    }

    .trix-button-group-spacer {
      @apply flex-grow;
    }

    .trix-button {
      @apply relative bg-neutral-content hover:bg-neutral font-normal text-base text-neutral whitespace-nowrap outline-none transition-colors duration-200 px-2 py-1;

      &:not(:first-child) {
        @apply border-l border-l-base-300;
      }

      &.trix-active {
        @apply bg-primary text-primary-content;
      }

      &:not(:disabled) {
        @apply cursor-pointer;
      }

      svg {
        @apply w-4 h-4 fill-current stroke-current;
      }
    }

    .trix-button--icon {
      @apply bg-neutral-content hover:bg-neutral w-8 h-8 p-0;

      text-indent: -9999px;

      &::before {
        @apply inline-block absolute opacity-60 content-[''] bg-center bg-no-repeat bg-contain inset-[0.4rem];
      }

      &:hover {
        @apply bg-accent text-accent-content;
      }

      &.trix-active::before {
        @apply opacity-100;
      }
    }

    /* SVG icons */
    .trix-button--icon-attach::before { background-image: url("/trix/attach.svg") !important; }
    .trix-button--icon-bold::before { background-image: url("/trix/bold.svg") !important; }
    .trix-button--icon-italic::before { background-image: url("/trix/italic.svg") !important; }
    .trix-button--icon-link::before { background-image: url("/trix/link.svg") !important; }
    .trix-button--icon-underline::before { background-image: url("/trix/underlined.svg") !important; }
    .trix-button--icon-strike::before { background-image: url("/trix/strike.svg") !important; }
    .trix-button--icon-quote::before { background-image: url("/trix/quote.svg") !important; }
    .trix-button--icon-heading-1::before { background-image: url("/trix/h1.svg") !important; }
    .trix-button--icon-heading-2::before { background-image: url("/trix/h2.svg") !important; }
    .trix-button--icon-heading-3::before { background-image: url("/trix/h3.svg") !important; }
    .trix-button--icon-heading-4::before { background-image: url("/trix/h4.svg") !important; }
    .trix-button--icon-heading-5::before { background-image: url("/trix/h5.svg") !important; }
    .trix-button--icon-heading-6::before { background-image: url("/trix/h6.svg") !important; }
    .trix-button--icon-code::before { background-image: url("/trix/code.svg") !important; }
    .trix-button--icon-bullet-list::before { background-image: url("/trix/bulleted.svg") !important; }
    .trix-button--icon-number-list::before { background-image: url("/trix/numbered.svg") !important; }
    .trix-button--icon-undo::before { background-image: url("/trix/undo.svg") !important; }
    .trix-button--icon-redo::before { background-image: url("/trix/redo.svg") !important; }
    .trix-button--icon-decrease-nesting-level::before { background-image: url("/trix/decrease.svg") !important; }
    .trix-button--icon-increase-nesting-level::before { background-image: url("/trix/increase.svg") !important; }
  }

  .trix-medium {
    @apply h-full;
  }

  /* Common styles for editor and content */
  trix-editor, .trix-content {
    @apply w-full h-full max-w-none p-2;

    a {
      @apply link link-accent;

      &:not(.no-underline) {
        @apply underline;
      }

      &:visited {
        @apply link;
      }
    }

    br {
      @apply m-0 p-0;
    }

    h1 {
      @apply text-3xl sm:text-5xl font-extrabold mb-6;
    }

    h2 {
      @apply text-2xl sm:text-3xl font-bold mb-4;
    }

    h3 {
      @apply text-xl sm:text-2xl font-bold mb-2;
    }

    h4 {
      @apply text-lg sm:text-xl font-bold;
    }

    h5 {
      @apply text-base sm:text-lg font-semibold;
    }

    h6 {
      @apply text-sm sm:text-base font-semibold;
    }

    u {
      @apply underline;
    }

    blockquote {
      @apply text-left py-3 px-8 my-8 mx-auto text-base-content bg-base-200 dark:bg-base-300 border-l-accent rounded-s;

      &::before, &::after {
        @apply text-center block h-6 w-6 text-3xl font-semibold italic text-accent float-left rounded-full;

        content: open-quote;
      }

      &::after {
        @apply float-right;

        content: close-quote;
      }

      &:hover::before, &:hover::after {
        @apply font-extrabold;

        transition: all 350ms;
      }
    }

    ul {
      list-style-type: disc;
      padding-left: 1rem;

      li {
        list-style: disc;
        margin-left: 1rem;
      }
    }

    ol {
      list-style-type: decimal;
      padding-left: 1rem;

      li {
        list-style: decimal;
        margin-left: 1rem;
      }
    }
  }

  /* Specific to rendered content */
  .trix-content {
    * {
      @apply my-1;
    }

    pre, .code {
      @apply bg-base-300 !p-0 rounded-lg shadow-md border border-secondary;
      @apply font-mono inline-block w-full overflow-x-auto no-scrollbar;

      > code {
        @apply !bg-base-300 !px-2 !py-2;
        @apply rounded-md;
        @apply font-mono inline-block w-full overflow-x-auto;
        @apply text-gray-800 dark:text-base-content;
      }
    }

    .attachment-gallery {
      > action-text-attachment,
      > .attachment {
        flex: 1 0 33%;
        padding: 0 0.5em;
        max-width: 33%;
      }

      &.attachment-gallery--2,
      &.attachment-gallery--4 {
        > action-text-attachment,
        > .attachment {
          flex-basis: 50%;
          max-width: 50%;
        }
      }
    }

    action-text-attachment {
      figure img {
        @apply rounded-lg shadow-xl;
      }

      .attachment {
        padding: 0 !important;
        max-width: 100% !important;
      }
    }
  }

  /* Specific to editor area */
  trix-editor {
    pre, .code {
      @apply bg-base-300 p-2 rounded-lg shadow-md border border-secondary;
      @apply font-mono inline-block w-full overflow-x-auto no-scrollbar;

      > code {
        @apply bg-base-300 px-2 py-2;
        @apply rounded-md;
        @apply font-mono inline-block w-full overflow-x-auto;
        @apply text-gray-800 dark:text-base-content;
      }
    }
  }
}

/* TRIX CUSTOMIZATION STOP */

Conclusion


By customizing Trix with DaisyUI and TailwindCSS, we've created a more consistent and visually appealing rich text editor that integrates seamlessly with our application's design system. 

The custom SVG icons and theme-aware styling make it a pleasure to use in light and dark modes.
In a future post, we'll explore how to add syntax highlighting to code blocks, building on the foundation we've set up here.

Feel free to adapt these styles to your own projects. Remember to create SVG icons that match your application's visual language!

Comments

No comments yet. Be the first to comment!
Your email address will be verified before your first comment is posted. It will not be displayed publicly.
Legal Information
By commenting, you agree to our Privacy Policy and Terms of Service.

Press ESC key or click the button below to close