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

**URL:** <https://community.embeddable.com/t/how-to-use-tailwind-css-inside-embeddable-custom-components-remarkable/178>\
**Category:** FAQs\
**Created:** [March 25, 2026, 11:19am UTC](https://community.embeddable.com/t/how-to-use-tailwind-css-inside-embeddable-custom-components-remarkable/178 "2026-03-25T11:19:13Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![ella-embeddable](https://dub1.discourse-cdn.com/flex013/user_avatar/community.embeddable.com/ella-embeddable/32/15_2.png) [@ella-embeddable](https://community.embeddable.com/u/ella-embeddable)\
**Post date:** [March 25, 2026, 11:19am UTC](https://community.embeddable.com/t/how-to-use-tailwind-css-inside-embeddable-custom-components-remarkable/178/1 "2026-03-25T11:19:13Z")

</div>

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:

```js
/** @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:

```css
@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:

```js
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.