---
title: "Embeddable Widgets with Vite, React, Tailwind 4 & Web Components"
url: https://daily.dev/posts/embeddable-widgets-with-vite-react-tailwind-4-web-components-kmten04bk
source_url: https://www.viget.com/articles/embeddable-widgets-with-vite-react-tailwind-4-web-components
type: article
source: "Viget"
published: 2026-06-23T20:45:09.821Z
updated: 2026-06-25T18:20:46.052Z
tags: ["react", "html", "tailwind-css", "vite", "web-components"]
reading_time: 11
upvotes: 8
comments: 1
language: en
---

> ## Documentation Index
> Fetch the complete documentation index at: https://daily.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Embeddable Widgets with Vite, React, Tailwind 4 & Web Components

**[Viget](https://daily.dev/sources/viget)** · 11 min read · 8 upvotes · 1 comments

## Summary

A practical walkthrough of building embeddable widgets using React, Tailwind 4, Vite, and Web Components delivered as a single JS file. Two significant browser limitations are uncovered and solved: Tailwind 4's heavy reliance on CSS @property rules which Shadow DOM doesn't fully support, and @font-face declarations not working inside Shadow Roots. The @property issue is addressed with a custom PostCSS plugin (~300 lines) that transforms Tailwind's property registrations into concrete CSS variable declarations scoped to the shadow host. The font issue is handled by a runtime font loader using the FontFace API that attaches fonts to the parent document instead of the Shadow Root.

## Full article

daily.dev links to this article rather than hosting it. Read it at the original source: <https://www.viget.com/articles/embeddable-widgets-with-vite-react-tailwind-4-web-components>

## Community discussion

Top comments from developers on daily.dev.

**@devsk** · 0 upvotes

> ![GIF](https://static.klipy.com/ii/8ce8357c78ea940b9c2015daf05ce1a5/ad/1f/7HrUp7Qr.gif)

---

Tags: [#react](https://daily.dev/tags/react), [#html](https://daily.dev/tags/html), [#tailwind-css](https://daily.dev/tags/tailwind-css), [#vite](https://daily.dev/tags/vite), [#web-components](https://daily.dev/tags/web-components)

[View this post on daily.dev](https://daily.dev/posts/embeddable-widgets-with-vite-react-tailwind-4-web-components-kmten04bk)