How to Use Tailwind CSS Inside Embeddable Custom Components (Remarkable)

FAQs
1

Tailwind utility classes don’t apply consistently inside Embeddable components because the embedded experience runs inside a shadow DOM, which blocks external stylesheets from penetrating the component scope. CSS variables do pass through the shadow DOM boundary, but class-based styles do not.

You don’t need to abandon Tailwind — here’s how to make it work.

Step 1: Add a Tailwind config to your boilerplate repo

Create a tailwind.config.js at the top level of your boilerplate repo. At minimum it should look like this:

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: 'class',
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

Step 2: Add an index.css to your components folder

Create a src/components/index.css (or equivalent) that begins with:

@tailwind base;
@tailwind components;
@tailwind utilities;

This injects the necessary Tailwind styles so your classes resolve correctly at runtime.

Arbitrary values won’t work — extend the config instead

Embeddable doesn’t support Tailwind arbitrary values like border-[#888888]. Instead, extend your Tailwind config with named tokens:

theme: {
  extend: {
    borderColor: {
      'controls-multiselector': 'var(--embeddable-controls-multiSelector-borderColor)',
    },
  },
},

Then reference them as standard utility classes like border-controls-multiselector.

Tailwind 4 note

The approach above is confirmed working with Tailwind 3. If you’re on Tailwind 4, some tweaks may be needed — reach out if you run into issues and we can help you through it.