diff --git a/packages/compiler/src/bundlers/vite.ts b/packages/compiler/src/bundlers/vite.ts
index 3b1f9c12..93e3cbfb 100644
--- a/packages/compiler/src/bundlers/vite.ts
+++ b/packages/compiler/src/bundlers/vite.ts
@@ -31,9 +31,8 @@ export function vjsCompiler(options: VideojsCompilerPluginOptions = {}): Plugin
   const getConfig = async (): Promise<{ config: CompilerConfig; configDir: string }> => {
     if (options.config) return { config: options.config, configDir: root };
     loadedConfig ??= await loadConfig(root, options.configFile);
-    return loadedConfig
-      ? { config: loadedConfig.config, configDir: loadedConfig.configDir }
-      : { config: {}, configDir: root };
+    if (!loadedConfig) return { config: {}, configDir: root };
+    return { config: loadedConfig.config, configDir: loadedConfig.configDir };
   };
 
   return {
diff --git a/packages/compiler/src/cli.ts b/packages/compiler/src/cli.ts
index 35fb68ff..a14e0545 100644
--- a/packages/compiler/src/cli.ts
+++ b/packages/compiler/src/cli.ts
@@ -3,14 +3,14 @@ import { mkdirSync, readFileSync, writeFileSync } from 'node:fs';
 import { dirname, isAbsolute, resolve } from 'node:path';
 
 import { CompilerError, compile } from './compile';
-import type { CompilerDiagnostic } from './config';
+import type { CompilerDiagnostic, CompilerProjectConfig } from './config';
 import {
   type DiagnosticFormat,
   formatCompilerDiagnostic,
   formatCompilerDiagnosticJsonLine,
   formatDiagnosticSummaryJsonLine,
 } from './diagnostics';
-import { loadConfig } from './load-config';
+import { loadConfig, loadProjectConfig } from './load-config';
 import { compileProject } from './project';
 
 interface ParsedArgs {
@@ -75,10 +75,12 @@ async function runCompile(
   const file = positional[0];
   const cwd = process.cwd();
   const outputPath = outFile ? (isAbsolute(outFile) ? outFile : resolve(cwd, outFile)) : undefined;
-  const loaded = await loadConfig(cwd, configOverride);
 
   if (!file) {
-    if (!loaded?.config.input) throw new Error('Usage: vjs compile <file> or configure `input`.');
+    const loaded = await loadProjectConfig(cwd, configOverride);
+    if (!loaded || !hasProjectInput(loaded.config)) {
+      throw new Error('Usage: vjs compile <file> or configure `input`.');
+    }
     if (outputPath) throw new Error('`--out` is only supported when compiling a single file. Use `output` in config.');
 
     const result = await compileProject(loaded.config, { configDir: loaded.configDir, cwd });
@@ -94,6 +96,7 @@ async function runCompile(
 
   const inputPath = isAbsolute(file) ? file : resolve(cwd, file);
   const source = readFileSync(inputPath, 'utf8');
+  const loaded = await loadConfig(cwd, configOverride);
   const result = await compile(source, {
     filename: inputPath,
     config: loaded?.config,
@@ -120,6 +123,10 @@ async function runCompile(
   }
 }
 
+function hasProjectInput(config: CompilerProjectConfig): boolean {
+  return Array.isArray(config) ? config.some((entry) => Boolean(entry.input)) : Boolean(config.input);
+}
+
 async function main(): Promise<void> {
   const { command, positional, configOverride, outFile, diagnosticsFormat } = parseArgs(process.argv.slice(2));
   currentDiagnosticsFormat = diagnosticsFormat;
diff --git a/packages/compiler/src/config.ts b/packages/compiler/src/config.ts
index 4b0efa25..b281407d 100644
--- a/packages/compiler/src/config.ts
+++ b/packages/compiler/src/config.ts
@@ -66,6 +66,8 @@ export interface CompilerConfig {
   target?: CompilerTarget | undefined;
 }
 
+export type CompilerProjectConfig = CompilerConfig | CompilerConfig[];
+
 export type CompilerInput = string | readonly string[] | Record<string, string>;
 
 export interface CompilerOutputOptions {
@@ -75,7 +77,7 @@ export interface CompilerOutputOptions {
   banner?: string | undefined;
 }
 
-export function defineConfig<const Config extends CompilerConfig>(config: Config): Config {
+export function defineConfig<const Config extends CompilerProjectConfig>(config: Config): Config {
   return config;
 }
 
diff --git a/packages/compiler/src/index.ts b/packages/compiler/src/index.ts
index 3c1b1498..aac049d1 100644
--- a/packages/compiler/src/index.ts
+++ b/packages/compiler/src/index.ts
@@ -9,6 +9,7 @@ export {
   type CompilerPipelineStep,
   type CompilerPlugin,
   type CompilerPluginEnforce,
+  type CompilerProjectConfig,
   type CompilerTarget,
   type CompilerTransform,
   defineConfig,
diff --git a/packages/compiler/src/load-config.ts b/packages/compiler/src/load-config.ts
index f9f0c4f9..cb28d86e 100644
--- a/packages/compiler/src/load-config.ts
+++ b/packages/compiler/src/load-config.ts
@@ -2,11 +2,11 @@ import { existsSync } from 'node:fs';
 import { dirname, isAbsolute, resolve } from 'node:path';
 import { pathToFileURL } from 'node:url';
 
-import type { CompilerConfig } from './config';
+import type { CompilerConfig, CompilerProjectConfig } from './config';
 
 interface ConfigModule {
-  default?: CompilerConfig;
-  config?: CompilerConfig;
+  default?: CompilerProjectConfig;
+  config?: CompilerProjectConfig;
 }
 
 export interface LoadedCompilerConfig {
@@ -15,6 +15,12 @@ export interface LoadedCompilerConfig {
   configDir: string;
 }
 
+export interface LoadedCompilerProjectConfig {
+  config: CompilerProjectConfig;
+  configPath: string;
+  configDir: string;
+}
+
 export const CONFIG_FILENAMES = [
   'compiler.config.js',
   'compiler.config.mjs',
@@ -37,7 +43,7 @@ export function findConfig(cwd: string, override: string | undefined): string |
   return null;
 }
 
-export async function loadConfigFile(configPath: string): Promise<LoadedCompilerConfig> {
+export async function loadProjectConfigFile(configPath: string): Promise<LoadedCompilerProjectConfig> {
   const mod = (await import(pathToFileURL(configPath).href)) as ConfigModule;
   const config = mod.default ?? mod.config;
   if (!config) {
@@ -46,6 +52,22 @@ export async function loadConfigFile(configPath: string): Promise<LoadedCompiler
   return { config, configPath, configDir: dirname(configPath) };
 }
 
+export async function loadConfigFile(configPath: string): Promise<LoadedCompilerConfig> {
+  const loaded = await loadProjectConfigFile(configPath);
+  if (Array.isArray(loaded.config)) {
+    throw new Error(`Config file ${configPath} must export a single compiler config.`);
+  }
+  return { ...loaded, config: loaded.config };
+}
+
+export async function loadProjectConfig(
+  cwd: string,
+  override: string | undefined
+): Promise<LoadedCompilerProjectConfig | null> {
+  const configPath = findConfig(cwd, override);
+  return configPath ? loadProjectConfigFile(configPath) : null;
+}
+
 export async function loadConfig(cwd: string, override: string | undefined): Promise<LoadedCompilerConfig | null> {
   const configPath = findConfig(cwd, override);
   return configPath ? loadConfigFile(configPath) : null;
diff --git a/packages/compiler/src/project.ts b/packages/compiler/src/project.ts
index 3a0e8d4c..43223822 100644
--- a/packages/compiler/src/project.ts
+++ b/packages/compiler/src/project.ts
@@ -1,7 +1,7 @@
 import { readFile } from 'node:fs/promises';
 import { basename, dirname, extname, isAbsolute, join, resolve } from 'node:path';
 import { compile } from './compile';
-import type { CompilerAsset, CompilerConfig, CompilerDiagnostic, CompilerInput } from './config';
+import type { CompilerAsset, CompilerConfig, CompilerDiagnostic, CompilerInput, CompilerProjectConfig } from './config';
 
 export interface CompileProjectOptions {
   configDir?: string | undefined;
@@ -26,6 +26,27 @@ interface ProjectEntry {
 }
 
 export async function compileProject(
+  config: CompilerProjectConfig,
+  options: CompileProjectOptions = {}
+): Promise<CompileProjectResult> {
+  const files: ProjectOutputFile[] = [];
+  const diagnostics: CompilerDiagnostic[] = [];
+  const seenFiles = new Set<string>();
+
+  for (const entry of Array.isArray(config) ? config : [config]) {
+    const result = await compileProjectConfig(entry, options);
+    diagnostics.push(...result.diagnostics);
+    for (const file of result.files) {
+      if (seenFiles.has(file.fileName)) throw new Error(`Compiler project output collision: ${file.fileName}`);
+      seenFiles.add(file.fileName);
+      files.push(file);
+    }
+  }
+
+  return { files, diagnostics };
+}
+
+async function compileProjectConfig(
   config: CompilerConfig,
   options: CompileProjectOptions = {}
 ): Promise<CompileProjectResult> {
diff --git a/packages/compiler/src/styles/analyze.ts b/packages/compiler/src/styles/analyze.ts
index 66e8ec53..65431611 100644
--- a/packages/compiler/src/styles/analyze.ts
+++ b/packages/compiler/src/styles/analyze.ts
@@ -59,6 +59,7 @@ export interface AnalyzeStylesOptions {
 
 export function readStyleAttribute(element: JsxElementLike): StyleAttributeInfo | undefined {
   const attrs = ts.isJsxElement(element) ? element.openingElement.attributes : element.attributes;
+
   const classNameAttr = findClassNameAttribute(attrs);
   if (!classNameAttr) return undefined;
 
diff --git a/packages/compiler/src/styles/index.ts b/packages/compiler/src/styles/index.ts
index b086d8d1..de7ab8a1 100644
--- a/packages/compiler/src/styles/index.ts
+++ b/packages/compiler/src/styles/index.ts
@@ -24,30 +24,6 @@ export {
   type NameContext,
   type ResolveName,
 } from './naming';
-export {
-  type ClassNameReferenceData,
-  type ClassNameStyleReference,
-  type CssBundle,
-  classNameScanner,
-  defineStylingPlugin,
-  isClassNameStyleReference,
-  type StyleReference,
-  type StyleResolution,
-  type StyleTransformResult,
-  type StylingAsset,
-  type StylingConfigContext,
-  type StylingContextBase,
-  type StylingEmitContext,
-  type StylingGenerateContext,
-  type StylingOptions,
-  type StylingPlugin,
-  type StylingPluginEnforce,
-  type StylingRenderContext,
-  type StylingResolveContext,
-  type StylingScanContext,
-  type StylingTransformContext,
-  styling,
-} from './pipeline';
 export {
   buildTokenEnv,
   type ResolveTokenModule,
diff --git a/packages/compiler/src/styles/naming.ts b/packages/compiler/src/styles/naming.ts
index 16482f29..b9696e21 100644
--- a/packages/compiler/src/styles/naming.ts
+++ b/packages/compiler/src/styles/naming.ts
@@ -13,9 +13,9 @@ export interface DerivedClassName {
 
 export type DefaultNameSource = 'component' | 'token' | 'literal';
 
-/** Context passed to `resolve.name`. */
+/** Context passed to a style name resolver. */
 export interface NameContext {
-  /** The default candidate source used when `resolve.name` is omitted. */
+  /** The default candidate source used when no name resolver is provided. */
   source: DefaultNameSource;
   /** The JSX tag (e.g. `'PlayButton'` or `'Tooltip.Trigger'`). */
   tag: string;
@@ -116,7 +116,7 @@ export function deriveClassName(opts: DeriveClassNameOptions): DerivedClassName
       `Tag is bare HTML and the className doesn't reference a token path. ` +
       `Resolve by: (a) using a JSX component instead of <${tag}>, ` +
       `(b) extracting the classes into a single token reference, ` +
-      `or (c) customizing \`resolve.name\`.`,
+      `or (c) customizing the style name resolver.`,
     { ...diagnosticLocationFromNode(opts.element), diagnosticCode: 'style-class-name' }
   );
 }
diff --git a/packages/compiler/src/styles/pipeline.ts b/packages/compiler/src/styles/pipeline.ts
deleted file mode 100644
index a3d2e4aa..00000000
--- a/packages/compiler/src/styles/pipeline.ts
+++ /dev/null
@@ -1,253 +0,0 @@
-import ts from 'typescript';
-import type { CompilerAsset, CompilerContext, CompilerPipelineStep, CompilerPlugin } from '../config';
-import type { JsxElementLike } from '../jsx';
-import { readStyleAttribute, type StyleAttributeInfo } from './analyze';
-
-export type StylingPluginEnforce = 'pre' | 'post';
-
-export interface StyleReference<Data = unknown> {
-  kind: string;
-  element: JsxElementLike;
-  node?: ts.Node | undefined;
-  data: Data;
-}
-
-export interface StyleResolution<Data = unknown> {
-  kind: string;
-  reference: StyleReference;
-  data: Data;
-}
-
-export interface StyleTransformResult {
-  element?: JsxElementLike | undefined;
-}
-
-export type StylingAsset = CompilerAsset;
-
-export interface CssBundle {
-  assets: StylingAsset[];
-  meta: Map<unknown, unknown>;
-}
-
-export interface StylingContextBase {
-  compiler: CompilerContext;
-  plugins: readonly StylingPlugin[];
-  meta: Map<unknown, unknown>;
-}
-
-export interface StylingConfigContext extends StylingContextBase {}
-
-export interface StylingScanContext extends StylingContextBase {
-  sourceFile: ts.SourceFile;
-  factory: ts.NodeFactory;
-}
-
-export interface StylingResolveContext extends StylingContextBase {
-  sourceFile: ts.SourceFile;
-  factory: ts.NodeFactory;
-}
-
-export interface StylingTransformContext extends StylingContextBase {
-  sourceFile: ts.SourceFile;
-  factory: ts.NodeFactory;
-  currentElement: JsxElementLike;
-}
-
-export interface StylingGenerateContext extends StylingContextBase {}
-
-export interface StylingRenderContext extends StylingContextBase {}
-
-export interface StylingEmitContext extends StylingContextBase {}
-
-export interface StylingPlugin {
-  name: string;
-  enforce?: StylingPluginEnforce | undefined;
-  config?(context: StylingConfigContext): void | Promise<void>;
-  scan?(
-    element: JsxElementLike,
-    context: StylingScanContext
-  ): StyleReference | readonly StyleReference[] | null | undefined;
-  resolve?(reference: StyleReference, context: StylingResolveContext): StyleResolution | null | undefined;
-  transform?(resolution: StyleResolution, context: StylingTransformContext): StyleTransformResult | null | undefined;
-  generate?(bundle: CssBundle, context: StylingGenerateContext): void | Promise<void>;
-  render?(
-    bundle: CssBundle,
-    context: StylingRenderContext
-  ): readonly StylingAsset[] | null | undefined | Promise<readonly StylingAsset[] | null | undefined>;
-  emit?(assets: readonly StylingAsset[], context: StylingEmitContext): void | Promise<void>;
-}
-
-export interface StylingOptions {
-  plugins?: readonly StylingPlugin[] | undefined;
-}
-
-export interface ClassNameReferenceData {
-  info: StyleAttributeInfo;
-}
-
-export interface ClassNameStyleReference extends StyleReference<ClassNameReferenceData> {
-  kind: 'className';
-}
-
-export function defineStylingPlugin<const Plugin extends StylingPlugin>(plugin: Plugin): Plugin {
-  return plugin;
-}
-
-export function classNameScanner(): StylingPlugin {
-  return defineStylingPlugin({
-    name: 'class-name-scanner',
-    scan(element) {
-      const info = readStyleAttribute(element);
-      if (!info) return null;
-      return {
-        kind: 'className',
-        element,
-        node: info.attribute,
-        data: { info },
-      } satisfies ClassNameStyleReference;
-    },
-  });
-}
-
-export function isClassNameStyleReference(reference: StyleReference): reference is ClassNameStyleReference {
-  return reference.kind === 'className' && isClassNameReferenceData(reference.data);
-}
-
-export function styling(options: StylingOptions = {}): CompilerPlugin {
-  return {
-    name: 'styling',
-    async setup(compiler): Promise<CompilerPipelineStep> {
-      const plugins = orderStylingPlugins(options.plugins ?? []);
-      const meta = new Map<unknown, unknown>();
-      const base = { compiler, plugins, meta } satisfies StylingContextBase;
-      const bundle: CssBundle = { assets: [], meta };
-
-      for (const plugin of plugins) {
-        await plugin.config?.(base);
-      }
-
-      return {
-        transform: createStylingTransform(plugins, base),
-        async finish() {
-          for (const plugin of plugins) {
-            await plugin.generate?.(bundle, base);
-          }
-
-          let assets: readonly StylingAsset[] | null | undefined;
-          for (const plugin of plugins) {
-            assets = await plugin.render?.(bundle, base);
-            if (assets != null) break;
-          }
-
-          const finalAssets = assets ?? bundle.assets;
-          for (const plugin of plugins) {
-            await plugin.emit?.(finalAssets, base);
-          }
-          for (const asset of finalAssets) {
-            compiler.addAsset(asset);
-          }
-        },
-      };
-    },
-  };
-}
-
-function createStylingTransform(
-  plugins: readonly StylingPlugin[],
-  base: StylingContextBase
-): ts.TransformerFactory<ts.SourceFile> {
-  return (transformContext) => {
-    const factory = transformContext.factory;
-
-    return (sourceFile) => {
-      const scanContext = { ...base, sourceFile, factory } satisfies StylingScanContext;
-      const resolveContext = { ...base, sourceFile, factory } satisfies StylingResolveContext;
-
-      const visitNode = (node: ts.Node): ts.Node => {
-        if (ts.isJsxElement(node) || ts.isJsxSelfClosingElement(node)) {
-          const visited = visitJsxElement(node as JsxElementLike, plugins, scanContext, resolveContext, base);
-          return ts.visitEachChild(visited, visitNode, transformContext);
-        }
-        return ts.visitEachChild(node, visitNode, transformContext);
-      };
-
-      return ts.visitEachChild(sourceFile, visitNode, transformContext);
-    };
-  };
-}
-
-function visitJsxElement(
-  element: JsxElementLike,
-  plugins: readonly StylingPlugin[],
-  scanContext: StylingScanContext,
-  resolveContext: StylingResolveContext,
-  base: StylingContextBase
-): JsxElementLike {
-  let current = element;
-  const references: StyleReference[] = [];
-
-  for (const plugin of plugins) {
-    const scanned = plugin.scan?.(current, scanContext);
-    references.push(...normalizeReferences(scanned));
-  }
-
-  for (const reference of references) {
-    const resolution = resolveReference(reference, plugins, resolveContext);
-    if (!resolution) continue;
-
-    const transformContext = {
-      ...base,
-      sourceFile: scanContext.sourceFile,
-      factory: scanContext.factory,
-      currentElement: current,
-    } satisfies StylingTransformContext;
-    const result = transformResolution(resolution, plugins, transformContext);
-    if (result?.element) current = result.element;
-  }
-
-  return current;
-}
-
-function resolveReference(
-  reference: StyleReference,
-  plugins: readonly StylingPlugin[],
-  context: StylingResolveContext
-): StyleResolution | null {
-  for (const plugin of plugins) {
-    const resolution = plugin.resolve?.(reference, context);
-    if (resolution != null) return resolution;
-  }
-  return null;
-}
-
-function transformResolution(
-  resolution: StyleResolution,
-  plugins: readonly StylingPlugin[],
-  context: StylingTransformContext
-): StyleTransformResult | null {
-  for (const plugin of plugins) {
-    const result = plugin.transform?.(resolution, context);
-    if (result != null) return result;
-  }
-  return null;
-}
-
-function normalizeReferences(value: StyleReference | readonly StyleReference[] | null | undefined): StyleReference[] {
-  if (value == null) return [];
-  return isStyleReferenceArray(value) ? [...value] : [value];
-}
-
-function isStyleReferenceArray(value: StyleReference | readonly StyleReference[]): value is readonly StyleReference[] {
-  return Array.isArray(value);
-}
-
-function orderStylingPlugins(plugins: readonly StylingPlugin[]): StylingPlugin[] {
-  const pre = plugins.filter((plugin) => plugin.enforce === 'pre');
-  const normal = plugins.filter((plugin) => plugin.enforce === undefined);
-  const post = plugins.filter((plugin) => plugin.enforce === 'post');
-  return [...pre, ...normal, ...post];
-}
-
-function isClassNameReferenceData(value: unknown): value is ClassNameReferenceData {
-  return typeof value === 'object' && value !== null && 'info' in value;
-}
diff --git a/packages/compiler/src/styles/tests/pipeline.test.ts b/packages/compiler/src/styles/tests/pipeline.test.ts
deleted file mode 100644
index 5e04546a..00000000
--- a/packages/compiler/src/styles/tests/pipeline.test.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { compile } from '../../compile';
-import { rewriteStyleAttribute, type StyleAttributeInfo } from '../analyze';
-import { classNameScanner, defineStylingPlugin, isClassNameStyleReference, styling } from '../pipeline';
-
-describe('styling pipeline', () => {
-  it('scans, resolves, and transforms style references', async () => {
-    const { code } = await compile(`function App(){ return <Button className="one"/>; }`, {
-      config: {
-        plugins: [
-          styling({
-            plugins: [
-              classNameScanner(),
-              defineStylingPlugin({
-                name: 'rewrite-class-name',
-                resolve(reference) {
-                  if (!isClassNameStyleReference(reference)) return null;
-                  return { kind: 'rewrite-class-name', reference, data: reference.data.info };
-                },
-                transform(resolution, context) {
-                  if (resolution.kind !== 'rewrite-class-name') return null;
-                  return {
-                    element: rewriteStyleAttribute(
-                      resolution.data as StyleAttributeInfo,
-                      context.factory.createStringLiteral('two'),
-                      context.factory
-                    ),
-                  };
-                },
-              }),
-            ],
-          }),
-        ],
-      },
-    });
-
-    expect(code).toContain('className="two"');
-  });
-
-  it('uses the first renderer that returns assets', async () => {
-    const { assets } = await compile(`function App(){ return <Button/>; }`, {
-      config: {
-        plugins: [
-          styling({
-            plugins: [
-              defineStylingPlugin({
-                name: 'empty-renderer',
-                render() {
-                  return null;
-                },
-              }),
-              defineStylingPlugin({
-                name: 'asset-renderer',
-                render() {
-                  return [{ type: 'css', fileName: 'styles.css', source: '.button { display: flex; }' }];
-                },
-              }),
-              defineStylingPlugin({
-                name: 'unused-renderer',
-                render() {
-                  return [{ type: 'css', fileName: 'unused.css', source: '.unused {}' }];
-                },
-              }),
-            ],
-          }),
-        ],
-      },
-    });
-
-    expect(assets).toEqual([{ type: 'css', fileName: 'styles.css', source: '.button { display: flex; }' }]);
-  });
-});
diff --git a/packages/compiler/src/tailwind/css/assets.ts b/packages/compiler/src/tailwind/css/assets.ts
index 41e2311b..52a4a66a 100644
--- a/packages/compiler/src/tailwind/css/assets.ts
+++ b/packages/compiler/src/tailwind/css/assets.ts
@@ -23,10 +23,10 @@ export function cssAssets(
   const assets: CompilerAsset[] = [
     { type: 'css', fileName: indexFile, source: rendered.index, sourceFile: context.filename },
   ];
-  for (const [group, source] of rendered.groups) {
+  for (const [chunk, source] of rendered.chunks) {
     assets.push({
       type: 'css',
-      fileName: join(dir, `${group}.css`),
+      fileName: join(dir, `${chunk}.css`),
       source,
       sourceFile: context.filename,
     });
diff --git a/packages/compiler/src/tailwind/css/render.ts b/packages/compiler/src/tailwind/css/render.ts
index ebbd3b6a..f4e52c75 100644
--- a/packages/compiler/src/tailwind/css/render.ts
+++ b/packages/compiler/src/tailwind/css/render.ts
@@ -1,5 +1,14 @@
 import { isAbsolute, resolve } from 'node:path';
 import { bundleAsync } from 'lightningcss';
+import type { StyleSegment } from '../../styles';
+import {
+  composeSelectorLists,
+  type ResolveRule,
+  replaceSelectorClasses,
+  type SelectorList,
+  selectorListForClass,
+  serializeSelectorList,
+} from '../selectors';
 import type { Declaration, UtilityCss, UtilityCssBranch } from '../utility-css';
 
 /** A compiled rule: a class name + the utility's declarations and variants. */
@@ -8,12 +17,14 @@ export interface CompiledRule {
   className: string;
   /** Declarations + variants extracted from the utility. */
   utility: UtilityCss;
+  /** Source className segments that produced this rule. */
+  segments?: readonly StyleSegment[] | undefined;
   /**
-   * Optional logical grouping key. `mode: 'split'` writes rules with the same
-   * group to the same `<group>.css` file; merged mode preserves the metadata
+   * Optional logical chunk key. `mode: 'split'` writes rules with the same
+   * chunk to the same `<chunk>.css` file; merged mode preserves the metadata
    * but emits one stylesheet.
    */
-  group?: string;
+  chunk?: string;
 }
 
 /** Output of `renderCss`. Discriminated by `kind`. */
@@ -22,8 +33,8 @@ export type RenderedCss =
   | {
       kind: 'split';
       index: string;
-      /** CSS chunks keyed by safe file stem, not raw group name. */
-      groups: Map<string, string>;
+      /** CSS chunks keyed by safe file stem, not raw chunk name. */
+      chunks: Map<string, string>;
     };
 
 /**
@@ -47,18 +58,18 @@ export interface RenderCssOptions {
   /**
    * Layout mode:
    *   - `'merged'` (default): one CSS string with all rules.
-   *   - `'split'`: one string per group plus an `index` string with
-   *     `@import` lines for each group in stable order.
+   *   - `'split'`: one string per chunk plus an `index` string with
+   *     `@import` lines for each chunk in stable order.
    */
   mode?: 'merged' | 'split';
   /**
    * Optional list of CSS files to prepend to the output (verbatim, after
    * `@import` resolution via Lightning CSS). In `'split'` mode they go into
-   * `index` only, not duplicated across groups.
+   * `index` only, not duplicated across chunks.
    */
-  baseCss?: readonly string[];
+  base?: readonly string[];
   /**
-   * Directory relative `baseCss` paths resolve against. Defaults to `cwd`.
+   * Directory relative `base` paths resolve against. Defaults to `cwd`.
    */
   configDir?: string;
   /**
@@ -105,6 +116,10 @@ export interface RenderCssOptions {
    * Omit to leave them alone (current behavior). See `RegisteredPropertiesOptions`.
    */
   properties?: RegisteredPropertiesOptions;
+  /** Rule-level selector rewrite hook. */
+  resolveRule?: ResolveRule | undefined;
+  /** Tailwind `group` / `peer` scaffold classes to replace with semantic classes in selectors. */
+  scaffoldClassReplacements?: ReadonlyMap<string, string> | undefined;
 }
 
 /** A `@property` definition (sans name), as captured or overridden. */
@@ -156,7 +171,7 @@ interface RegisteredPropertyVariable {
  * into a single CSS rule. Selectors that produce identical declaration sets
  * collapse into a comma-separated selector list.
  *
- * `baseCss` files are read via `lightningcss.bundleAsync` so their `@import`
+ * `base` files are read via `lightningcss.bundleAsync` so their `@import`
  * chains flatten before prepending — the consumer's `tailwind.css` (or
  * any other base file) lands at the top of the output as a single block.
  */
@@ -176,56 +191,86 @@ export async function renderCss(opts: RenderCssOptions): Promise<RenderedCss> {
   const referenced = collectReferencedVarsFromRules(opts.rules);
   const propertyVariables = opts.properties ? normalizePropertyVariables(opts.properties.variables, inlineVars) : [];
   const propertyMatch = propertyVariables.length > 0 ? matchAny(propertyVariables) : undefined;
+
   const resolveDef = (name: string): PropertyDef | undefined => {
     const cap = captured.get(name);
     const variable = propertyVariables.find((v) => v.match(name));
     return variable?.resolve?.(name, cap) ?? cap;
   };
+
   const inlineMatch = propMode === 'inline' ? combineMatchers(inlineVars, propertyMatch) : inlineVars;
+
   const fallbacks =
     propMode === 'inline' && propertyMatch
       ? buildFallbackSetters(captured, referenced, propertyMatch, resolveDef)
       : undefined;
+
   const emitProperties = (css: string): string =>
     propMode === 'emit' && propertyMatch ? buildPropertyBlocks(css, propertyMatch, resolveDef) : '';
 
   if (mode === 'merged') {
-    const base = await bundleBaseCss(opts.baseCss ?? [], configDir);
-    const body = composeRules(opts.rules, hoist, inlineMatch, fallbacks);
+    const base = await bundleBaseCss(opts.base ?? [], configDir);
+    const body = composeRules(
+      opts.rules,
+      hoist,
+      inlineMatch,
+      fallbacks,
+      opts.resolveRule,
+      opts.scaffoldClassReplacements
+    );
     const theme = buildThemeBlock(body, opts.resolveThemeVar, opts.themeSelector);
     const properties = emitProperties(body);
-    return { kind: 'merged', css: joinSections(base, properties, theme, body) };
+
+    return {
+      kind: 'merged',
+      css: joinSections(base, properties, theme, body),
+    };
   }
 
-  // Split mode: group rules by resolved group.
-  const byGroup = new Map<string, CompiledRule[]>();
+  // Split mode: split rules by resolved chunk.
+  const ruleChunks = new Map<string, CompiledRule[]>();
+
   for (const rule of opts.rules) {
-    const group = rule.group ?? '';
-    const arr = byGroup.get(group) ?? [];
+    const chunk = rule.chunk ?? '';
+    const arr = ruleChunks.get(chunk) ?? [];
     arr.push(rule);
-    byGroup.set(group, arr);
+    ruleChunks.set(chunk, arr);
   }
 
-  const groups = new Map<string, string>();
+  const chunks = new Map<string, string>();
   const importLines: string[] = [];
-  const groupFileNames = new Set<string>();
-  // Sort group names for deterministic output.
-  const sortedGroups = [...byGroup.keys()].sort();
-  for (const groupName of sortedGroups) {
-    const groupRules = byGroup.get(groupName)!;
-    const fileName = groupCssFileName(groupName, groupFileNames);
-    groups.set(fileName, composeRules(groupRules, undefined, inlineMatch, fallbacks));
+  const chunkFileNames = new Set<string>();
+
+  // Sort chunk names for deterministic output.
+  const sortedChunks = [...ruleChunks.keys()].sort();
+
+  for (const chunkName of sortedChunks) {
+    const chunkRules = ruleChunks.get(chunkName)!;
+    const fileName = chunkCssFileName(chunkName, chunkFileNames);
+
+    chunks.set(
+      fileName,
+      composeRules(chunkRules, undefined, inlineMatch, fallbacks, opts.resolveRule, opts.scaffoldClassReplacements)
+    );
+
     importLines.push(`@import "./${fileName}.css";`);
   }
 
-  const base = await bundleBaseCss(opts.baseCss ?? [], configDir);
-  // Theme variables and @property rules go in `index` (it loads first),
-  // resolved against every group.
-  const allGroupsCss = [...groups.values()].join('\n');
-  const theme = buildThemeBlock(allGroupsCss, opts.resolveThemeVar, opts.themeSelector);
-  const properties = emitProperties(allGroupsCss);
-  const index = joinSections(base, properties, theme, importLines.join('\n'));
-  return { kind: 'split', index, groups };
+  const base = await bundleBaseCss(opts.base ?? [], configDir);
+
+  // Theme variables and @property rules go in `index`, resolved against every
+  // chunk. Imports must stay first for the stylesheet to remain valid CSS.
+  const css = [...chunks.values()].join('\n');
+
+  const theme = buildThemeBlock(css, opts.resolveThemeVar, opts.themeSelector);
+  const properties = emitProperties(css);
+  const index = joinSections(importLines.join('\n'), base, properties, theme);
+
+  return {
+    kind: 'split',
+    index,
+    chunks,
+  };
 }
 
 /**
@@ -356,7 +401,7 @@ function buildPropertyBlocks(
   return blocks.join('\n\n');
 }
 
-/** Internal: read each `baseCss` file via Lightning CSS, return concatenated string. */
+/** Internal: read each `base` file via Lightning CSS, return concatenated string. */
 async function bundleBaseCss(paths: readonly string[], configDir: string): Promise<string> {
   if (paths.length === 0) return '';
   const decoder = new TextDecoder();
@@ -374,24 +419,29 @@ function joinSections(...sections: string[]): string {
   return sections.filter((s) => s.length > 0).join('\n\n');
 }
 
-function groupCssFileName(groupName: string, used: Set<string>): string {
-  const base = sanitizeGroupName(groupName);
+function chunkCssFileName(chunkName: string, used: Set<string>): string {
+  const base = sanitizeChunkName(chunkName);
+
   let fileName = base;
   let suffix = 2;
+
   while (used.has(fileName)) {
     fileName = `${base}-${suffix}`;
     suffix++;
   }
+
   used.add(fileName);
+
   return fileName;
 }
 
-function sanitizeGroupName(groupName: string): string {
-  const trimmed = groupName.trim();
+function sanitizeChunkName(chunkName: string): string {
+  const trimmed = chunkName.trim();
   if (!trimmed) return '_default';
 
   const safe = trimmed.replace(/[^A-Za-z0-9_-]+/g, '-').replace(/^-+|-+$/g, '');
-  const fileName = safe || '_group';
+  const fileName = safe || '_chunk';
+
   return fileName === 'index' ? '_index' : fileName;
 }
 
@@ -421,12 +471,14 @@ function composeRules(
   rules: readonly CompiledRule[],
   hoist: HoistOptions | undefined,
   inlineVars: VariableMatcher | undefined,
-  fallbackSetters?: Map<string, string>
+  fallbackSetters?: Map<string, string>,
+  resolveRule?: ResolveRule | undefined,
+  scaffoldClassReplacements?: ReadonlyMap<string, string> | undefined
 ): string {
   // Step 1: turn each CompiledRule branch into one EmitUnit.
   const units: EmitUnit[] = [];
   for (const rule of rules) {
-    units.push(...buildEmitUnits(rule));
+    units.push(...buildEmitUnits(rule, resolveRule, scaffoldClassReplacements));
   }
 
   // Step 2: merge units by (atRulePath, selector). Dedupe declarations by
@@ -447,10 +499,7 @@ function composeRules(
       merged.set(key, entry);
     }
     for (const d of u.declarations) {
-      const dk = `${d.property}:${d.value}`;
-      if (entry.declSet.has(dk)) continue;
-      entry.declSet.add(dk);
-      entry.declarations.push(d);
+      addDeclaration(entry, d);
     }
   }
 
@@ -819,30 +868,93 @@ function findTopLevelComma(s: string): number {
   return -1;
 }
 
-function buildEmitUnits(rule: CompiledRule): EmitUnit[] {
-  return rule.utility.branches.map((branch) => buildEmitUnit(rule.className, branch));
+function buildEmitUnits(
+  rule: CompiledRule,
+  resolveRule: ResolveRule | undefined,
+  scaffoldClassReplacements: ReadonlyMap<string, string> | undefined
+): EmitUnit[] {
+  return rule.utility.branches.map((branch) => buildEmitUnit(rule, branch, resolveRule, scaffoldClassReplacements));
 }
 
-function buildEmitUnit(className: string, branch: UtilityCssBranch): EmitUnit {
+function buildEmitUnit(
+  rule: CompiledRule,
+  branch: UtilityCssBranch,
+  resolveRule: ResolveRule | undefined,
+  scaffoldClassReplacements: ReadonlyMap<string, string> | undefined
+): EmitUnit {
   const atRulePath: string[] = [];
-  let selectorTail = '';
+  const baseSelectorAst = selectorListForClass(rule.className);
+  const baseSelector = serializeSelectorList(baseSelectorAst);
+
+  let selectorAst: SelectorList | undefined = baseSelectorAst;
+  let selector = baseSelector;
 
   for (const v of branch.variants) {
     if (v.atRule) {
       atRulePath.push(`@${v.atRule.name} ${v.atRule.params}`.trim());
+    } else if (selectorAst && v.selectorAst) {
+      selectorAst = composeSelectorLists(selectorAst, v.selectorAst);
+      selector = serializeSelectorList(selectorAst);
     } else if (v.selector) {
-      selectorTail += v.selector;
+      selector = composeSelector(selector, v.selector);
+      selectorAst = undefined;
+    }
+  }
+
+  if (selectorAst && scaffoldClassReplacements && scaffoldClassReplacements.size > 0) {
+    selectorAst = replaceSelectorClasses(selectorAst, scaffoldClassReplacements);
+    selector = serializeSelectorList(selectorAst);
+  }
+
+  if (selectorAst && resolveRule) {
+    const resolved = resolveRule({
+      selector: selectorAst,
+      baseSelector: baseSelectorAst,
+      className: rule.className,
+      utility: rule.utility.utility,
+      declarations: branch.declarations,
+      variants: branch.variants,
+      atRules: atRulePath,
+      segments: rule.segments ?? [],
+      ...(rule.chunk ? { chunk: rule.chunk } : {}),
+    });
+    if (resolved) {
+      selectorAst = resolved;
+      selector = serializeSelectorList(selectorAst);
     }
   }
 
   return {
     atRulePath,
-    selector: `.${className}${selectorTail}`,
-    isBaseSelector: selectorTail.length === 0,
+    selector,
+    isBaseSelector: selector === baseSelector,
     declarations: branch.declarations,
   };
 }
 
+function composeSelector(selector: string, variant: string): string {
+  return variant.includes('&') ? variant.replaceAll('&', selector) : `${selector}${variant}`;
+}
+
+function addDeclaration(entry: { declarations: Declaration[]; declSet: Set<string> }, declaration: Declaration): void {
+  const key = declarationKey(declaration);
+  if (entry.declSet.has(key)) return;
+
+  for (let i = entry.declarations.length - 1; i >= 0; i--) {
+    const existing = entry.declarations[i]!;
+    if (existing.property !== declaration.property) continue;
+    entry.declSet.delete(declarationKey(existing));
+    entry.declarations.splice(i, 1);
+  }
+
+  entry.declSet.add(key);
+  entry.declarations.push(declaration);
+}
+
+function declarationKey(declaration: Declaration): string {
+  return `${declaration.property}:${declaration.value}`;
+}
+
 function sortDeclarations(decls: readonly Declaration[]): readonly Declaration[] {
   return [...decls].sort((a, b) => a.property.localeCompare(b.property));
 }
diff --git a/packages/compiler/src/tailwind/index.ts b/packages/compiler/src/tailwind/index.ts
index 62f64400..94f38bd2 100644
--- a/packages/compiler/src/tailwind/index.ts
+++ b/packages/compiler/src/tailwind/index.ts
@@ -6,7 +6,6 @@ export type {
 } from './css/render';
 export { type DesignSystem, loadDesignSystem } from './design-system';
 export {
-  type ResolveGroup,
   type TailwindEmitOptions,
   type TailwindMode,
   type TailwindOptions,
@@ -14,6 +13,18 @@ export {
   type TailwindVarsOptions,
   tailwind,
 } from './plugin';
+export type {
+  ResolveClassList,
+  ResolveClassListContext,
+  ResolveElement,
+  ResolveElementContext,
+  ResolveElementResult,
+  ResolveRule,
+  ResolveRuleContext,
+  Selector,
+  SelectorComponent,
+  SelectorList,
+} from './selectors';
 export {
   analyzeUtility,
   type Declaration,
diff --git a/packages/compiler/src/tailwind/plugin.ts b/packages/compiler/src/tailwind/plugin.ts
index cf79befc..69d31d57 100644
--- a/packages/compiler/src/tailwind/plugin.ts
+++ b/packages/compiler/src/tailwind/plugin.ts
@@ -1,32 +1,31 @@
 import { isAbsolute, resolve as resolvePath } from 'node:path';
-import type ts from 'typescript';
+import ts from 'typescript';
 import type { CompilerContext, CompilerPlugin } from '../config';
 import { diagnosticLocationFromNode } from '../diagnostics';
 import { tagName } from '../jsx';
 import {
   buildTokenEnv,
-  classNameScanner,
   collectExtractUtilities,
-  collectUtilities,
   type DeriveClassNameOptions,
   DiagnosticError,
-  defineStylingPlugin,
   deriveClassName,
-  isClassNameStyleReference,
-  type ResolveName,
   type ResolveTokenModule,
+  readStyleAttribute,
   rewriteStyleAttribute,
   type StyleAttributeSegmentsInfo,
-  type StyleResolution,
   type StyleSegment,
-  type StylingPlugin,
-  styling,
   type TokenEnv,
-  type TokenValue,
 } from '../styles';
 import { cssAssets } from './css/assets';
 import { type CompiledRule, type HoistOptions, type RegisteredPropertiesOptions, renderCss } from './css/render';
 import { type DesignSystem, loadDesignSystem } from './design-system';
+import {
+  normalizeResolveElementResult,
+  type ResolveClassList,
+  type ResolveElement,
+  type ResolveElementResult,
+  type ResolveRule,
+} from './selectors';
 import { analyzeUtility, type UtilityCss } from './utility-css';
 
 /** Styling mode for Tailwind-backed className handling. */
@@ -45,25 +44,24 @@ export type TailwindMode =
    */
   | 'extract';
 
-/** Per-rule grouping hook. */
-export type ResolveGroup = (info: { className: string; segments: readonly StyleSegment[] }) => string | undefined;
-
 export interface TailwindResolveOptions {
   /** Resolve bare token imports in skin sources to token modules on disk. Relative imports use the default resolver. */
   tokenModule?: ResolveTokenModule | undefined;
-  /** Resolve the final CSS class name from component/token/literal candidates. */
-  name?: ResolveName | undefined;
-  /** Assign an extracted rule to a logical CSS group. */
-  group?: ResolveGroup | undefined;
+  /** Resolve the semantic CSS class name and optional output chunk for an extracted element. */
+  element?: ResolveElement | undefined;
+  /** Rewrite a composed selector before CSS emission. */
+  rule?: ResolveRule | undefined;
+  /** Rewrite the final static class list written back to JSX. */
+  classList?: ResolveClassList | undefined;
 }
 
 export interface TailwindEmitOptions {
-  /** CSS emission layout. Defaults to merged output. */
-  mode?: 'merged' | 'split';
   /** Base CSS files to prepend to emitted output. */
-  baseCss?: readonly string[];
+  base?: readonly string[];
   /** Directory used to resolve relative base CSS paths. */
   configDir?: string;
+  /** CSS emission layout. Defaults to merged output. */
+  mode?: 'merged' | 'split';
 }
 
 export interface TailwindVarsOptions {
@@ -84,23 +82,21 @@ export interface TailwindOptions {
   input?: string | undefined;
   /** CSS asset name for `'extract'`. Defaults to the compiled source basename with `.css`. */
   output?: string | undefined;
-  /** Resolution hooks for token modules, generated class names, and rule groups. */
+  /** Resolution hooks for token modules, generated class names, and CSS chunks. */
   resolve?: TailwindResolveOptions | undefined;
   /** CSS asset emission options for extract mode. */
   emit?: TailwindEmitOptions | undefined;
   /** CSS custom property handling options for extract mode. */
   vars?: TailwindVarsOptions | undefined;
-  /** Styling pipeline plugins that run around Tailwind's default stages. */
-  plugins?: readonly StylingPlugin[] | undefined;
 }
 
-interface TailwindPipelineState {
+interface TailwindState {
   mode: TailwindMode;
-  sourcePath?: string | undefined;
   design?: DesignSystem | undefined;
-  env?: TokenEnv | undefined;
+  env: TokenEnv;
   rules: CompiledRule[];
   signatures: Map<string, string>;
+  scaffoldClassReplacements: Map<string, string>;
 }
 
 interface TailwindClassNameResolution {
@@ -110,151 +106,190 @@ interface TailwindClassNameResolution {
 }
 
 export function tailwind(options: TailwindOptions = {}): CompilerPlugin {
-  const state: TailwindPipelineState = {
-    mode: options.mode ?? 'preserve',
+  return {
+    name: 'tailwind',
+    async setup(compiler) {
+      const state = await createTailwindState(options, compiler);
+
+      if (state.mode === 'preserve') return {};
+
+      return {
+        transform: createTailwindTransform(options, state),
+        async finish() {
+          const assets = await renderTailwindAssets(options, state, compiler);
+          for (const asset of assets) compiler.addAsset(asset);
+        },
+      };
+    },
+  };
+}
+
+async function createTailwindState(options: TailwindOptions, compiler: CompilerContext): Promise<TailwindState> {
+  const mode = options.mode ?? 'preserve';
+
+  return {
+    mode,
+    ...(mode === 'extract' ? { design: await resolveDesignSystem(options, compiler) } : {}),
+    env: buildTokenEnv(compiler.filename, options.resolve?.tokenModule),
     rules: [],
     signatures: new Map(),
+    scaffoldClassReplacements: new Map(),
+  };
+}
+
+function createTailwindTransform(options: TailwindOptions, state: TailwindState): ts.TransformerFactory<ts.SourceFile> {
+  return (transformContext) => {
+    const factory = transformContext.factory;
+
+    return (sourceFile) => {
+      const visitNode = (node: ts.Node): ts.Node => {
+        if (ts.isJsxElement(node) || ts.isJsxSelfClosingElement(node)) {
+          const visited = transformJsxElement(
+            node as ts.JsxElement | ts.JsxSelfClosingElement,
+            options,
+            state,
+            factory
+          );
+          return ts.visitEachChild(visited, visitNode, transformContext);
+        }
+
+        return ts.visitEachChild(node, visitNode, transformContext);
+      };
+
+      return ts.visitEachChild(sourceFile, visitNode, transformContext);
+    };
+  };
+}
+
+function transformJsxElement(
+  element: ts.JsxElement | ts.JsxSelfClosingElement,
+  options: TailwindOptions,
+  state: TailwindState,
+  factory: ts.NodeFactory
+): ts.JsxElement | ts.JsxSelfClosingElement {
+  const info = readStyleAttribute(element);
+  if (!info || info.kind !== 'segments') return element;
+
+  const data = {
+    info,
+    ...collectExtractUtilities(info.segments, state.env.values),
+  } satisfies TailwindClassNameResolution;
+
+  if (state.mode === 'inline') return transformInlineClassName(data, factory);
+  if (state.mode === 'extract') return transformExtractClassName(data, options, state, factory);
+
+  return element;
+}
+
+function transformInlineClassName(
+  data: TailwindClassNameResolution,
+  factory: ts.NodeFactory
+): ts.JsxElement | ts.JsxSelfClosingElement {
+  if (data.utilities.length === 0) return data.info.element;
+
+  const staticClasses = factory.createStringLiteral(data.utilities.join(' '));
+  const replacement =
+    data.passThrough.length === 0
+      ? staticClasses
+      : factory.createArrayLiteralExpression([staticClasses, ...data.passThrough]);
+
+  return rewriteStyleAttribute(data.info, replacement, factory);
+}
+
+function transformExtractClassName(
+  data: TailwindClassNameResolution,
+  options: TailwindOptions,
+  state: TailwindState,
+  factory: ts.NodeFactory
+): ts.JsxElement | ts.JsxSelfClosingElement {
+  if (!state.design) throw new Error('@videojs/compiler: tailwind extract mode requires `design` or `input`');
+
+  const segments = data.info.segments;
+
+  let elementResolution: ResolveElementResult | undefined;
+
+  const naming: DeriveClassNameOptions = {
+    element: data.info.element,
+    segments,
+    resolveName(context) {
+      elementResolution = normalizeResolveElementResult(options.resolve?.element?.(context));
+      if (elementResolution) return elementResolution.className;
+      return context.defaultName;
+    },
+    ...(state.env.hasSource ? { tokenNamespaces: state.env.namespaces, tokenRoots: state.env.roots } : {}),
   };
 
-  return styling({
-    plugins: [
-      tailwindConfigStage(options, state),
-      classNameScanner(),
-      tailwindResolveStage(state),
-      tailwindTransformStage(options, state),
-      tailwindRenderStage(options, state),
-      ...(options.plugins ?? []),
-    ],
-  });
+  const derived = deriveClassName(naming),
+    chunk = elementResolution?.chunk,
+    explicitSelector = Boolean(elementResolution),
+    preserved: string[] = [],
+    ruleUtilities: string[] = [];
+
+  for (const utility of data.utilities) {
+    const css = analyzeUtility(utility, state.design);
+
+    if (css && css.declarations.length > 0) {
+      ruleUtilities.push(utility);
+      state.rules.push(buildCompiledRule(derived.className, css, segments, chunk));
+      continue;
+    }
+
+    if (!preserved.includes(utility)) preserved.push(utility);
+  }
+
+  registerScaffoldClassReplacements(
+    state.scaffoldClassReplacements,
+    data.utilities,
+    derived.className,
+    data.info.element
+  );
+
+  if (ruleUtilities.length > 0 && !explicitSelector) {
+    const signature = [...ruleUtilities].sort().join(' ');
+    const previous = state.signatures.get(derived.className);
+    if (previous === undefined) {
+      state.signatures.set(derived.className, signature);
+    } else if (previous !== signature) {
+      throw collisionError(data.info.element, derived.className, previous, signature);
+    }
+  }
+
+  const classes = removeReplacedScaffoldClasses([derived.className, ...preserved], state.scaffoldClassReplacements);
+
+  const resolvedClasses =
+    options.resolve?.classList?.({
+      classes,
+      className: derived.className,
+      segments,
+    }) ?? classes;
+
+  const baseName = resolvedClasses.join(' ');
+
+  const replacement =
+    data.passThrough.length === 0
+      ? factory.createStringLiteral(baseName)
+      : factory.createArrayLiteralExpression([factory.createStringLiteral(baseName), ...data.passThrough]);
+
+  return rewriteStyleAttribute(data.info, replacement, factory);
 }
 
-function tailwindConfigStage(options: TailwindOptions, state: TailwindPipelineState): StylingPlugin {
-  return defineStylingPlugin({
-    name: 'tailwind:config',
-    async config(context) {
-      state.mode = options.mode ?? 'preserve';
-      state.sourcePath = context.compiler.filename;
-      state.env = buildTokenEnv(state.sourcePath, options.resolve?.tokenModule);
-      state.rules = [];
-      state.signatures = new Map();
-      if (state.mode === 'extract') {
-        state.design = await resolveDesignSystem(options, context.compiler);
-      }
-    },
+async function renderTailwindAssets(options: TailwindOptions, state: TailwindState, compiler: CompilerContext) {
+  if (state.mode !== 'extract' || state.rules.length === 0 || !state.design) return [];
+  const vars = options.vars;
+
+  const rendered = await renderCss({
+    rules: state.rules,
+    ...(options.emit ?? {}),
+    ...(vars?.hoist !== undefined ? { hoist: vars.hoist } : {}),
+    ...(vars?.inline !== undefined ? { inlineVars: vars.inline } : {}),
+    ...(vars?.properties ? { properties: vars.properties } : {}),
+    ...(options.resolve?.rule ? { resolveRule: options.resolve.rule } : {}),
+    scaffoldClassReplacements: state.scaffoldClassReplacements,
+    resolveThemeVar: (name) => state.design!.resolveThemeVar(name),
+    ...(vars?.hoist ? { themeSelector: vars.hoist.rootSelector } : {}),
   });
-}
 
-function tailwindResolveStage(state: TailwindPipelineState): StylingPlugin {
-  return defineStylingPlugin({
-    name: 'tailwind:resolve',
-    resolve(reference) {
-      if (state.mode === 'preserve') return null;
-      if (!isClassNameStyleReference(reference)) return null;
-      const info = reference.data.info;
-      if (info.kind !== 'segments') return null;
-
-      const env = state.env?.values ?? new Map<string, TokenValue>();
-      if (state.mode === 'inline') {
-        const utilities = collectUtilities(info.segments, env);
-        if (utilities === null) return null;
-        return tailwindResolution(reference, { info, utilities, passThrough: [] });
-      }
-
-      return tailwindResolution(reference, { info, ...collectExtractUtilities(info.segments, env) });
-    },
-  });
-}
-
-function tailwindTransformStage(options: TailwindOptions, state: TailwindPipelineState): StylingPlugin {
-  return defineStylingPlugin({
-    name: 'tailwind:transform',
-    transform(resolution, context) {
-      if (resolution.kind !== 'tailwind:className') return null;
-      const data = resolution.data as TailwindClassNameResolution;
-
-      if (state.mode === 'inline') {
-        return {
-          element: rewriteStyleAttribute(
-            data.info,
-            context.factory.createStringLiteral(data.utilities.join(' ')),
-            context.factory
-          ),
-        };
-      }
-
-      if (state.mode !== 'extract') return null;
-      if (!state.design) throw new Error('@videojs/compiler: tailwind extract mode requires `design` or `input`');
-
-      const segments = data.info.segments;
-      const naming: DeriveClassNameOptions = {
-        element: data.info.element,
-        segments,
-        ...(options.resolve?.name ? { resolveName: options.resolve.name } : {}),
-        ...(state.env?.hasSource ? { tokenNamespaces: state.env.namespaces, tokenRoots: state.env.roots } : {}),
-      };
-      const derived = deriveClassName(naming);
-      const preserved: string[] = [];
-      const ruleUtilities: string[] = [];
-
-      for (const utility of data.utilities) {
-        const css = analyzeUtility(utility, state.design);
-        if (css && css.declarations.length > 0) {
-          ruleUtilities.push(utility);
-          state.rules.push(buildCompiledRule(derived.className, css, segments, options.resolve?.group));
-          continue;
-        }
-        if (!preserved.includes(utility)) preserved.push(utility);
-      }
-
-      if (ruleUtilities.length > 0) {
-        const signature = [...ruleUtilities].sort().join(' ');
-        const previous = state.signatures.get(derived.className);
-        if (previous === undefined) {
-          state.signatures.set(derived.className, signature);
-        } else if (previous !== signature) {
-          throw collisionError(data.info.element, derived.className, previous, signature);
-        }
-      }
-
-      const baseName = preserved.length > 0 ? `${derived.className} ${preserved.join(' ')}` : derived.className;
-      const replacement =
-        data.passThrough.length === 0
-          ? context.factory.createStringLiteral(baseName)
-          : context.factory.createArrayLiteralExpression([
-              context.factory.createStringLiteral(baseName),
-              ...data.passThrough,
-            ]);
-
-      return { element: rewriteStyleAttribute(data.info, replacement, context.factory) };
-    },
-  });
-}
-
-function tailwindRenderStage(options: TailwindOptions, state: TailwindPipelineState): StylingPlugin {
-  return defineStylingPlugin({
-    name: 'tailwind:render',
-    async render(_bundle, context) {
-      if (state.mode !== 'extract' || state.rules.length === 0 || !state.design) return null;
-      const vars = options.vars;
-      const rendered = await renderCss({
-        rules: state.rules,
-        ...(options.emit ?? {}),
-        ...(vars?.hoist !== undefined ? { hoist: vars.hoist } : {}),
-        ...(vars?.inline !== undefined ? { inlineVars: vars.inline } : {}),
-        ...(vars?.properties ? { properties: vars.properties } : {}),
-        resolveThemeVar: (name) => state.design!.resolveThemeVar(name),
-        ...(vars?.hoist ? { themeSelector: vars.hoist.rootSelector } : {}),
-      });
-      return cssAssets(context.compiler, options.output, rendered);
-    },
-  });
-}
-
-function tailwindResolution(
-  reference: StyleResolution['reference'],
-  data: TailwindClassNameResolution
-): StyleResolution<TailwindClassNameResolution> {
-  return { kind: 'tailwind:className', reference, data };
+  return cssAssets(compiler, options.output, rendered);
 }
 
 async function resolveDesignSystem(options: TailwindOptions, context: CompilerContext): Promise<DesignSystem> {
@@ -270,10 +305,39 @@ function buildCompiledRule(
   className: string,
   utility: UtilityCss,
   segments: readonly StyleSegment[],
-  resolveGroup: ResolveGroup | undefined
+  chunk: string | undefined
 ): CompiledRule {
-  const group = resolveGroup?.({ className, segments });
-  return group === undefined ? { className, utility } : { className, utility, group };
+  return chunk === undefined ? { className, utility, segments } : { className, utility, segments, chunk };
+}
+
+function registerScaffoldClassReplacements(
+  replacements: Map<string, string>,
+  utilities: readonly string[],
+  className: string,
+  element: ts.Node
+): void {
+  for (const utility of utilities) {
+    if (!isTailwindScaffoldClass(utility)) continue;
+    const previous = replacements.get(utility);
+    if (!previous) {
+      replacements.set(utility, className);
+      continue;
+    }
+    if (previous !== className) throw scaffoldClassReplacementConflictError(element, utility, previous, className);
+  }
+}
+
+function removeReplacedScaffoldClasses(
+  classes: readonly string[],
+  replacements: ReadonlyMap<string, string>
+): readonly string[] {
+  return classes.filter((className) => !replacements.has(className));
+}
+
+function isTailwindScaffoldClass(className: string): boolean {
+  return (
+    className === 'group' || className === 'peer' || className.startsWith('group/') || className.startsWith('peer/')
+  );
 }
 
 function collisionError(element: ts.Node, className: string, first: string, next: string): DiagnosticError {
@@ -284,7 +348,23 @@ function collisionError(element: ts.Node, className: string, first: string, next
       `  <${tag}> resolves to: ${next}\n` +
       `  an earlier element resolved to: ${first}\n` +
       `Merging these would put conflicting declarations in a single '.${className}' rule. ` +
-      `Disambiguate with a distinct token, a distinct component, or \`resolve.name\`.`,
+      `Disambiguate with a distinct token, a distinct component, or \`resolve.element\`.`,
     { ...diagnosticLocationFromNode(element), diagnosticCode: 'style-class-collision' }
   );
 }
+
+function scaffoldClassReplacementConflictError(
+  element: ts.Node,
+  scaffoldClass: string,
+  first: string,
+  next: string
+): DiagnosticError {
+  return new DiagnosticError(
+    `style extraction: Tailwind scaffold class '${scaffoldClass}' maps to multiple generated classes` +
+      `.\n` +
+      `  first replacement: .${first}\n` +
+      `  next replacement: .${next}\n` +
+      `Use a named marker such as \`group/${next}\` or customize \`resolve.rule\` and \`resolve.classList\`.`,
+    { ...diagnosticLocationFromNode(element), diagnosticCode: 'style-scaffold-class-replacement-collision' }
+  );
+}
diff --git a/packages/compiler/src/tailwind/selectors.ts b/packages/compiler/src/tailwind/selectors.ts
new file mode 100644
index 00000000..44c5cac3
--- /dev/null
+++ b/packages/compiler/src/tailwind/selectors.ts
@@ -0,0 +1,282 @@
+import { type Selector, type SelectorComponent, type SelectorList, transform } from 'lightningcss';
+import type { NameContext, StyleSegment } from '../styles';
+import type { Declaration, Variant } from './utility-css';
+
+const encoder = new TextEncoder();
+const decoder = new TextDecoder();
+
+export type { Selector, SelectorComponent, SelectorList } from 'lightningcss';
+
+export interface ResolveElementResult {
+  className: string;
+  chunk?: string | undefined;
+}
+
+export interface ResolveElementContext extends NameContext {}
+
+export interface ResolveRuleContext {
+  selector: SelectorList;
+  baseSelector: SelectorList;
+  className: string;
+  utility: string;
+  declarations: readonly Declaration[];
+  variants: readonly Variant[];
+  atRules: readonly string[];
+  segments: readonly StyleSegment[];
+  chunk?: string | undefined;
+}
+
+export interface ResolveClassListContext {
+  classes: readonly string[];
+  className: string;
+  segments: readonly StyleSegment[];
+}
+
+export type ResolveElement = (context: ResolveElementContext) => ResolveElementResult | string | null | undefined;
+export type ResolveRule = (context: ResolveRuleContext) => SelectorList | null | undefined;
+export type ResolveClassList = (context: ResolveClassListContext) => readonly string[] | null | undefined;
+
+export function normalizeResolveElementResult(
+  resolution: ResolveElementResult | string | null | undefined
+): ResolveElementResult | undefined {
+  if (resolution == null) return undefined;
+  return typeof resolution === 'string' ? { className: resolution } : resolution;
+}
+
+export function selectorListForClass(className: string): SelectorList {
+  return [[{ type: 'class', name: className }]];
+}
+
+export function composeSelectorLists(base: SelectorList, variant: SelectorList | undefined): SelectorList {
+  if (!variant) return cloneSelectorList(base);
+
+  const out: SelectorList = [];
+
+  for (const variantSelector of variant) {
+    if (hasNesting(variantSelector)) {
+      for (const baseSelector of base) {
+        out.push(replaceNesting(variantSelector, baseSelector));
+      }
+      continue;
+    }
+
+    for (const baseSelector of base) {
+      out.push([...cloneSelector(baseSelector), ...cloneSelector(variantSelector)]);
+    }
+  }
+
+  return out;
+}
+
+export function serializeSelectorList(selectors: SelectorList): string {
+  const result = transform({
+    filename: 'selector.css',
+    code: encoder.encode('.x { color: red; }'),
+    visitor: {
+      Rule: {
+        style(rule) {
+          return { ...rule, value: { ...rule.value, selectors } };
+        },
+      },
+    },
+  });
+
+  const css = decoder.decode(result.code).trim();
+  const open = css.indexOf('{');
+
+  return open === -1 ? css : css.slice(0, open).trim();
+}
+
+export function cloneSelectorList(selectors: SelectorList): SelectorList {
+  return selectors.map(cloneSelector);
+}
+
+export function replaceSelectorClasses(
+  selectors: SelectorList,
+  replacements: ReadonlyMap<string, string>
+): SelectorList {
+  if (replacements.size === 0) return cloneSelectorList(selectors);
+
+  return mapSelectorList(selectors, (component) => {
+    if (component.type !== 'class') return component;
+    const replacement = replacements.get(component.name);
+    return replacement ? { ...component, name: replacement } : component;
+  });
+}
+
+function cloneSelector(selector: Selector): Selector {
+  return selector.map(cloneSelectorComponent);
+}
+
+function cloneSelectorComponent(component: SelectorComponent): SelectorComponent {
+  return JSON.parse(JSON.stringify(component)) as SelectorComponent;
+}
+
+function hasNesting(selector: Selector): boolean {
+  return selector.some(selectorComponentHasNesting);
+}
+
+function replaceNesting(selector: Selector, base: Selector): Selector {
+  const out: Selector = [];
+  for (const component of selector) {
+    if (component.type === 'nesting') {
+      out.push(...cloneSelector(base));
+      continue;
+    }
+    out.push(replaceNestedNestingComponent(component, base));
+  }
+  return out;
+}
+
+function selectorComponentHasNesting(component: SelectorComponent): boolean {
+  if (component.type === 'nesting') return true;
+
+  if (component.type === 'pseudo-class') {
+    if (
+      component.kind === 'not' ||
+      component.kind === 'where' ||
+      component.kind === 'is' ||
+      component.kind === 'any' ||
+      component.kind === 'has'
+    ) {
+      return selectorListHasNesting(component.selectors);
+    }
+    if (component.kind === 'host') return component.selectors ? hasNesting(component.selectors) : false;
+    if (component.kind === 'nth-child' || component.kind === 'nth-last-child') {
+      return component.of ? selectorListHasNesting(component.of) : false;
+    }
+    if (component.kind === 'local' || component.kind === 'global') return hasNesting(component.selector);
+  }
+
+  if (
+    component.type === 'pseudo-element' &&
+    (component.kind === 'slotted' || component.kind === 'cue-function' || component.kind === 'cue-region-function')
+  ) {
+    return hasNesting(component.selector);
+  }
+
+  return false;
+}
+
+function selectorListHasNesting(selectors: SelectorList): boolean {
+  return selectors.some(hasNesting);
+}
+
+function replaceNestedNestingComponent(component: SelectorComponent, base: Selector): SelectorComponent {
+  if (component.type === 'pseudo-class') {
+    if (
+      component.kind === 'not' ||
+      component.kind === 'where' ||
+      component.kind === 'is' ||
+      component.kind === 'any' ||
+      component.kind === 'has'
+    ) {
+      return {
+        ...component,
+        selectors: component.selectors.map((selector) => replaceNesting(selector, base)),
+      };
+    }
+    if (component.kind === 'host') {
+      if (!component.selectors) return component;
+      return {
+        ...component,
+        selectors: replaceNesting(component.selectors, base),
+      };
+    }
+    if (component.kind === 'nth-child' || component.kind === 'nth-last-child') {
+      if (!component.of) return component;
+      return {
+        ...component,
+        of: component.of.map((selector) => replaceNesting(selector, base)),
+      };
+    }
+    if (component.kind === 'local' || component.kind === 'global') {
+      return {
+        ...component,
+        selector: replaceNesting(component.selector, base),
+      };
+    }
+  }
+
+  if (
+    component.type === 'pseudo-element' &&
+    (component.kind === 'slotted' || component.kind === 'cue-function' || component.kind === 'cue-region-function')
+  ) {
+    return {
+      ...component,
+      selector: replaceNesting(component.selector, base),
+    };
+  }
+
+  return cloneSelectorComponent(component);
+}
+
+function mapSelectorList(
+  selectors: SelectorList,
+  map: (component: SelectorComponent) => SelectorComponent
+): SelectorList {
+  return selectors.map((selector) => selector.map((component) => mapNestedSelectorComponent(map(component), map)));
+}
+
+function mapNestedSelectorComponent(
+  component: SelectorComponent,
+  map: (component: SelectorComponent) => SelectorComponent
+): SelectorComponent {
+  if (component.type === 'pseudo-class') {
+    if (
+      component.kind === 'not' ||
+      component.kind === 'where' ||
+      component.kind === 'is' ||
+      component.kind === 'any' ||
+      component.kind === 'has'
+    ) {
+      return {
+        ...component,
+        selectors: mapNestedSelectorList(component.selectors, map),
+      };
+    }
+    if (component.kind === 'host') {
+      if (!component.selectors) return component;
+      return {
+        ...component,
+        selectors: mapNestedSelector(component.selectors, map),
+      };
+    }
+    if (component.kind === 'nth-child' || component.kind === 'nth-last-child') {
+      if (!component.of) return component;
+      return {
+        ...component,
+        of: mapNestedSelectorList(component.of, map),
+      };
+    }
+    if (component.kind === 'local' || component.kind === 'global') {
+      return {
+        ...component,
+        selector: mapNestedSelector(component.selector, map),
+      };
+    }
+  }
+
+  if (
+    component.type === 'pseudo-element' &&
+    (component.kind === 'slotted' || component.kind === 'cue-function' || component.kind === 'cue-region-function')
+  ) {
+    return {
+      ...component,
+      selector: mapNestedSelector(component.selector, map),
+    };
+  }
+
+  return component;
+}
+
+function mapNestedSelector(selector: Selector, map: (component: SelectorComponent) => SelectorComponent): Selector {
+  return selector.map((child) => mapNestedSelectorComponent(map(child), map));
+}
+
+function mapNestedSelectorList(
+  selectors: SelectorList,
+  map: (component: SelectorComponent) => SelectorComponent
+): SelectorList {
+  return selectors.map((selector) => mapNestedSelector(selector, map));
+}
diff --git a/packages/compiler/src/tailwind/tests/emit.test.ts b/packages/compiler/src/tailwind/tests/emit.test.ts
index 9b7e3594..0b8754c5 100644
--- a/packages/compiler/src/tailwind/tests/emit.test.ts
+++ b/packages/compiler/src/tailwind/tests/emit.test.ts
@@ -11,10 +11,10 @@ function rule(
   className: string,
   declarations: { property: string; value: string }[],
   variants: any[] = [],
-  group?: string
+  chunk?: string
 ): CompiledRule {
   const utility = { utility: 'mock', branches: [{ declarations, variants }], declarations, variants };
-  return group === undefined ? { className, utility } : { className, utility, group };
+  return chunk === undefined ? { className, utility } : { className, utility, chunk };
 }
 
 function branchedRule(
@@ -48,6 +48,17 @@ describe('emitCss — merged mode', () => {
     expect(out.kind === 'merged' && collapse(out.css)).toContain(collapse('.foo{display:flex;gap:1rem;}'));
   });
 
+  it('keeps the last declaration when merged rules set the same property', async () => {
+    const out = await emitCss({
+      rules: [
+        rule('foo', [{ property: 'display', value: 'flex' }]),
+        rule('foo', [{ property: 'display', value: 'grid' }]),
+      ],
+    });
+    expect(out.kind === 'merged' && collapse(out.css)).toContain(collapse('.foo{display:grid;}'));
+    expect(out.kind === 'merged' && out.css).not.toContain('display: flex');
+  });
+
   it('collapses selectors with identical declarations into a comma list', async () => {
     const out = await emitCss({
       rules: [
@@ -80,6 +91,27 @@ describe('emitCss — merged mode', () => {
     expect(out.kind === 'merged' && collapse(out.css)).toContain(collapse('.foo:hover{opacity:1;}'));
   });
 
+  it('resolves nesting placeholders in selector variants', async () => {
+    const variant = {
+      kind: 'descendant' as const,
+      selector: ':is(& > *)',
+      selectorAst: [
+        [
+          {
+            type: 'pseudo-class',
+            kind: 'is',
+            selectors: [[{ type: 'nesting' }, { type: 'combinator', value: 'child' }, { type: 'universal' }]],
+          },
+        ],
+      ],
+      raw: ':is(& > *)',
+    };
+    const out = await emitCss({
+      rules: [rule('foo', [{ property: 'opacity', value: '1' }], [variant])],
+    });
+    expect(out.kind === 'merged' && collapse(out.css)).toContain(collapse(':is(.foo > *){opacity:1;}'));
+  });
+
   it('composes nested at-rule + selector variants', async () => {
     const variants = [
       { kind: 'pseudo' as const, selector: ':hover', raw: ':hover' },
@@ -132,7 +164,7 @@ describe('emitCss — merged mode', () => {
 });
 
 describe('emitCss — split mode', () => {
-  it('groups rules by group', async () => {
+  it('splits rules by chunk', async () => {
     const out = await emitCss({
       mode: 'split',
       rules: [
@@ -142,12 +174,12 @@ describe('emitCss — split mode', () => {
     });
     expect(out.kind).toBe('split');
     if (out.kind !== 'split') return;
-    expect(out.groups.size).toBe(2);
-    expect(collapse(out.groups.get('one')!)).toContain(collapse('.a{color:red;}'));
-    expect(collapse(out.groups.get('two')!)).toContain(collapse('.b{color:blue;}'));
+    expect(out.chunks.size).toBe(2);
+    expect(collapse(out.chunks.get('one')!)).toContain(collapse('.a{color:red;}'));
+    expect(collapse(out.chunks.get('two')!)).toContain(collapse('.b{color:blue;}'));
   });
 
-  it('emits an index with @import lines for each group in stable order', async () => {
+  it('emits an index with @import lines for each chunk in stable order', async () => {
     const out = await emitCss({
       mode: 'split',
       rules: [
@@ -163,7 +195,7 @@ describe('emitCss — split mode', () => {
     expect(oneIdx).toBeLessThan(twoIdx);
   });
 
-  it('uses safe file stems for empty, reserved, and path-like groups', async () => {
+  it('uses safe file stems for empty, reserved, and path-like chunks', async () => {
     const out = await emitCss({
       mode: 'split',
       rules: [
@@ -174,20 +206,20 @@ describe('emitCss — split mode', () => {
       ],
     });
     if (out.kind !== 'split') throw new Error('expected split');
-    expect([...out.groups.keys()].sort()).toEqual(['_default', '_index', 'controls', 'controls-2']);
+    expect([...out.chunks.keys()].sort()).toEqual(['_default', '_index', 'controls', 'controls-2']);
     expect(out.index).not.toContain('./index.css');
     expect(out.index).not.toContain('..');
   });
 });
 
-describe('emitCss — baseCss prepend', () => {
+describe('emitCss — base prepend', () => {
   it('prepends a single base CSS file (read via Lightning)', async () => {
     const dir = mkdtempSync(join(tmpdir(), 'emit-css-'));
     const basePath = join(dir, 'base.css');
     writeFileSync(basePath, '.base { color: green; }', 'utf8');
     const out = await emitCss({
       rules: [rule('foo', [{ property: 'display', value: 'flex' }])],
-      baseCss: [basePath],
+      base: [basePath],
     });
     expect(out.kind === 'merged' && out.css.indexOf('.base') < out.css.indexOf('.foo')).toBe(true);
   });
@@ -200,7 +232,7 @@ describe('emitCss — baseCss prepend', () => {
     writeFileSync(outer, '@import "./inner.css";\n.from-outer { color: red; }', 'utf8');
     const out = await emitCss({
       rules: [rule('foo', [{ property: 'display', value: 'flex' }])],
-      baseCss: [outer],
+      base: [outer],
     });
     if (out.kind !== 'merged') throw new Error('expected merged');
     expect(out.css).toContain('.from-inner');
@@ -208,7 +240,7 @@ describe('emitCss — baseCss prepend', () => {
     expect(out.css).not.toContain('@import');
   });
 
-  it('puts baseCss in index only (split mode), not duplicated across groups', async () => {
+  it('puts base in index only (split mode), not duplicated across chunks', async () => {
     const dir = mkdtempSync(join(tmpdir(), 'emit-css-split-base-'));
     const basePath = join(dir, 'base.css');
     writeFileSync(basePath, '.base { color: green; }', 'utf8');
@@ -218,20 +250,21 @@ describe('emitCss — baseCss prepend', () => {
         rule('a', [{ property: 'color', value: 'red' }], [], 'one'),
         rule('b', [{ property: 'color', value: 'blue' }], [], 'two'),
       ],
-      baseCss: [basePath],
+      base: [basePath],
     });
     if (out.kind !== 'split') throw new Error('expected split');
     expect(out.index).toContain('.base');
-    expect(out.groups.get('one')!).not.toContain('.base');
-    expect(out.groups.get('two')!).not.toContain('.base');
+    expect(out.index.indexOf('@import "./one.css"')).toBeLessThan(out.index.indexOf('.base'));
+    expect(out.chunks.get('one')!).not.toContain('.base');
+    expect(out.chunks.get('two')!).not.toContain('.base');
   });
 
-  it('resolves relative baseCss paths against configDir', async () => {
+  it('resolves relative base paths against configDir', async () => {
     const dir = mkdtempSync(join(tmpdir(), 'emit-css-relpath-'));
     writeFileSync(join(dir, 'base.css'), '.base { color: green; }', 'utf8');
     const out = await emitCss({
       rules: [rule('foo', [{ property: 'display', value: 'flex' }])],
-      baseCss: ['./base.css'],
+      base: ['./base.css'],
       configDir: dir,
     });
     expect(out.kind === 'merged' && out.css).toContain('.base');
diff --git a/packages/compiler/src/tailwind/tests/output-modes.test.ts b/packages/compiler/src/tailwind/tests/output-modes.test.ts
index f17f7cf0..7eaf6ef2 100644
--- a/packages/compiler/src/tailwind/tests/output-modes.test.ts
+++ b/packages/compiler/src/tailwind/tests/output-modes.test.ts
@@ -69,6 +69,8 @@ export function Fixture() {
 }
 `;
 
+const compact = (value: string): string => value.replace(/\s+/g, '');
+
 let workDir: string;
 let sourcePath: string;
 let cssPath: string;
@@ -109,6 +111,30 @@ describe('tailwind output modes', () => {
     `);
   });
 
+  it('inlines static token segments while preserving runtime class expressions', async () => {
+    const result = await compileSource(
+      `import { styles } from './tokens';
+
+export function Fixture({ className }: { className?: string }) {
+  return <Controls className={[styles.controls, className]} />;
+}
+`,
+      {
+        filename: sourcePath,
+        configDir: workDir,
+        config: { plugins: [tailwind({ mode: 'inline' })] },
+      }
+    );
+
+    expect(result.assets).toEqual([]);
+    expect(result.code).not.toContain('styles.');
+    expect(compact(result.code)).toContain(
+      compact(
+        '<Controls className={["flex flex-wrap [--media-popover-side-offset:0.5rem] pointer-fine:transition-[scale,filter,opacity] motion-reduce:[--media-controls-transition-duration:50ms] contrast-more:[--media-surface-background-color:oklch(0_0_0)] [@media(prefers-reduced-transparency:reduce)]:[--media-surface-background-color:oklch(0_0_0)] @2xl/media-root:flex-nowrap", className]} />'
+      )
+    );
+  });
+
   it('extracts static utilities to scoped vanilla CSS assets', async () => {
     const result = await compileSource(SOURCE, {
       filename: sourcePath,
@@ -133,7 +159,7 @@ describe('tailwind output modes', () => {
       "export function Fixture() {
           return (<FixtureRoot className="fixture-root">
             <Controls className="controls">
-              <Button className="button group">
+              <Button className="button">
                 <Icon className="icon"/>
               </Button>
               <div className="thumbnail"/>
@@ -164,12 +190,12 @@ describe('tailwind output modes', () => {
         position: relative;
       }
 
-      .button::after {
+      .button:after {
         content: "";
         position: absolute;
       }
 
-      .button::before {
+      .button:before {
         content: 'x';
         position: absolute;
       }
@@ -215,11 +241,11 @@ describe('tailwind output modes', () => {
         opacity: 0%;
       }
 
-      .icon:is(:where(.group):not(*[data-paused]) *) {
+      .icon:is(:where(.button):not([data-paused]) *) {
         opacity: 0%;
       }
 
-      .icon:is(:where(.group)[data-paused] *) {
+      .icon:is(:where(.button)[data-paused] *) {
         display: block;
         opacity: 100%;
       }
@@ -229,7 +255,7 @@ describe('tailwind output modes', () => {
         position: absolute;
       }
 
-      .thumbnail:has(*:is([role=img]:not([data-hidden]))) {
+      .thumbnail:has([role="img"]:not([data-hidden])) {
         opacity: 100%;
       }
 
diff --git a/packages/compiler/src/tailwind/tests/plugin.test.ts b/packages/compiler/src/tailwind/tests/plugin.test.ts
index 27e1cec6..a64e1fe8 100644
--- a/packages/compiler/src/tailwind/tests/plugin.test.ts
+++ b/packages/compiler/src/tailwind/tests/plugin.test.ts
@@ -149,24 +149,22 @@ describe('tailwindPlugin — mode: extract', () => {
     expect(code).not.toContain('"flex items-center"');
   });
 
-  it('preserves group marker classes', async () => {
+  it('removes inferred group marker classes', async () => {
     const source = `function App(){ return <PlayButton className="group"/>; }`;
     const { code } = await compile(source, {
       target: 'jsx',
       plugins: [tailwindPlugin({ design, mode: 'extract' })],
     });
-    // `group` produces no declarations but is required by descendant
-    // `group-*` variants, so it must survive on the element.
-    expect(code).toContain('"play-button group"');
+    expect(code).toContain('"play-button"');
   });
 
-  it('extracts className array utilities and preserves group marker classes', async () => {
+  it('extracts className array utilities and removes inferred group marker classes', async () => {
     const source = `function App(){ return <PlayButton className={['flex', 'group']}/>; }`;
     const { assets, code } = await compile(source, {
       target: 'jsx',
       plugins: [tailwindPlugin({ design, mode: 'extract' })],
     });
-    expect(code).toContain('"play-button group"');
+    expect(code).toContain('"play-button"');
     expect(collapse(assets[0]!.source)).toContain(collapse('.play-button{display:flex;}'));
   });
 
@@ -176,7 +174,78 @@ describe('tailwindPlugin — mode: extract', () => {
       target: 'jsx',
       plugins: [tailwindPlugin({ design, mode: 'extract' })],
     });
-    expect(code).toMatch(/className=\{\["play-button group",\s*extra\]\}/);
+    expect(code).toMatch(/className=\{\["play-button",\s*extra\]\}/);
+  });
+
+  it('resolves elements and rewrites inferred marker selectors', async () => {
+    const source = `function App(){ return <PlayButton className="group/button"><PlayIcon className="hidden group-data-paused/button:block"/></PlayButton>; }`;
+    const { assets, code } = await compile(source, {
+      target: 'jsx',
+      plugins: [
+        tailwindPlugin({
+          design,
+          mode: 'extract',
+          resolve: {
+            element({ tag }) {
+              if (tag === 'PlayButton') return { className: 'media-button', chunk: 'button' };
+              if (tag === 'PlayIcon') return { className: 'media-play-icon', chunk: 'button' };
+              return undefined;
+            },
+          },
+        }),
+      ],
+    });
+
+    expect(code).toContain('<PlayButton className="media-button">');
+    expect(code).toContain('<PlayIcon className="media-play-icon"/>');
+    expect(code).not.toContain('group/button');
+    expect(collapse(assets[0]!.source)).toContain(
+      collapse('.media-play-icon:is(:where(.media-button)[data-paused] *){display:block;}')
+    );
+  });
+
+  it('lets resolve.classList customize final static class lists', async () => {
+    const source = `function App(){ return <PlayButton className="flex legacy-marker"/>; }`;
+    const { code } = await compile(source, {
+      target: 'jsx',
+      plugins: [
+        tailwindPlugin({
+          design,
+          mode: 'extract',
+          resolve: {
+            classList({ classes }) {
+              return classes.filter((name) => name !== 'legacy-marker');
+            },
+          },
+        }),
+      ],
+    });
+
+    expect(code).toContain('<PlayButton className="play-button"/>');
+  });
+
+  it('uses selector resolution chunks for split CSS assets', async () => {
+    const source = `function App(){ return <PlayButton className="flex"/>; }`;
+    const { assets } = await compile(source, {
+      target: 'jsx',
+      plugins: [
+        tailwindPlugin({
+          design,
+          mode: 'extract',
+          emit: { mode: 'split' },
+          resolve: {
+            element() {
+              return { className: 'media-button', chunk: 'button' };
+            },
+          },
+        }),
+      ],
+    });
+
+    expect(assets.map((asset) => asset.fileName).sort()).toEqual(['button.css', 'input.css']);
+    expect(collapse(assets.find((asset) => asset.fileName === 'button.css')!.source)).toContain(
+      collapse('.media-button{display:flex;}')
+    );
   });
 
   it('throws on generated class style collisions', async () => {
@@ -189,6 +258,28 @@ describe('tailwindPlugin — mode: extract', () => {
     ).rejects.toThrow(/class name 'seek-icon' is derived from elements with different styles/);
   });
 
+  it('allows selector-owned class merges', async () => {
+    const source = `function App(){ return <div><PlayButton className="flex"/><SeekButton className="flex relative"/></div>; }`;
+    const { assets, code } = await compile(source, {
+      target: 'jsx',
+      plugins: [
+        tailwindPlugin({
+          design,
+          mode: 'extract',
+          resolve: {
+            element() {
+              return 'media-button';
+            },
+          },
+        }),
+      ],
+    });
+
+    expect(code).toContain('<PlayButton className="media-button"/>');
+    expect(code).toContain('<SeekButton className="media-button"/>');
+    expect(collapse(assets[0]!.source)).toContain(collapse('.media-button{display:flex;position:relative;}'));
+  });
+
   it('allows preserved marker classes next to matching generated styles', async () => {
     const source = `function App(){ return <div><Menu.Item className={['flex', 'legacy-submenu']}/><Menu.Item className="flex"/></div>; }`;
     const { code } = await compile(source, {
@@ -333,7 +424,7 @@ function App({ type, className }){
           design,
           mode: 'extract',
           resolve: {
-            name: (ctx) => `app-${ctx.defaultName}`,
+            element: (ctx) => `app-${ctx.defaultName}`,
           },
         }),
       ],
@@ -341,7 +432,7 @@ function App({ type, className }){
     expect(code).toContain('"app-play-button"');
   });
 
-  it('lets resolve.name choose token names for component elements', async () => {
+  it('lets resolve.element choose token names for component elements', async () => {
     const source = `function App(){ return <PlayButton className={styles.button.icon}/>; }`;
     const { code } = await compile(source, {
       target: 'jsx',
@@ -350,7 +441,7 @@ function App({ type, className }){
           design,
           mode: 'extract',
           resolve: {
-            name: (ctx) => ctx.tokenName ?? ctx.defaultName,
+            element: (ctx) => ctx.tokenName ?? ctx.defaultName,
           },
         }),
       ],
@@ -358,7 +449,7 @@ function App({ type, className }){
     expect(code).toContain('"button-icon"');
   });
 
-  it('lets resolve.name choose component names over known token roots', async () => {
+  it('lets resolve.element choose component names over known token roots', async () => {
     writeFixture(
       'tokens.ts',
       `export const menu = { chevron: 'size-3' };
@@ -376,7 +467,7 @@ function App(){ return <ChevronIcon className={menu.chevron}/>; }`;
           design,
           mode: 'extract',
           resolve: {
-            name: (ctx) => ctx.componentName ?? ctx.defaultName,
+            element: (ctx) => ctx.componentName ?? ctx.defaultName,
           },
         }),
       ],
@@ -468,7 +559,7 @@ function App(){ return <Foo className={styles.button}/>; }`;
     expect(collapse(assets[0]!.source)).toContain(collapse('.button{display:flex;gap:calc(var(--spacing) * 2);}'));
   });
 
-  it('assigns rule groups with resolve.group', async () => {
+  it('assigns split chunks with resolve.element', async () => {
     const source = `function App(){ return <PlayButton className="flex"/>; }`;
     const { assets } = await compile(source, {
       target: 'jsx',
@@ -478,7 +569,9 @@ function App(){ return <Foo className={styles.button}/>; }`;
           mode: 'extract',
           emit: { mode: 'split' },
           resolve: {
-            group: ({ className }) => (className.startsWith('play-') ? 'controls' : undefined),
+            element({ defaultName }) {
+              return defaultName.startsWith('play-') ? { className: defaultName, chunk: 'controls' } : defaultName;
+            },
           },
         }),
       ],
diff --git a/packages/compiler/src/tailwind/tests/utility-css.test.ts b/packages/compiler/src/tailwind/tests/utility-css.test.ts
index f134b084..61ec2bf5 100644
--- a/packages/compiler/src/tailwind/tests/utility-css.test.ts
+++ b/packages/compiler/src/tailwind/tests/utility-css.test.ts
@@ -108,6 +108,18 @@ describe('analyzeUtility — variants', () => {
     expect(peer).toBeDefined();
     expect(peer!.selector).toContain('peer');
   });
+
+  it('captures child and descendant variants', () => {
+    const child = analyzeUtility('*:opacity-50', design);
+    const descendant = analyzeUtility('**:mix-blend-difference', design);
+
+    expect(child).not.toBeNull();
+    expect(child!.variants[0]).toMatchObject({ kind: 'descendant' });
+    expect(child!.variants[0]!.selector).toContain('&');
+    expect(descendant).not.toBeNull();
+    expect(descendant!.variants[0]).toMatchObject({ kind: 'descendant' });
+    expect(descendant!.variants[0]!.selector).toContain('&');
+  });
 });
 
 describe('analyzeUtility — branches', () => {
diff --git a/packages/compiler/src/tailwind/utility-css.ts b/packages/compiler/src/tailwind/utility-css.ts
index 66c2e91d..5f4b5033 100644
--- a/packages/compiler/src/tailwind/utility-css.ts
+++ b/packages/compiler/src/tailwind/utility-css.ts
@@ -41,6 +41,8 @@ export interface Variant {
   kind: VariantKind;
   /** Selector segment this variant adds, if any. */
   selector?: string;
+  /** Lightning CSS selector AST for this variant, if any. */
+  selectorAst?: CssSelectorList;
   /** At-rule wrapper, if any. */
   atRule?: { name: string; params: string };
   /** Original raw form (for diagnostics + emit). */
@@ -100,6 +102,7 @@ export function analyzeUtility(utility: string, design: DesignSystem): UtilityCs
 
   const stylesheet = parseStyleSheet(css);
   if (!stylesheet) return null;
+
   const context = createAnalysisContext(css);
 
   const branches: UtilityCssBranch[] = [];
@@ -117,6 +120,7 @@ export function analyzeUtility(utility: string, design: DesignSystem): UtilityCs
 
 function parseStyleSheet(css: string): CssStyleSheet | null {
   let stylesheet: CssStyleSheet | undefined;
+
   try {
     transform({
       filename: 'tailwind-utility.css',
@@ -130,6 +134,7 @@ function parseStyleSheet(css: string): CssStyleSheet | null {
   } catch {
     return null;
   }
+
   return stylesheet ?? null;
 }
 
@@ -289,7 +294,7 @@ function selectorTailFromStyleRule(rule: CssStyleRule, context: AnalysisContext)
 
 function selectorVariantFromStyleRule(rule: CssStyleRule, context: AnalysisContext): Variant {
   const tail = selectorTailFromStyleRule(rule, context);
-  return classifySelector(rule.selectors, tail);
+  return classifySelector(rule.selectors, tail, rule.selectors);
 }
 
 function collectProperties(rules: readonly CssRule[], context: AnalysisContext): PropertyRule[] {
@@ -571,21 +576,26 @@ function readBalancedBlock(body: string, openIdx: number): BalancedBlock | null
   return null;
 }
 
-function classifySelector(selectors: CssSelectorList, tail: string): Variant {
+function classifySelector(selectors: CssSelectorList, tail: string, selectorAst: CssSelectorList): Variant {
   const components = selectorTailComponents(selectors[0] ?? []);
 
-  if (selectorContainsClass(components, 'group')) return { kind: 'group', selector: tail, raw: tail };
-  if (selectorContainsClass(components, 'peer')) return { kind: 'peer', selector: tail, raw: tail };
-  if (components.some((component) => component.type === 'attribute')) {
-    return { kind: 'attribute', selector: tail, raw: tail };
+  if (selectorContainsClass(components, 'group')) return { kind: 'group', selector: tail, selectorAst, raw: tail };
+  if (selectorContainsClass(components, 'peer')) return { kind: 'peer', selector: tail, selectorAst, raw: tail };
+  if (selectorContainsComponent(components, (component) => component.type === 'attribute')) {
+    return { kind: 'attribute', selector: tail, selectorAst, raw: tail };
   }
-  if (components.some((component) => component.type === 'pseudo-class' || component.type === 'pseudo-element')) {
-    return { kind: 'pseudo', selector: tail, raw: tail };
+  if (selectorContainsComponent(components, (component) => component.type === 'combinator')) {
+    return { kind: 'descendant', selector: tail, selectorAst, raw: tail };
   }
-  if (components.some((component) => component.type === 'combinator')) {
-    return { kind: 'descendant', selector: tail, raw: tail };
+  if (
+    selectorContainsComponent(
+      components,
+      (component) => component.type === 'pseudo-class' || component.type === 'pseudo-element'
+    )
+  ) {
+    return { kind: 'pseudo', selector: tail, selectorAst, raw: tail };
   }
-  return { kind: 'parent', selector: tail, raw: tail };
+  return { kind: 'parent', selector: tail, selectorAst, raw: tail };
 }
 
 function selectorTailComponents(selector: CssSelector): CssSelector {
@@ -593,10 +603,20 @@ function selectorTailComponents(selector: CssSelector): CssSelector {
 }
 
 function selectorContainsClass(selector: CssSelector, className: string): boolean {
+  return selectorContainsComponent(
+    selector,
+    (component) => component.type === 'class' && classNameMatches(component.name, className)
+  );
+}
+
+function selectorContainsComponent(
+  selector: CssSelector,
+  predicate: (component: CssSelector[number]) => boolean
+): boolean {
   for (const component of selector) {
-    if (component.type === 'class' && classNameMatches(component.name, className)) return true;
+    if (predicate(component)) return true;
     for (const nested of selectorLists(component)) {
-      if (selectorContainsClass(nested, className)) return true;
+      if (selectorContainsComponent(nested, predicate)) return true;
     }
   }
   return false;
diff --git a/packages/compiler/src/tests/transform.test.ts b/packages/compiler/src/tests/transform.test.ts
index ee19fdd7..f82bbb47 100644
--- a/packages/compiler/src/tests/transform.test.ts
+++ b/packages/compiler/src/tests/transform.test.ts
@@ -180,4 +180,33 @@ describe('compileProject', () => {
     expect(result.files[0]!.source).toContain('// Generated');
     expect(result.files[0]!.source).toContain('data-root=""');
   });
+
+  it('compiles multiple project configs from one config array', async () => {
+    const inputFile = join(workDir, 'src', 'skin.tsx');
+    mkdirSync(join(workDir, 'src'), { recursive: true });
+    writeFileSync(inputFile, `export function App(){ return <Root/>; }\n`, 'utf8');
+
+    const result = await compileProject(
+      [
+        {
+          input: { skin: 'src/skin.tsx' },
+          output: { dir: 'dist/one', entryFileNames: '[name].tsx' },
+          plugins: [transform((code) => [code.jsx.element('Root').addProp('data-one', '')])],
+        },
+        {
+          input: { skin: 'src/skin.tsx' },
+          output: { dir: 'dist/two', entryFileNames: '[name].tsx' },
+          plugins: [transform((code) => [code.jsx.element('Root').addProp('data-two', '')])],
+        },
+      ],
+      { configDir: workDir }
+    );
+
+    expect(result.diagnostics).toEqual([]);
+    expect(result.files).toHaveLength(2);
+    expect(result.files[0]).toMatchObject({ type: 'chunk', fileName: join(workDir, 'dist', 'one', 'skin.tsx') });
+    expect(result.files[0]!.source).toContain('data-one=""');
+    expect(result.files[1]).toMatchObject({ type: 'chunk', fileName: join(workDir, 'dist', 'two', 'skin.tsx') });
+    expect(result.files[1]!.source).toContain('data-two=""');
+  });
 });
diff --git a/packages/compiler/tsdown.config.ts b/packages/compiler/tsdown.config.ts
index e03acfdd..f0e2b50f 100644
--- a/packages/compiler/tsdown.config.ts
+++ b/packages/compiler/tsdown.config.ts
@@ -15,4 +15,7 @@ export default defineConfig({
   hash: false,
   unbundle: true,
   dts: true,
+  deps: {
+    neverBundle: [/^node:/],
+  },
 });
diff --git a/packages/html/src/define/audio/skin.tailwind.ts b/packages/html/src/define/audio/skin.tailwind.ts
index 941e2f27..20977000 100644
--- a/packages/html/src/define/audio/skin.tailwind.ts
+++ b/packages/html/src/define/audio/skin.tailwind.ts
@@ -5,17 +5,15 @@ import {
   container,
   controls,
   error,
-  icon,
-  iconContainer,
-  iconFlipped,
+  icons,
   menu,
-  muteIcon,
   playbackRate,
-  playIcon,
-  popup,
+  popover,
   seek,
   slider,
   time,
+  tooltip,
+  volumePopover,
 } from '@videojs/skins/default/tailwind/audio.tailwind';
 import { createTemplate } from '@videojs/utils/dom';
 import { cn } from '@videojs/utils/style';
@@ -49,36 +47,36 @@ function getTemplateHTML() {
       <div class="${controls}">
         <media-tooltip-group>
           <div class="${buttonGroup}">
-              <media-play-button commandfor="play-tooltip" class="${cn(button.base, button.subtle, button.icon, playIcon.button)}">
-                ${renderIcon('restart', { class: cn(icon, playIcon.restart) })}
-                ${renderIcon('play', { class: cn(icon, playIcon.play) })}
-                ${renderIcon('pause', { class: cn(icon, playIcon.pause) })}
+              <media-play-button commandfor="play-tooltip" class="${cn(button.base, button.subtle, button.icon, icons.playButtonState)}">
+                ${renderIcon('restart', { class: cn(icons.root, icons.restartIcon) })}
+                ${renderIcon('play', { class: cn(icons.root, icons.playIcon) })}
+                ${renderIcon('pause', { class: cn(icons.root, icons.pauseIcon) })}
               </media-play-button>
-              <media-tooltip id="play-tooltip" side="top" boundary="viewport" class="${cn(popup.tooltip)}">
+              <media-tooltip id="play-tooltip" side="top" boundary="viewport" class="${tooltip.root}">
               <media-tooltip-label></media-tooltip-label>
-              <media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
+              <media-tooltip-shortcut class="${tooltip.shortcut}"></media-tooltip-shortcut>
             </media-tooltip>
 
             <media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="${cn(button.base, button.subtle, button.icon)}">
-              <span class="${iconContainer}">
-                ${renderIcon('seek', { class: cn(icon, iconFlipped) })}
+              <span class="${icons.container}">
+                ${renderIcon('seek', { class: cn(icons.root, icons.flipped) })}
                 <span class="${cn(seek.label, seek.labelBackward)}">${SEEK_TIME}</span>
               </span>
             </media-seek-button>
-            <media-tooltip id="seek-backward-tooltip" side="top" boundary="viewport" class="${cn(popup.tooltip)}">
+            <media-tooltip id="seek-backward-tooltip" side="top" boundary="viewport" class="${tooltip.root}">
               <media-tooltip-label></media-tooltip-label>
-              <media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
+              <media-tooltip-shortcut class="${tooltip.shortcut}"></media-tooltip-shortcut>
             </media-tooltip>
 
             <media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="${cn(button.base, button.subtle, button.icon)}">
-              <span class="${iconContainer}">
-                ${renderIcon('seek', { class: icon })}
+              <span class="${icons.container}">
+                ${renderIcon('seek', { class: icons.root })}
                 <span class="${cn(seek.label, seek.labelForward)}">${SEEK_TIME}</span>
               </span>
             </media-seek-button>
-            <media-tooltip id="seek-forward-tooltip" side="top" boundary="viewport" class="${cn(popup.tooltip)}">
+            <media-tooltip id="seek-forward-tooltip" side="top" boundary="viewport" class="${tooltip.root}">
               <media-tooltip-label></media-tooltip-label>
-              <media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
+              <media-tooltip-shortcut class="${tooltip.shortcut}"></media-tooltip-shortcut>
             </media-tooltip>
           </div>
 
@@ -86,10 +84,10 @@ function getTemplateHTML() {
             <media-time type="current" class="${time.current}"></media-time>
             <media-time-slider class="${slider.root}">
               <media-slider-track class="${slider.track}">
-                <media-slider-fill class="${cn(slider.fill.base, slider.fill.fill)}"></media-slider-fill>
-                <media-slider-buffer class="${cn(slider.fill.base, slider.fill.buffer)}"></media-slider-buffer>
+                <media-slider-fill class="${cn(slider.fillBase, slider.fill)}"></media-slider-fill>
+                <media-slider-buffer class="${cn(slider.fillBase, slider.buffer)}"></media-slider-buffer>
               </media-slider-track>
-              <media-slider-thumb class="${cn(slider.thumb.base, slider.thumb.interactive)}"></media-slider-thumb>
+              <media-slider-thumb class="${cn(slider.thumbBase, slider.thumb)}"></media-slider-thumb>
               <media-slider-preview class="${slider.preview}">
                 <media-slider-value type="pointer" class="${slider.value}"></media-slider-value>
               </media-slider-preview>
@@ -99,31 +97,31 @@ function getTemplateHTML() {
 
           <div class="${buttonGroup}">
             <media-playback-rate-button commandfor="playback-rate-menu" class="${cn(button.base, button.subtle, button.icon, playbackRate.button)}"></media-playback-rate-button>
-            <media-menu id="playback-rate-menu" side="top" align="center" boundary="viewport" class="${cn(popup.popover, menu.root)}">
+            <media-menu id="playback-rate-menu" side="top" align="center" boundary="viewport" class="${cn(popover.root, menu.root)}">
               <media-playback-rate-radio-group class="${menu.group}">
                 <template>
                   <media-menu-radio-item class="${menu.item}">
                     <span data-part="label"></span>
                     <media-menu-item-indicator force-mount class="${menu.indicator}">
-                      ${renderIcon('check', { class: icon })}
+                      ${renderIcon('check', { class: icons.root })}
                     </media-menu-item-indicator>
                   </media-menu-radio-item>
                 </template>
               </media-playback-rate-radio-group>
             </media-menu>
 
-            <media-mute-button commandfor="audio-volume-popover" class="${cn(button.base, button.subtle, button.icon, muteIcon.button)}">
-              ${renderIcon('volume-off', { class: cn(icon, muteIcon.volumeOff) })}
-              ${renderIcon('volume-low', { class: cn(icon, muteIcon.volumeLow) })}
-              ${renderIcon('volume-high', { class: cn(icon, muteIcon.volumeHigh) })}
+            <media-mute-button commandfor="audio-volume-popover" class="${cn(button.base, button.subtle, button.icon, icons.muteButtonState)}">
+              ${renderIcon('volume-off', { class: cn(icons.root, icons.volumeOffIcon) })}
+              ${renderIcon('volume-low', { class: cn(icons.root, icons.volumeLowIcon) })}
+              ${renderIcon('volume-high', { class: cn(icons.root, icons.volumeHighIcon) })}
             </media-mute-button>
 
-            <media-popover id="audio-volume-popover" open-on-hover delay="200" close-delay="100" side="top" boundary="viewport" class="${cn(popup.popover, popup.volume)}">
+            <media-popover id="audio-volume-popover" open-on-hover delay="200" close-delay="100" side="top" boundary="viewport" class="${cn(popover.root, volumePopover.root)}">
               <media-volume-slider class="${slider.root}" orientation="vertical" thumb-alignment="edge">
                 <media-slider-track class="${slider.track}">
-                  <media-slider-fill class="${cn(slider.fill.base, slider.fill.fill)}"></media-slider-fill>
+                  <media-slider-fill class="${cn(slider.fillBase, slider.fill)}"></media-slider-fill>
                 </media-slider-track>
-                <media-slider-thumb class="${cn(slider.thumb.base, slider.thumb.persistent)}"></media-slider-thumb>
+                <media-slider-thumb class="${cn(slider.thumbBase, slider.thumbPersistent)}"></media-slider-thumb>
               </media-volume-slider>
             </media-popover>
           </div>
diff --git a/packages/html/src/define/live-audio/skin.tailwind.ts b/packages/html/src/define/live-audio/skin.tailwind.ts
index 82295c62..29a11b44 100644
--- a/packages/html/src/define/live-audio/skin.tailwind.ts
+++ b/packages/html/src/define/live-audio/skin.tailwind.ts
@@ -5,11 +5,11 @@ import {
   container,
   controls,
   error,
-  icon,
-  muteIcon,
-  playIcon,
-  popup,
+  icons,
+  popover,
   slider,
+  tooltip,
+  volumePopover,
 } from '@videojs/skins/default/tailwind/audio.tailwind';
 import { createTemplate } from '@videojs/utils/dom';
 import { cn } from '@videojs/utils/style';
@@ -41,14 +41,14 @@ function getTemplateHTML() {
       <div class="${controls}">
         <media-tooltip-group>
           <div class="${buttonGroup}">
-              <media-play-button commandfor="play-tooltip" class="${cn(button.base, button.subtle, button.icon, playIcon.button)}">
-                ${renderIcon('restart', { class: cn(icon, playIcon.restart) })}
-                ${renderIcon('play', { class: cn(icon, playIcon.play) })}
-                ${renderIcon('pause', { class: cn(icon, playIcon.pause) })}
+              <media-play-button commandfor="play-tooltip" class="${cn(button.base, button.subtle, button.icon, icons.playButtonState)}">
+                ${renderIcon('restart', { class: cn(icons.root, icons.restartIcon) })}
+                ${renderIcon('play', { class: cn(icons.root, icons.playIcon) })}
+                ${renderIcon('pause', { class: cn(icons.root, icons.pauseIcon) })}
               </media-play-button>
-              <media-tooltip id="play-tooltip" side="top" boundary="viewport" class="${cn(popup.tooltip)}">
+              <media-tooltip id="play-tooltip" side="top" boundary="viewport" class="${tooltip.root}">
               <media-tooltip-label></media-tooltip-label>
-              <media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
+              <media-tooltip-shortcut class="${tooltip.shortcut}"></media-tooltip-shortcut>
             </media-tooltip>
 
               <media-live-button class="${cn(button.base, button.subtle, button.live)}"></media-live-button>
@@ -57,18 +57,18 @@ function getTemplateHTML() {
           <div class="grow" aria-hidden="true"></div>
 
           <div class="${buttonGroup}">
-            <media-mute-button commandfor="live-audio-volume-popover" class="${cn(button.base, button.subtle, button.icon, muteIcon.button)}">
-              ${renderIcon('volume-off', { class: cn(icon, muteIcon.volumeOff) })}
-              ${renderIcon('volume-low', { class: cn(icon, muteIcon.volumeLow) })}
-              ${renderIcon('volume-high', { class: cn(icon, muteIcon.volumeHigh) })}
+            <media-mute-button commandfor="live-audio-volume-popover" class="${cn(button.base, button.subtle, button.icon, icons.muteButtonState)}">
+              ${renderIcon('volume-off', { class: cn(icons.root, icons.volumeOffIcon) })}
+              ${renderIcon('volume-low', { class: cn(icons.root, icons.volumeLowIcon) })}
+              ${renderIcon('volume-high', { class: cn(icons.root, icons.volumeHighIcon) })}
             </media-mute-button>
 
-            <media-popover id="live-audio-volume-popover" open-on-hover delay="200" close-delay="100" side="top" boundary="viewport" class="${cn(popup.popover, popup.volume)}">
+            <media-popover id="live-audio-volume-popover" open-on-hover delay="200" close-delay="100" side="top" boundary="viewport" class="${cn(popover.root, volumePopover.root)}">
               <media-volume-slider class="${slider.root}" orientation="vertical" thumb-alignment="edge">
                 <media-slider-track class="${slider.track}">
-                  <media-slider-fill class="${cn(slider.fill.base, slider.fill.fill)}"></media-slider-fill>
+                  <media-slider-fill class="${cn(slider.fillBase, slider.fill)}"></media-slider-fill>
                 </media-slider-track>
-                <media-slider-thumb class="${cn(slider.thumb.base, slider.thumb.persistent)}"></media-slider-thumb>
+                <media-slider-thumb class="${cn(slider.thumbBase, slider.thumbPersistent)}"></media-slider-thumb>
               </media-volume-slider>
             </media-popover>
           </div>
diff --git a/packages/html/src/define/live-video/skin.tailwind.ts b/packages/html/src/define/live-video/skin.tailwind.ts
index 4c1a6769..b14c70e7 100644
--- a/packages/html/src/define/live-video/skin.tailwind.ts
+++ b/packages/html/src/define/live-video/skin.tailwind.ts
@@ -1,26 +1,22 @@
 import { renderIcon } from '@videojs/icons/render';
 import {
-  airplayIcon,
-  bufferingIndicator,
+  buffering,
   button,
-  buttonGroupEnd,
-  buttonGroupStart,
-  captionsIcon,
-  castIcon,
   container,
   controls,
+  controlsGroup,
   error,
-  fullscreenIcon,
-  icon,
-  inputFeedback,
+  icons,
+  indicator,
   menu,
-  muteIcon,
   overlay,
-  pipIcon,
-  playIcon,
-  popup,
+  popover,
   poster,
   slider,
+  statusIndicator,
+  tooltip,
+  volumeIndicator,
+  volumePopover,
 } from '@videojs/skins/default/tailwind/video.tailwind';
 import { createTemplate } from '@videojs/utils/dom';
 import { cn } from '@videojs/utils/style';
@@ -41,7 +37,7 @@ function getTemplateHTML() {
         <slot name="poster"></slot>
       </media-poster>
 
-      <media-buffering-indicator class="${bufferingIndicator.root}">
+      <media-buffering-indicator class="${buffering.root}">
         ${renderIcon('spinner')}
       </media-buffering-indicator>
 
@@ -59,15 +55,15 @@ function getTemplateHTML() {
 
       <media-controls data-controls="" class="${controls}">
         <media-tooltip-group>
-          <div class="${buttonGroupStart}">
-              <media-play-button commandfor="play-tooltip" class="${cn(button.base, button.subtle, button.icon, playIcon.button)}">
-                ${renderIcon('restart', { class: cn(icon, playIcon.restart) })}
-                ${renderIcon('play', { class: cn(icon, playIcon.play) })}
-                ${renderIcon('pause', { class: cn(icon, playIcon.pause) })}
+          <div class="${controlsGroup.start}">
+              <media-play-button commandfor="play-tooltip" class="${cn(button.base, button.subtle, button.icon, icons.playButtonState)}">
+                ${renderIcon('restart', { class: cn(icons.root, icons.restartIcon) })}
+                ${renderIcon('play', { class: cn(icons.root, icons.playIcon) })}
+                ${renderIcon('pause', { class: cn(icons.root, icons.pauseIcon) })}
               </media-play-button>
-              <media-tooltip id="play-tooltip" side="top" class="${cn(popup.tooltip)}">
+              <media-tooltip id="play-tooltip" side="top" class="${tooltip.root}">
                 <media-tooltip-label></media-tooltip-label>
-                <media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
+                <media-tooltip-shortcut class="${tooltip.shortcut}"></media-tooltip-shortcut>
               </media-tooltip>
 
               <media-live-button class="${cn(button.base, button.subtle, button.live)}"></media-live-button>
@@ -75,72 +71,72 @@ function getTemplateHTML() {
 
           <div class="grow" aria-hidden="true"></div>
 
-          <div class="${buttonGroupEnd}">
-            <media-mute-button commandfor="live-video-volume-popover" class="${cn(button.base, button.subtle, button.icon, muteIcon.button)}">
-              ${renderIcon('volume-off', { class: cn(icon, muteIcon.volumeOff) })}
-              ${renderIcon('volume-low', { class: cn(icon, muteIcon.volumeLow) })}
-              ${renderIcon('volume-high', { class: cn(icon, muteIcon.volumeHigh) })}
+          <div class="${controlsGroup.end}">
+            <media-mute-button commandfor="live-video-volume-popover" class="${cn(button.base, button.subtle, button.icon, icons.muteButtonState)}">
+              ${renderIcon('volume-off', { class: cn(icons.root, icons.volumeOffIcon) })}
+              ${renderIcon('volume-low', { class: cn(icons.root, icons.volumeLowIcon) })}
+              ${renderIcon('volume-high', { class: cn(icons.root, icons.volumeHighIcon) })}
             </media-mute-button>
 
-            <media-popover id="live-video-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="${cn(popup.popover, popup.volume)}">
+            <media-popover id="live-video-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="${cn(popover.root, volumePopover.root)}">
               <media-volume-slider class="${slider.root}" orientation="vertical" thumb-alignment="edge">
                 <media-slider-track class="${slider.track}">
-                  <media-slider-fill class="${cn(slider.fill.base, slider.fill.fill)}"></media-slider-fill>
+                  <media-slider-fill class="${cn(slider.fillBase, slider.fill)}"></media-slider-fill>
                 </media-slider-track>
-                <media-slider-thumb class="${cn(slider.thumb.base, slider.thumb.persistent)}"></media-slider-thumb>
+                <media-slider-thumb class="${cn(slider.thumbBase, slider.thumbPersistent)}"></media-slider-thumb>
               </media-volume-slider>
             </media-popover>
-              <media-captions-button menu-for="captions-menu" commandfor="captions-tooltip" class="${cn(button.base, button.subtle, button.icon, captionsIcon.button)}">
-                ${renderIcon('captions-off', { class: cn(icon, captionsIcon.off) })}
-                ${renderIcon('captions-on', { class: cn(icon, captionsIcon.on) })}
+              <media-captions-button menu-for="captions-menu" commandfor="captions-tooltip" class="${cn(button.base, button.subtle, button.icon, icons.captionsButtonState)}">
+                ${renderIcon('captions-off', { class: cn(icons.root, icons.captionsOffIcon) })}
+                ${renderIcon('captions-on', { class: cn(icons.root, icons.captionsOnIcon) })}
               </media-captions-button>
-              <media-menu id="captions-menu" side="top" align="center" class="${cn(popup.popover, menu.root, 'media-menu--captions')}">
+              <media-menu id="captions-menu" side="top" align="center" class="${cn(popover.root, menu.root, 'media-menu--captions')}">
                 <media-captions-radio-group class="${menu.group}">
                   <template>
                     <media-menu-radio-item class="${menu.item}">
                       <span data-part="label"></span>
                       <media-menu-item-indicator force-mount class="${menu.indicator}">
-                        ${renderIcon('check', { class: icon })}
+                        ${renderIcon('check', { class: icons.root })}
                       </media-menu-item-indicator>
                     </media-menu-radio-item>
                   </template>
                 </media-captions-radio-group>
               </media-menu>
-              <media-tooltip id="captions-tooltip" side="top" class="${cn(popup.tooltip)}">
+              <media-tooltip id="captions-tooltip" side="top" class="${tooltip.root}">
                 <media-tooltip-label></media-tooltip-label>
-                <media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
+                <media-tooltip-shortcut class="${tooltip.shortcut}"></media-tooltip-shortcut>
               </media-tooltip>
-              <media-cast-button commandfor="cast-tooltip" class="${cn(button.base, button.subtle, button.icon, castIcon.button)}">
-                ${renderIcon('cast-enter', { class: cn(icon, castIcon.enter) })}
-                ${renderIcon('cast-exit', { class: cn(icon, castIcon.exit) })}
+              <media-cast-button commandfor="cast-tooltip" class="${cn(button.base, button.subtle, button.icon, icons.castButtonState)}">
+                ${renderIcon('cast-enter', { class: cn(icons.root, icons.castEnterIcon) })}
+                ${renderIcon('cast-exit', { class: cn(icons.root, icons.castExitIcon) })}
               </media-cast-button>
-              <media-tooltip id="cast-tooltip" side="top" class="${cn(popup.tooltip)}">
+              <media-tooltip id="cast-tooltip" side="top" class="${tooltip.root}">
                 <media-tooltip-label></media-tooltip-label>
-                <media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
+                <media-tooltip-shortcut class="${tooltip.shortcut}"></media-tooltip-shortcut>
               </media-tooltip>
-              <media-airplay-button commandfor="airplay-tooltip" class="${cn(button.base, button.subtle, button.icon, airplayIcon.button)}">
-                ${renderIcon('airplay-enter', { class: cn(icon, airplayIcon.enter) })}
-                ${renderIcon('airplay-exit', { class: cn(icon, airplayIcon.exit) })}
+              <media-airplay-button commandfor="airplay-tooltip" class="${cn(button.base, button.subtle, button.icon, icons.airplayButtonState)}">
+                ${renderIcon('airplay-enter', { class: cn(icons.root, icons.airplayEnterIcon) })}
+                ${renderIcon('airplay-exit', { class: cn(icons.root, icons.airplayExitIcon) })}
               </media-airplay-button>
-              <media-tooltip id="airplay-tooltip" side="top" class="${cn(popup.tooltip)}">
+              <media-tooltip id="airplay-tooltip" side="top" class="${tooltip.root}">
                 <media-tooltip-label></media-tooltip-label>
-                <media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
+                <media-tooltip-shortcut class="${tooltip.shortcut}"></media-tooltip-shortcut>
               </media-tooltip>
-              <media-pip-button commandfor="pip-tooltip" class="${cn(button.base, button.subtle, button.icon, pipIcon.button)}">
-                ${renderIcon('pip-enter', { class: cn(icon, pipIcon.off) })}
-                ${renderIcon('pip-exit', { class: cn(icon, pipIcon.on) })}
+              <media-pip-button commandfor="pip-tooltip" class="${cn(button.base, button.subtle, button.icon, icons.pipButtonState)}">
+                ${renderIcon('pip-enter', { class: cn(icons.root, icons.pipEnterIcon) })}
+                ${renderIcon('pip-exit', { class: cn(icons.root, icons.pipExitIcon) })}
               </media-pip-button>
-              <media-tooltip id="pip-tooltip" side="top" class="${cn(popup.tooltip)}">
+              <media-tooltip id="pip-tooltip" side="top" class="${tooltip.root}">
                 <media-tooltip-label></media-tooltip-label>
-                <media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
+                <media-tooltip-shortcut class="${tooltip.shortcut}"></media-tooltip-shortcut>
               </media-tooltip>
-              <media-fullscreen-button commandfor="fullscreen-tooltip" class="${cn(button.base, button.subtle, button.icon, fullscreenIcon.button)}">
-                ${renderIcon('fullscreen-enter', { class: cn(icon, fullscreenIcon.enter) })}
-                ${renderIcon('fullscreen-exit', { class: cn(icon, fullscreenIcon.exit) })}
+              <media-fullscreen-button commandfor="fullscreen-tooltip" class="${cn(button.base, button.subtle, button.icon, icons.fullscreenButtonState)}">
+                ${renderIcon('fullscreen-enter', { class: cn(icons.root, icons.fullscreenEnterIcon) })}
+                ${renderIcon('fullscreen-exit', { class: cn(icons.root, icons.fullscreenExitIcon) })}
               </media-fullscreen-button>
-              <media-tooltip id="fullscreen-tooltip" side="top" class="${cn(popup.tooltip)}">
+              <media-tooltip id="fullscreen-tooltip" side="top" class="${tooltip.root}">
                 <media-tooltip-label></media-tooltip-label>
-                <media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
+                <media-tooltip-shortcut class="${tooltip.shortcut}"></media-tooltip-shortcut>
               </media-tooltip>
           </div>
         </media-tooltip-group>
@@ -165,35 +161,27 @@ function getTemplateHTML() {
 
       <!-- Input Feedback -->
       <media-status-announcer></media-status-announcer>
-      <div class="${inputFeedback.root}">
-        <media-volume-indicator hidden class="${cn(inputFeedback.island.base, inputFeedback.island.volume, inputFeedback.island.shownVolume)}">
-          <media-volume-indicator-fill class="${inputFeedback.island.content}">
-            ${renderIcon('volume-high', { class: cn(inputFeedback.island.icon, inputFeedback.island.shownVolumeHigh) })}
-            ${renderIcon('volume-low', { class: cn(inputFeedback.island.icon, inputFeedback.island.shownVolumeLow) })}
-            ${renderIcon('volume-off', { class: cn(inputFeedback.island.icon, inputFeedback.island.shownVolumeOff) })}
-            <media-volume-indicator-value class="${inputFeedback.island.value}"></media-volume-indicator-value>
-          </media-volume-indicator-fill>
-        </media-volume-indicator>
-        <media-status-indicator
-          hidden
-          actions="toggleSubtitles toggleFullscreen togglePictureInPicture"
-          class="${cn(inputFeedback.island.base, inputFeedback.island.shownStatus)}"
-        >
-          <div class="${inputFeedback.island.content}">
-            ${renderIcon('captions-on', { class: cn(inputFeedback.island.icon, inputFeedback.island.shownCaptionsOn) })}
-            ${renderIcon('captions-off', { class: cn(inputFeedback.island.icon, inputFeedback.island.shownCaptionsOff) })}
-            ${renderIcon('fullscreen-enter', { class: cn(inputFeedback.island.icon, inputFeedback.island.shownFullscreenEnter) })}
-            ${renderIcon('fullscreen-exit', { class: cn(inputFeedback.island.icon, inputFeedback.island.shownFullscreenExit) })}
-            ${renderIcon('pip-enter', { class: cn(inputFeedback.island.icon, inputFeedback.island.shownPipEnter) })}
-            ${renderIcon('pip-exit', { class: cn(inputFeedback.island.icon, inputFeedback.island.shownPipExit) })}
-            <media-status-indicator-value class="${inputFeedback.island.value}"></media-status-indicator-value>
-          </div>
-        </media-status-indicator>
-        <media-status-indicator hidden actions="togglePaused" class="${inputFeedback.bubble.base}">
-          ${renderIcon('play', { class: cn(inputFeedback.bubble.icon, inputFeedback.bubble.shownPlay) })}
-          ${renderIcon('pause', { class: cn(inputFeedback.bubble.icon, inputFeedback.bubble.shownPause) })}
-        </media-status-indicator>
-      </div>
+      <media-volume-indicator hidden class="${volumeIndicator.root}">
+        <media-volume-indicator-fill class="${indicator.content}">
+          ${renderIcon('volume-high', { class: cn(volumeIndicator.icon, volumeIndicator.highIcon) })}
+          ${renderIcon('volume-low', { class: cn(volumeIndicator.icon, volumeIndicator.lowIcon) })}
+          ${renderIcon('volume-off', { class: cn(volumeIndicator.icon, volumeIndicator.offIcon) })}
+          <media-volume-indicator-value class="${indicator.value}"></media-volume-indicator-value>
+        </media-volume-indicator-fill>
+      </media-volume-indicator>
+      <media-status-indicator hidden actions="toggleSubtitles toggleFullscreen togglePictureInPicture" class="${statusIndicator.top}">
+        ${renderIcon('captions-on', { class: cn(statusIndicator.topIcon, statusIndicator.captionsOnIcon) })}
+        ${renderIcon('captions-off', { class: cn(statusIndicator.topIcon, statusIndicator.captionsOffIcon) })}
+        ${renderIcon('fullscreen-enter', { class: cn(statusIndicator.topIcon, statusIndicator.fullscreenEnterIcon) })}
+        ${renderIcon('fullscreen-exit', { class: cn(statusIndicator.topIcon, statusIndicator.fullscreenExitIcon) })}
+        ${renderIcon('pip-enter', { class: cn(statusIndicator.topIcon, statusIndicator.pipEnterIcon) })}
+        ${renderIcon('pip-exit', { class: cn(statusIndicator.topIcon, statusIndicator.pipExitIcon) })}
+        <media-status-indicator-value class="${indicator.value}"></media-status-indicator-value>
+      </media-status-indicator>
+      <media-status-indicator hidden actions="togglePaused" class="${statusIndicator.center}">
+        ${renderIcon('play', { class: cn(statusIndicator.centerIcon, statusIndicator.playIcon) })}
+        ${renderIcon('pause', { class: cn(statusIndicator.centerIcon, statusIndicator.pauseIcon) })}
+      </media-status-indicator>
     </media-container>
   `;
 }
diff --git a/packages/html/src/define/video/skin.tailwind.ts b/packages/html/src/define/video/skin.tailwind.ts
index 8fd36e77..05364c50 100644
--- a/packages/html/src/define/video/skin.tailwind.ts
+++ b/packages/html/src/define/video/skin.tailwind.ts
@@ -1,31 +1,27 @@
 import { renderIcon } from '@videojs/icons/render';
 import {
-  airplayIcon,
   badge,
-  bufferingIndicator,
+  buffering,
   button,
-  buttonGroupEnd,
-  buttonGroupStart,
-  castIcon,
   container,
   controls,
+  controlsGroup,
   error,
-  fullscreenIcon,
-  icon,
-  iconContainer,
-  iconFlipped,
-  inputFeedback,
+  icons,
+  indicator,
   menu,
-  muteIcon,
   overlay,
-  pipIcon,
-  playIcon,
-  popup,
+  popover,
   poster,
   seek,
+  seekIndicator,
   slider,
+  statusIndicator,
   thumbnail,
   time,
+  tooltip,
+  volumeIndicator,
+  volumePopover,
 } from '@videojs/skins/default/tailwind/video.tailwind';
 import { createTemplate } from '@videojs/utils/dom';
 import { cn } from '@videojs/utils/style';
@@ -48,7 +44,7 @@ function getTemplateHTML() {
         <slot name="poster"></slot>
       </media-poster>
 
-      <media-buffering-indicator class="${bufferingIndicator.root}">
+      <media-buffering-indicator class="${buffering.root}">
         ${renderIcon('spinner')}
       </media-buffering-indicator>
 
@@ -66,37 +62,37 @@ function getTemplateHTML() {
 
       <media-controls data-controls="" class="${controls}">
         <media-tooltip-group>
-          <div class="${buttonGroupStart}">
-              <media-play-button commandfor="play-tooltip" class="${cn(button.base, button.subtle, button.icon, playIcon.button)}">
-                ${renderIcon('restart', { class: cn(icon, playIcon.restart) })}
-                ${renderIcon('play', { class: cn(icon, playIcon.play) })}
-                ${renderIcon('pause', { class: cn(icon, playIcon.pause) })}
+          <div class="${controlsGroup.start}">
+              <media-play-button commandfor="play-tooltip" class="${cn(button.base, button.subtle, button.icon, icons.playButtonState)}">
+                ${renderIcon('restart', { class: cn(icons.root, icons.restartIcon) })}
+                ${renderIcon('play', { class: cn(icons.root, icons.playIcon) })}
+                ${renderIcon('pause', { class: cn(icons.root, icons.pauseIcon) })}
               </media-play-button>
-              <media-tooltip id="play-tooltip" side="top" class="${cn(popup.tooltip)}">
+              <media-tooltip id="play-tooltip" side="top" class="${tooltip.root}">
                 <media-tooltip-label></media-tooltip-label>
-                <media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
+                <media-tooltip-shortcut class="${tooltip.shortcut}"></media-tooltip-shortcut>
               </media-tooltip>
 
             <media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="${cn(button.base, button.subtle, button.icon)}">
-              <span class="${iconContainer}">
-                ${renderIcon('seek', { class: cn(icon, iconFlipped) })}
+              <span class="${icons.container}">
+                ${renderIcon('seek', { class: cn(icons.root, icons.flipped) })}
                 <span class="${cn(seek.label, seek.labelBackward)}">${SEEK_TIME}</span>
               </span>
             </media-seek-button>
-            <media-tooltip id="seek-backward-tooltip" side="top" class="${cn(popup.tooltip)}">
+            <media-tooltip id="seek-backward-tooltip" side="top" class="${tooltip.root}">
               <media-tooltip-label></media-tooltip-label>
-              <media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
+              <media-tooltip-shortcut class="${tooltip.shortcut}"></media-tooltip-shortcut>
             </media-tooltip>
 
             <media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="${cn(button.base, button.subtle, button.icon)}">
-              <span class="${iconContainer}">
-                ${renderIcon('seek', { class: icon })}
+              <span class="${icons.container}">
+                ${renderIcon('seek', { class: icons.root })}
                 <span class="${cn(seek.label, seek.labelForward)}">${SEEK_TIME}</span>
               </span>
             </media-seek-button>
-            <media-tooltip id="seek-forward-tooltip" side="top" class="${cn(popup.tooltip)}">
+            <media-tooltip id="seek-forward-tooltip" side="top" class="${tooltip.root}">
               <media-tooltip-label></media-tooltip-label>
-              <media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
+              <media-tooltip-shortcut class="${tooltip.shortcut}"></media-tooltip-shortcut>
             </media-tooltip>
           </div>
 
@@ -104,15 +100,15 @@ function getTemplateHTML() {
             <media-time type="current" class="${time.current}"></media-time>
             <media-time-slider class="${slider.root}">
               <media-slider-track class="${slider.track}">
-                <media-slider-fill class="${cn(slider.fill.base, slider.fill.fill)}"></media-slider-fill>
-                <media-slider-buffer class="${cn(slider.fill.base, slider.fill.buffer)}"></media-slider-buffer>
+                <media-slider-fill class="${cn(slider.fillBase, slider.fill)}"></media-slider-fill>
+                <media-slider-buffer class="${cn(slider.fillBase, slider.buffer)}"></media-slider-buffer>
               </media-slider-track>
-              <media-slider-thumb class="${cn(slider.thumb.base, slider.thumb.interactive)}"></media-slider-thumb>
+              <media-slider-thumb class="${cn(slider.thumbBase, slider.thumb)}"></media-slider-thumb>
 
               <div class="${thumbnail.root}">
                 <media-slider-thumbnail class="${thumbnail.image}"></media-slider-thumbnail>
                 <media-slider-value type="pointer" class="${cn(time.current, thumbnail.time)}"></media-slider-value>
-                ${renderIcon('spinner', { class: cn(icon, thumbnail.spinner) })}
+                ${renderIcon('spinner', { class: cn(icons.root, thumbnail.spinner) })}
               </div>
               <media-slider-preview class="${slider.preview}">
                 <media-slider-value type="pointer" class="${cn(slider.value, time.current)}"></media-slider-value>
@@ -121,50 +117,50 @@ function getTemplateHTML() {
             <media-time type="duration" class="${time.duration}"></media-time>
           </div>
 
-          <div class="${cn(buttonGroupEnd, menu.settingsGroup)}">
-            <media-mute-button commandfor="video-volume-popover" class="${cn(button.base, button.subtle, button.icon, muteIcon.button)}">
-              ${renderIcon('volume-off', { class: cn(icon, muteIcon.volumeOff) })}
-              ${renderIcon('volume-low', { class: cn(icon, muteIcon.volumeLow) })}
-              ${renderIcon('volume-high', { class: cn(icon, muteIcon.volumeHigh) })}
+          <div class="${cn(controlsGroup.end, menu.settingsGroup)}">
+            <media-mute-button commandfor="video-volume-popover" class="${cn(button.base, button.subtle, button.icon, icons.muteButtonState)}">
+              ${renderIcon('volume-off', { class: cn(icons.root, icons.volumeOffIcon) })}
+              ${renderIcon('volume-low', { class: cn(icons.root, icons.volumeLowIcon) })}
+              ${renderIcon('volume-high', { class: cn(icons.root, icons.volumeHighIcon) })}
             </media-mute-button>
 
-            <media-popover id="video-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="${cn(popup.popover, popup.volume)}">
+            <media-popover id="video-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="${cn(popover.root, volumePopover.root)}">
               <media-volume-slider class="${slider.root}" orientation="vertical" thumb-alignment="edge">
                 <media-slider-track class="${slider.track}">
-                  <media-slider-fill class="${cn(slider.fill.base, slider.fill.fill)}"></media-slider-fill>
+                  <media-slider-fill class="${cn(slider.fillBase, slider.fill)}"></media-slider-fill>
                 </media-slider-track>
-                <media-slider-thumb class="${cn(slider.thumb.base, slider.thumb.persistent)}"></media-slider-thumb>
+                <media-slider-thumb class="${cn(slider.thumbBase, slider.thumbPersistent)}"></media-slider-thumb>
               </media-volume-slider>
             </media-popover>
 
             <button commandfor="settings-menu" aria-label="Settings" class="${cn(button.base, button.subtle, button.icon, menu.settingsTrigger, 'media-button--settings')}">
-              ${renderIcon('gear', { class: cn(icon, menu.settingsIcon) })}
+              ${renderIcon('gear', { class: cn(icons.root, menu.settingsIcon) })}
             </button>
             <media-menu id="settings-menu" side="top" align="center" class="${menu.settings}">
               <media-menu-view class="${menu.rootView}">
                 <div class="${menu.group}">
                   <media-menu-item commandfor="settings-quality-menu" type="quality" data-setting="quality" class="${cn(menu.item, 'media-menu__item--submenu')}">
-                    ${renderIcon('switches', { class: icon })}
+                    ${renderIcon('switches', { class: icons.root })}
                     <span>Quality</span>
                     <span class="${menu.hint}">
                       <media-menu-item-value class="${menu.hintLabel}"></media-menu-item-value>
-                      ${renderIcon('chevron', { class: cn(icon, menu.chevron) })}
+                      ${renderIcon('chevron', { class: cn(icons.root, menu.chevron) })}
                     </span>
                   </media-menu-item>
                   <media-menu-item commandfor="settings-speed-menu" type="playback-rate" data-setting="playback-rate" class="${cn(menu.item, 'media-menu__item--submenu')}">
-                    ${renderIcon('speed', { class: icon })}
+                    ${renderIcon('speed', { class: icons.root })}
                     <span>Speed</span>
                     <span class="${menu.hint}">
                       <media-menu-item-value class="${menu.hintLabel}"></media-menu-item-value>
-                      ${renderIcon('chevron', { class: cn(icon, menu.chevron) })}
+                      ${renderIcon('chevron', { class: cn(icons.root, menu.chevron) })}
                     </span>
                   </media-menu-item>
                   <media-menu-item commandfor="settings-captions-menu" type="captions" data-setting="captions" class="${cn(menu.item, 'media-menu__item--submenu')}">
-                    ${renderIcon('captions-off', { class: icon })}
+                    ${renderIcon('captions-off', { class: icons.root })}
                     <span>Captions</span>
                     <span class="${menu.hint}">
                       <media-menu-item-value class="${menu.hintLabel}"></media-menu-item-value>
-                      ${renderIcon('chevron', { class: cn(icon, menu.chevron) })}
+                      ${renderIcon('chevron', { class: cn(icons.root, menu.chevron) })}
                     </span>
                   </media-menu-item>
                 </div>
@@ -172,7 +168,7 @@ function getTemplateHTML() {
 
               <media-menu id="settings-quality-menu" class="${menu.submenuPanel}">
                 <media-menu-back class="${menu.back}">
-                  ${renderIcon('chevron', { class: cn(icon, menu.chevron, iconFlipped) })}
+                  ${renderIcon('chevron', { class: cn(icons.root, menu.chevron, icons.flipped) })}
                   Quality
                 </media-menu-back>
                 <div class="${menu.separator}"></div>
@@ -185,7 +181,7 @@ function getTemplateHTML() {
                       </span>
                       <span data-part="badge" class="${cn(badge, menu.badge)}"></span>
                       <media-menu-item-indicator force-mount class="${menu.indicator}">
-                        ${renderIcon('check', { class: icon })}
+                        ${renderIcon('check', { class: icons.root })}
                       </media-menu-item-indicator>
                     </media-menu-radio-item>
                   </template>
@@ -194,7 +190,7 @@ function getTemplateHTML() {
 
               <media-menu id="settings-speed-menu" class="${menu.submenuPanel}">
                 <media-menu-back class="${menu.back}">
-                  ${renderIcon('chevron', { class: cn(icon, menu.chevron, iconFlipped) })}
+                  ${renderIcon('chevron', { class: cn(icons.root, menu.chevron, icons.flipped) })}
                   Speed
                 </media-menu-back>
                 <div class="${menu.separator}"></div>
@@ -203,7 +199,7 @@ function getTemplateHTML() {
                     <media-menu-radio-item class="${menu.item}">
                       <span data-part="label"></span>
                       <media-menu-item-indicator force-mount class="${menu.indicator}">
-                        ${renderIcon('check', { class: icon })}
+                        ${renderIcon('check', { class: icons.root })}
                       </media-menu-item-indicator>
                     </media-menu-radio-item>
                   </template>
@@ -212,7 +208,7 @@ function getTemplateHTML() {
 
               <media-menu id="settings-captions-menu" class="${menu.submenuPanel}">
                 <media-menu-back class="${menu.back}">
-                  ${renderIcon('chevron', { class: cn(icon, menu.chevron, iconFlipped) })}
+                  ${renderIcon('chevron', { class: cn(icons.root, menu.chevron, icons.flipped) })}
                   Captions
                 </media-menu-back>
                 <div class="${menu.separator}"></div>
@@ -221,7 +217,7 @@ function getTemplateHTML() {
                     <media-menu-radio-item class="${menu.item}">
                       <span data-part="label"></span>
                       <media-menu-item-indicator force-mount class="${menu.indicator}">
-                        ${renderIcon('check', { class: icon })}
+                        ${renderIcon('check', { class: icons.root })}
                       </media-menu-item-indicator>
                     </media-menu-radio-item>
                   </template>
@@ -229,37 +225,37 @@ function getTemplateHTML() {
               </media-menu>
             </media-menu>
 
-              <media-cast-button commandfor="cast-tooltip" class="${cn(button.base, button.subtle, button.icon, castIcon.button)}">
-                ${renderIcon('cast-enter', { class: cn(icon, castIcon.enter) })}
-                ${renderIcon('cast-exit', { class: cn(icon, castIcon.exit) })}
+              <media-cast-button commandfor="cast-tooltip" class="${cn(button.base, button.subtle, button.icon, icons.castButtonState)}">
+                ${renderIcon('cast-enter', { class: cn(icons.root, icons.castEnterIcon) })}
+                ${renderIcon('cast-exit', { class: cn(icons.root, icons.castExitIcon) })}
               </media-cast-button>
-              <media-tooltip id="cast-tooltip" side="top" class="${cn(popup.tooltip)}">
+              <media-tooltip id="cast-tooltip" side="top" class="${tooltip.root}">
                 <media-tooltip-label></media-tooltip-label>
-                <media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
+                <media-tooltip-shortcut class="${tooltip.shortcut}"></media-tooltip-shortcut>
               </media-tooltip>
-              <media-airplay-button commandfor="airplay-tooltip" class="${cn(button.base, button.subtle, button.icon, airplayIcon.button)}">
-                ${renderIcon('airplay-enter', { class: cn(icon, airplayIcon.enter) })}
-                ${renderIcon('airplay-exit', { class: cn(icon, airplayIcon.exit) })}
+              <media-airplay-button commandfor="airplay-tooltip" class="${cn(button.base, button.subtle, button.icon, icons.airplayButtonState)}">
+                ${renderIcon('airplay-enter', { class: cn(icons.root, icons.airplayEnterIcon) })}
+                ${renderIcon('airplay-exit', { class: cn(icons.root, icons.airplayExitIcon) })}
               </media-airplay-button>
-              <media-tooltip id="airplay-tooltip" side="top" class="${cn(popup.tooltip)}">
+              <media-tooltip id="airplay-tooltip" side="top" class="${tooltip.root}">
                 <media-tooltip-label></media-tooltip-label>
-                <media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
+                <media-tooltip-shortcut class="${tooltip.shortcut}"></media-tooltip-shortcut>
               </media-tooltip>
-              <media-pip-button commandfor="pip-tooltip" class="${cn(button.base, button.subtle, button.icon, pipIcon.button)}">
-                ${renderIcon('pip-enter', { class: cn(icon, pipIcon.off) })}
-                ${renderIcon('pip-exit', { class: cn(icon, pipIcon.on) })}
+              <media-pip-button commandfor="pip-tooltip" class="${cn(button.base, button.subtle, button.icon, icons.pipButtonState)}">
+                ${renderIcon('pip-enter', { class: cn(icons.root, icons.pipEnterIcon) })}
+                ${renderIcon('pip-exit', { class: cn(icons.root, icons.pipExitIcon) })}
               </media-pip-button>
-              <media-tooltip id="pip-tooltip" side="top" class="${cn(popup.tooltip)}">
+              <media-tooltip id="pip-tooltip" side="top" class="${tooltip.root}">
                 <media-tooltip-label></media-tooltip-label>
-                <media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
+                <media-tooltip-shortcut class="${tooltip.shortcut}"></media-tooltip-shortcut>
               </media-tooltip>
-              <media-fullscreen-button commandfor="fullscreen-tooltip" class="${cn(button.base, button.subtle, button.icon, fullscreenIcon.button)}">
-                ${renderIcon('fullscreen-enter', { class: cn(icon, fullscreenIcon.enter) })}
-                ${renderIcon('fullscreen-exit', { class: cn(icon, fullscreenIcon.exit) })}
+              <media-fullscreen-button commandfor="fullscreen-tooltip" class="${cn(button.base, button.subtle, button.icon, icons.fullscreenButtonState)}">
+                ${renderIcon('fullscreen-enter', { class: cn(icons.root, icons.fullscreenEnterIcon) })}
+                ${renderIcon('fullscreen-exit', { class: cn(icons.root, icons.fullscreenExitIcon) })}
               </media-fullscreen-button>
-              <media-tooltip id="fullscreen-tooltip" side="top" class="${cn(popup.tooltip)}">
+              <media-tooltip id="fullscreen-tooltip" side="top" class="${tooltip.root}">
                 <media-tooltip-label></media-tooltip-label>
-                <media-tooltip-shortcut class="${popup.tooltipShortcut}"></media-tooltip-shortcut>
+                <media-tooltip-shortcut class="${tooltip.shortcut}"></media-tooltip-shortcut>
               </media-tooltip>
           </div>
         </media-tooltip-group>
@@ -295,41 +291,34 @@ function getTemplateHTML() {
 
       <!-- Input Feedback -->
       <media-status-announcer></media-status-announcer>
-      <div class="${inputFeedback.root}">
-        <media-volume-indicator
-          hidden
-          class="${cn(inputFeedback.island.base, inputFeedback.island.volume, inputFeedback.island.shownVolume)}"
-        >
-          <media-volume-indicator-fill class="${inputFeedback.island.content}">
-            ${renderIcon('volume-high', { class: cn(inputFeedback.island.icon, inputFeedback.island.shownVolumeHigh) })}
-            ${renderIcon('volume-low', { class: cn(inputFeedback.island.icon, inputFeedback.island.shownVolumeLow) })}
-            ${renderIcon('volume-off', { class: cn(inputFeedback.island.icon, inputFeedback.island.shownVolumeOff) })}
-            <media-volume-indicator-value class="${inputFeedback.island.value}"></media-volume-indicator-value>
-          </media-volume-indicator-fill>
-        </media-volume-indicator>
+      <media-volume-indicator hidden class="${volumeIndicator.root}">
+        <media-volume-indicator-fill class="${indicator.content}">
+          ${renderIcon('volume-high', { class: cn(volumeIndicator.icon, volumeIndicator.highIcon) })}
+          ${renderIcon('volume-low', { class: cn(volumeIndicator.icon, volumeIndicator.lowIcon) })}
+          ${renderIcon('volume-off', { class: cn(volumeIndicator.icon, volumeIndicator.offIcon) })}
+          <media-volume-indicator-value class="${indicator.value}"></media-volume-indicator-value>
+        </media-volume-indicator-fill>
+      </media-volume-indicator>
 
-        <media-status-indicator hidden actions="toggleSubtitles toggleFullscreen togglePictureInPicture" class="${cn(inputFeedback.island.base, inputFeedback.island.shownStatus)}">
-          <div class="${inputFeedback.island.content}">
-            ${renderIcon('captions-on', { class: cn(inputFeedback.island.icon, inputFeedback.island.shownCaptionsOn) })}
-            ${renderIcon('captions-off', { class: cn(inputFeedback.island.icon, inputFeedback.island.shownCaptionsOff) })}
-            ${renderIcon('fullscreen-enter', { class: cn(inputFeedback.island.icon, inputFeedback.island.shownFullscreenEnter) })}
-            ${renderIcon('fullscreen-exit', { class: cn(inputFeedback.island.icon, inputFeedback.island.shownFullscreenExit) })}
-            ${renderIcon('pip-enter', { class: cn(inputFeedback.island.icon, inputFeedback.island.shownPipEnter) })}
-            ${renderIcon('pip-exit', { class: cn(inputFeedback.island.icon, inputFeedback.island.shownPipExit) })}
-            <media-status-indicator-value class="${inputFeedback.island.value}"></media-status-indicator-value>
-          </div>
-        </media-status-indicator>
+      <media-status-indicator hidden actions="toggleSubtitles toggleFullscreen togglePictureInPicture" class="${statusIndicator.top}">
+        ${renderIcon('captions-on', { class: cn(statusIndicator.topIcon, statusIndicator.captionsOnIcon) })}
+        ${renderIcon('captions-off', { class: cn(statusIndicator.topIcon, statusIndicator.captionsOffIcon) })}
+        ${renderIcon('fullscreen-enter', { class: cn(statusIndicator.topIcon, statusIndicator.fullscreenEnterIcon) })}
+        ${renderIcon('fullscreen-exit', { class: cn(statusIndicator.topIcon, statusIndicator.fullscreenExitIcon) })}
+        ${renderIcon('pip-enter', { class: cn(statusIndicator.topIcon, statusIndicator.pipEnterIcon) })}
+        ${renderIcon('pip-exit', { class: cn(statusIndicator.topIcon, statusIndicator.pipExitIcon) })}
+        <media-status-indicator-value class="${indicator.value}"></media-status-indicator-value>
+      </media-status-indicator>
 
-        <media-seek-indicator hidden class="${inputFeedback.bubble.base}">
-          ${renderIcon('chevron', { class: cn(inputFeedback.bubble.icon, inputFeedback.bubble.shownSeek) })}
-          <media-seek-indicator-value class="${inputFeedback.bubble.time}"></media-seek-indicator-value>
-        </media-seek-indicator>
+      <media-seek-indicator hidden class="${seekIndicator.root}">
+        ${renderIcon('chevron', { class: seekIndicator.icon })}
+        <media-seek-indicator-value class="${seekIndicator.value}"></media-seek-indicator-value>
+      </media-seek-indicator>
 
-        <media-status-indicator hidden actions="togglePaused" class="${inputFeedback.bubble.base}">
-          ${renderIcon('play', { class: cn(inputFeedback.bubble.icon, inputFeedback.bubble.shownPlay) })}
-          ${renderIcon('pause', { class: cn(inputFeedback.bubble.icon, inputFeedback.bubble.shownPause) })}
-        </media-status-indicator>
-      </div>
+      <media-status-indicator hidden actions="togglePaused" class="${statusIndicator.center}">
+        ${renderIcon('play', { class: cn(statusIndicator.centerIcon, statusIndicator.playIcon) })}
+        ${renderIcon('pause', { class: cn(statusIndicator.centerIcon, statusIndicator.pauseIcon) })}
+      </media-status-indicator>
     </media-container>
   `;
 }
diff --git a/packages/react/package.json b/packages/react/package.json
index f46f0c62..631c2e42 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -98,7 +98,7 @@
   "scripts": {
     "build": "tsdown",
     "build:watch": "tsdown --watch ./src --no-clean",
-    "compile:skins": "vjs compile --config skins.compiler.config.ts",
+    "compile:skins": "vjs compile --config skins.compiler.config.ts && biome check --write src/presets/video/__generated__/*.tsx",
     "dev": "pnpm build:watch",
     "test": "vitest run",
     "test:watch": "vitest",
diff --git a/packages/react/skins.compiler.config.ts b/packages/react/skins.compiler.config.ts
index e7b8be9d..4cdd422a 100644
--- a/packages/react/skins.compiler.config.ts
+++ b/packages/react/skins.compiler.config.ts
@@ -1,87 +1,188 @@
-import { defineConfig, transform } from '@videojs/compiler';
+import { type CompilerPlugin, defineConfig, transform } from '@videojs/compiler';
 import { tailwind } from '@videojs/compiler/tailwind';
+import { kebabCase } from '@videojs/utils/string';
 
 const CORE_COMPONENTS_SOURCE = '@videojs/core/components';
 const ICON_COMPONENTS_SOURCE = '@videojs/icons/components';
-const SOURCE_TAILWIND_SOURCE = './tailwind/video.tailwind';
-const GENERATED_TAILWIND_SOURCE = '@videojs/skins/default/tailwind/video.tailwind';
+const SOURCE_TAILWIND_CSS = '../skins/src/default/video.tailwind.css';
+const SOURCE_ANIMATIONS_CSS = '../skins/src/shared/animations.css';
+const SOURCE_REGISTERED_PROPERTIES_CSS = '../skins/src/shared/registered-properties.css';
+const SOURCE_SHARED_VARIABLES_CSS = '../skins/src/shared/variables.css';
+const SOURCE_DEFAULT_VIDEO_CSS = '../skins/src/default/video.css';
+const INPUT = {
+  'default-video': '../skins/src/default/video.skin.tsx',
+};
+const GENERATED_DIR = 'src/presets/video/__generated__';
+const GENERATED_BANNER = '// Generated by @videojs/compiler. Do not edit.\n';
 
 export default defineConfig({
-  input: {
-    'default-video': '../skins/src/default/video.skin.tsx',
-  },
+  input: INPUT,
   output: {
-    dir: 'src/presets/video',
-    entryFileNames: '[name].generated.tailwind.tsx',
-    banner: '// Generated by @videojs/compiler. Do not edit.\n',
+    dir: GENERATED_DIR,
+    entryFileNames: '[name].css.tsx',
+    banner: GENERATED_BANNER,
   },
   plugins: [
-    transform((code) => {
-      // Types
-      const BaseVideoSkinProps = code.import('./src/presets/types', 'BaseVideoSkinProps', { type: true });
-      const ReactNode = code.import('react', 'ReactNode', { type: true });
+    tailwind({
+      mode: 'extract',
+      input: SOURCE_TAILWIND_CSS,
+      output: 'default-video.css',
+      emit: {
+        mode: 'split',
+        base: [
+          SOURCE_ANIMATIONS_CSS,
+          SOURCE_REGISTERED_PROPERTIES_CSS,
+          SOURCE_SHARED_VARIABLES_CSS,
+          SOURCE_DEFAULT_VIDEO_CSS,
+        ],
+      },
+      vars: {
+        properties: { mode: 'inline' },
+      },
+      resolve: {
+        element(context) {
+          const className = mediaClassName(context.tag, context.tokenName ?? context.defaultName);
 
-      // Utils
-      const cn = code.import('@videojs/utils/style', 'cn');
-      const isString = code.import('@videojs/utils/predicate', 'isString');
-      const isRenderProp = code.import('@/utils/use-render', 'isRenderProp');
-
-      // Components
-      const Poster = code.import('@/ui/poster', 'Poster');
-
-      return [
-        code.imports({
-          [CORE_COMPONENTS_SOURCE]: coreComponentImport,
-          [ICON_COMPONENTS_SOURCE]: '@/icons',
-          [SOURCE_TAILWIND_SOURCE]: GENERATED_TAILWIND_SOURCE,
-        }),
-
-        tailwind({ mode: 'preserve' }),
-
-        code
-          .interface(/Props$/)
-          .property('children')
-          .setType(() => code.type.union(code.type.named(ReactNode), code.type.undefined())),
-
-        code.interface('DefaultVideoSkinProps').extends(BaseVideoSkinProps),
-
-        code.jsx.element(/^(Tooltip|Popover)\.Trigger$/).childToProp('render'),
-        code.jsx.element('Controls.Root').addProp('data-controls', ''),
-        code.jsx.element('Container').spreadProps('rest'),
-        code.jsx.element('Text').replace('span'),
-
-        code.jsx.element('Poster').replace(() =>
-          code.jsx.if(
-            'poster',
-            code.jsx.create(Poster, {
-              src: code.value.when('poster', isString),
-              render: code.value.when('poster', isRenderProp),
-            })
-          )
-        ),
-
-        code.jsx
-          .props('className')
-          .where(code.value.isArray())
-          .replace(({ value }) => code.value.call(cn, code.value.arrayItems(value))),
-
-        code.function('DefaultVideoSkin').addProps(['poster', { name: 'rest', spread: true }]),
-      ];
+          return {
+            className,
+            chunk: mediaChunk(className),
+          };
+        },
+        classList({ className, classes }) {
+          return [...classes, ...sharedClassNames(className)];
+        },
+      },
     }),
+    reactSkinTransform(),
   ],
 });
 
-function coreComponentImport(name: string): { source: string; name: string } {
+function reactSkinTransform(): CompilerPlugin {
+  return transform((code) => {
+    // Types
+    const BaseVideoSkinProps = code.import('./src/presets/types', 'BaseVideoSkinProps', { type: true });
+    const ReactNode = code.import('react', 'ReactNode', { type: true });
+
+    // Utils
+    const cn = code.import('@videojs/utils/style', 'cn');
+    const isString = code.import('@videojs/utils/predicate', 'isString');
+    const isRenderProp = code.import('@/utils/use-render', 'isRenderProp');
+
+    // Components
+    const Poster = code.import('@/ui/poster', 'Poster');
+
+    return [
+      code.imports({
+        [CORE_COMPONENTS_SOURCE]: resolveComponentImport,
+        [ICON_COMPONENTS_SOURCE]: '@/icons',
+      }),
+
+      code
+        .interface(/Props$/)
+        .property('children')
+        .setType(() => code.type.union(code.type.named(ReactNode), code.type.undefined())),
+
+      code.interface('DefaultVideoSkinProps').extends(BaseVideoSkinProps),
+
+      code.jsx.element(/^(Tooltip|Popover)\.Trigger$/).childToProp('render'),
+      code.jsx.element('Controls.Root').addProp('data-controls', ''),
+      code.jsx.element('Container').spreadProps('rest'),
+      code.jsx.element('Text').replace('span'),
+
+      code.jsx.element('Poster').replace(() =>
+        code.jsx.if(
+          'poster',
+          code.jsx.create(Poster, {
+            src: code.value.when('poster', isString),
+            render: code.value.when('poster', isRenderProp),
+          })
+        )
+      ),
+
+      code.jsx
+        .props('className')
+        .where(code.value.isArray())
+        .replace(({ value }) => code.value.call(cn, code.value.arrayItems(value))),
+
+      code.function('DefaultVideoSkin').addProps(['poster', { name: 'rest', spread: true }]),
+    ];
+  });
+}
+
+function resolveComponentImport(name: string): { source: string; name: string } {
   return {
-    source: name === 'Container' ? '@/player/context' : `@/ui/${componentModuleName(name)}`,
+    source: name === 'Container' ? '@/player/context' : `@/ui/${resolveComponentImportPath(name)}`,
     name,
   };
 }
 
-function componentModuleName(name: string): string {
-  return name
-    .replace(/^AirPlay/, 'Airplay')
-    .replace(/^PiP/, 'Pip')
-    .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
-    .toLowerCase();
+function resolveComponentImportPath(name: string): string {
+  const id = name.replace(/^AirPlay/, 'Airplay').replace(/^PiP/, 'Pip');
+  return kebabCase(id).replace(/^-/, '');
+}
+
+function mediaClassName(tag: string, defaultName: string): string {
+  const tokenName = normalizeTokenName(defaultName);
+
+  if (tag === 'Container') return 'media-root';
+  if (/Button$/.test(tag)) return 'media-button';
+  if (tag === 'ErrorDialog.Close') return 'media-error-close';
+  return prefixedDefaultName(tokenName);
+}
+
+function normalizeTokenName(name: string): string {
+  if (name.startsWith('icons-')) {
+    const iconName = stripRootSuffix(name.slice('icons-'.length));
+    return iconName === 'root' ? 'icon' : iconName;
+  }
+
+  return stripRootSuffix(name);
+}
+
+function stripRootSuffix(name: string): string {
+  return name.endsWith('-root') ? name.slice(0, -'-root'.length) : name;
+}
+
+function mediaChunk(className: string): string {
+  if (matchesClass(className, 'media-tooltip', 'media-popover', 'media-volume-popover')) return 'popup';
+  if (matchesClass(className, 'media-error')) return 'dialog';
+  if (matchesClass(className, 'media-buffering')) return 'loading';
+  if (matchesClass(className, 'media-controls')) return 'controls';
+  if (matchesClass(className, 'media-time')) return 'time';
+  if (matchesClass(className, 'media-slider', 'media-spinner')) return 'slider';
+  if (
+    matchesClass(
+      className,
+      'media-indicator',
+      'media-volume-indicator',
+      'media-status-indicator',
+      'media-seek-indicator'
+    )
+  ) {
+    return 'feedback';
+  }
+  if (matchesClass(className, 'media-button', 'media-seek-label')) return 'button';
+  if (className.endsWith('-icon') && className !== 'media-spinner') return 'button';
+  return 'base';
+}
+
+function sharedClassNames(className: string): string[] {
+  if (matchesClass(className, 'media-controls-group-start', 'media-controls-group-end'))
+    return ['media-controls-group'];
+  if (className === 'media-slider-thumb-persistent') return ['media-slider-thumb'];
+  if (matchesClass(className, 'media-status-indicator-top', 'media-status-indicator-center')) {
+    return ['media-status-indicator'];
+  }
+  if (matchesClass(className, 'media-seek-label-backward', 'media-seek-label-forward')) return ['media-seek-label'];
+  if (className === 'media-error-close') return ['media-button'];
+  if (className === 'media-volume-popover') return ['media-popover'];
+  return [];
+}
+
+function prefixedDefaultName(name: string): string {
+  return name.startsWith('media-') ? name : `media-${name}`;
+}
+
+function matchesClass(className: string, ...prefixes: string[]): boolean {
+  return prefixes.some((prefix) => className === prefix || className.startsWith(`${prefix}-`));
 }
diff --git a/packages/react/src/presets/audio/skin.tailwind.tsx b/packages/react/src/presets/audio/skin.tailwind.tsx
index 4943886c..a7475711 100644
--- a/packages/react/src/presets/audio/skin.tailwind.tsx
+++ b/packages/react/src/presets/audio/skin.tailwind.tsx
@@ -4,17 +4,15 @@ import {
   container,
   controls,
   error,
-  icon,
-  iconContainer,
-  iconFlipped,
+  icons,
   menu,
-  muteIcon,
   playbackRate,
-  playIcon,
-  popup,
+  popover,
   seek,
   slider,
   time,
+  tooltip,
+  volumePopover,
 } from '@videojs/skins/default/tailwind/audio.tailwind';
 import { cn } from '@videojs/utils/style';
 import { type ComponentProps, forwardRef, type ReactNode } from 'react';
@@ -73,7 +71,7 @@ const SliderFill = forwardRef<HTMLDivElement, ComponentProps<'div'> & { type?: '
   return (
     <div
       ref={ref}
-      className={cn(slider.fill.base, type === 'fill' ? slider.fill.fill : slider.fill.buffer, className)}
+      className={cn(slider.fillBase, type === 'fill' ? slider.fill : slider.buffer, className)}
       {...props}
     />
   );
@@ -90,7 +88,7 @@ const SliderThumb = forwardRef<HTMLDivElement, ComponentProps<'div'> & { persist
   return (
     <div
       ref={ref}
-      className={cn(slider.thumb.base, persistent ? slider.thumb.persistent : slider.thumb.interactive, className)}
+      className={cn(slider.thumbBase, persistent ? slider.thumbPersistent : slider.thumb, className)}
       {...props}
     />
   );
@@ -100,10 +98,10 @@ function VolumePopover(): ReactNode {
   const volumeUnsupported = usePlayer((s) => s.volumeAvailability === 'unsupported');
 
   const muteButton = (
-    <MuteButton className={muteIcon.button} render={<Button />}>
-      <VolumeOffIcon className={cn(icon, muteIcon.volumeOff)} />
-      <VolumeLowIcon className={cn(icon, muteIcon.volumeLow)} />
-      <VolumeHighIcon className={cn(icon, muteIcon.volumeHigh)} />
+    <MuteButton className={icons.muteButtonState} render={<Button />}>
+      <VolumeOffIcon className={cn(icons.root, icons.volumeOffIcon)} />
+      <VolumeLowIcon className={cn(icons.root, icons.volumeLowIcon)} />
+      <VolumeHighIcon className={cn(icons.root, icons.volumeHighIcon)} />
     </MuteButton>
   );
 
@@ -112,7 +110,7 @@ function VolumePopover(): ReactNode {
   return (
     <Popover.Root openOnHover delay={200} closeDelay={100} side="top" boundary="viewport">
       <Popover.Trigger render={muteButton} />
-      <Popover.Popup className={cn(popup.popover, popup.volume)}>
+      <Popover.Popup className={cn(popover.root, volumePopover.root)}>
         <VolumeSlider.Root orientation="vertical" thumbAlignment="edge" render={<SliderRoot />}>
           <VolumeSlider.Track render={<SliderTrack />}>
             <VolumeSlider.Fill render={<SliderFill />} />
@@ -136,7 +134,7 @@ function PlaybackRateRadioGroup(): ReactNode {
         <Menu.RadioItem key={option.value} className={menu.item} value={option.value} disabled={option.disabled}>
           <span>{option.label}</span>
           <Menu.ItemIndicator checked={option.value === value} forceMount className={menu.indicator}>
-            <CheckIcon className={icon} />
+            <CheckIcon className={icons.root} />
           </Menu.ItemIndicator>
         </Menu.RadioItem>
       ))}
@@ -185,16 +183,16 @@ export function AudioSkinTailwind(props: AudioSkinProps): ReactNode {
             <Tooltip.Root side="top" boundary="viewport">
               <Tooltip.Trigger
                 render={
-                  <PlayButton className={playIcon.button} render={<Button />}>
-                    <RestartIcon className={cn(icon, playIcon.restart)} />
-                    <PlayIcon className={cn(icon, playIcon.play)} />
-                    <PauseIcon className={cn(icon, playIcon.pause)} />
+                  <PlayButton className={icons.playButtonState} render={<Button />}>
+                    <RestartIcon className={cn(icons.root, icons.restartIcon)} />
+                    <PlayIcon className={cn(icons.root, icons.playIcon)} />
+                    <PauseIcon className={cn(icons.root, icons.pauseIcon)} />
                   </PlayButton>
                 }
               />
-              <Tooltip.Popup className={cn(popup.tooltip)}>
+              <Tooltip.Popup className={tooltip.root}>
                 <Tooltip.Label />
-                <Tooltip.Shortcut className={popup.tooltipShortcut} />
+                <Tooltip.Shortcut className={tooltip.shortcut} />
               </Tooltip.Popup>
             </Tooltip.Root>
 
@@ -202,16 +200,16 @@ export function AudioSkinTailwind(props: AudioSkinProps): ReactNode {
               <Tooltip.Trigger
                 render={
                   <SeekButton seconds={-SEEK_TIME} render={<Button />}>
-                    <span className={iconContainer}>
-                      <SeekIcon className={cn(icon, iconFlipped)} />
+                    <span className={icons.container}>
+                      <SeekIcon className={cn(icons.root, icons.flipped)} />
                       <span className={cn(seek.label, seek.labelBackward)}>{SEEK_TIME}</span>
                     </span>
                   </SeekButton>
                 }
               />
-              <Tooltip.Popup className={cn(popup.tooltip)}>
+              <Tooltip.Popup className={tooltip.root}>
                 <Tooltip.Label />
-                <Tooltip.Shortcut className={popup.tooltipShortcut} />
+                <Tooltip.Shortcut className={tooltip.shortcut} />
               </Tooltip.Popup>
             </Tooltip.Root>
 
@@ -219,16 +217,16 @@ export function AudioSkinTailwind(props: AudioSkinProps): ReactNode {
               <Tooltip.Trigger
                 render={
                   <SeekButton seconds={SEEK_TIME} render={<Button />}>
-                    <span className={iconContainer}>
-                      <SeekIcon className={icon} />
+                    <span className={icons.container}>
+                      <SeekIcon className={icons.root} />
                       <span className={cn(seek.label, seek.labelForward)}>{SEEK_TIME}</span>
                     </span>
                   </SeekButton>
                 }
               />
-              <Tooltip.Popup className={cn(popup.tooltip)}>
+              <Tooltip.Popup className={tooltip.root}>
                 <Tooltip.Label />
-                <Tooltip.Shortcut className={popup.tooltipShortcut} />
+                <Tooltip.Shortcut className={tooltip.shortcut} />
               </Tooltip.Popup>
             </Tooltip.Root>
           </div>
@@ -251,7 +249,7 @@ export function AudioSkinTailwind(props: AudioSkinProps): ReactNode {
           <div className={buttonGroup}>
             <Menu.Root side="top" align="center" boundary="viewport">
               <PlaybackRateTrigger />
-              <Menu.Content className={cn(popup.popover, menu.root)}>
+              <Menu.Content className={cn(popover.root, menu.root)}>
                 <PlaybackRateRadioGroup />
               </Menu.Content>
             </Menu.Root>
diff --git a/packages/react/src/presets/live-audio/skin.tailwind.tsx b/packages/react/src/presets/live-audio/skin.tailwind.tsx
index b2baf29b..7db8acbb 100644
--- a/packages/react/src/presets/live-audio/skin.tailwind.tsx
+++ b/packages/react/src/presets/live-audio/skin.tailwind.tsx
@@ -4,11 +4,11 @@ import {
   container,
   controls,
   error,
-  icon,
-  muteIcon,
-  playIcon,
-  popup,
+  icons,
+  popover,
   slider,
+  tooltip,
+  volumePopover,
 } from '@videojs/skins/default/tailwind/audio.tailwind';
 import { cn } from '@videojs/utils/style';
 import { type ComponentProps, forwardRef, type ReactNode } from 'react';
@@ -49,7 +49,7 @@ const SliderFill = forwardRef<HTMLDivElement, ComponentProps<'div'> & { type?: '
   return (
     <div
       ref={ref}
-      className={cn(slider.fill.base, type === 'fill' ? slider.fill.fill : slider.fill.buffer, className)}
+      className={cn(slider.fillBase, type === 'fill' ? slider.fill : slider.buffer, className)}
       {...props}
     />
   );
@@ -62,7 +62,7 @@ const SliderThumb = forwardRef<HTMLDivElement, ComponentProps<'div'> & { persist
   return (
     <div
       ref={ref}
-      className={cn(slider.thumb.base, persistent ? slider.thumb.persistent : slider.thumb.interactive, className)}
+      className={cn(slider.thumbBase, persistent ? slider.thumbPersistent : slider.thumb, className)}
       {...props}
     />
   );
@@ -72,10 +72,10 @@ function VolumePopover(): ReactNode {
   const volumeUnsupported = usePlayer((s) => s.volumeAvailability === 'unsupported');
 
   const muteButton = (
-    <MuteButton className={muteIcon.button} render={<Button />}>
-      <VolumeOffIcon className={cn(icon, muteIcon.volumeOff)} />
-      <VolumeLowIcon className={cn(icon, muteIcon.volumeLow)} />
-      <VolumeHighIcon className={cn(icon, muteIcon.volumeHigh)} />
+    <MuteButton className={icons.muteButtonState} render={<Button />}>
+      <VolumeOffIcon className={cn(icons.root, icons.volumeOffIcon)} />
+      <VolumeLowIcon className={cn(icons.root, icons.volumeLowIcon)} />
+      <VolumeHighIcon className={cn(icons.root, icons.volumeHighIcon)} />
     </MuteButton>
   );
 
@@ -84,7 +84,7 @@ function VolumePopover(): ReactNode {
   return (
     <Popover.Root openOnHover delay={200} closeDelay={100} side="top" boundary="viewport">
       <Popover.Trigger render={muteButton} />
-      <Popover.Popup className={cn(popup.popover, popup.volume)}>
+      <Popover.Popup className={cn(popover.root, volumePopover.root)}>
         <VolumeSlider.Root orientation="vertical" thumbAlignment="edge" render={<SliderRoot />}>
           <VolumeSlider.Track render={<SliderTrack />}>
             <VolumeSlider.Fill render={<SliderFill />} />
@@ -123,16 +123,16 @@ export function LiveAudioSkinTailwind(props: LiveAudioSkinProps): ReactNode {
             <Tooltip.Root side="top" boundary="viewport">
               <Tooltip.Trigger
                 render={
-                  <PlayButton className={playIcon.button} render={<Button />}>
-                    <RestartIcon className={cn(icon, playIcon.restart)} />
-                    <PlayIcon className={cn(icon, playIcon.play)} />
-                    <PauseIcon className={cn(icon, playIcon.pause)} />
+                  <PlayButton className={icons.playButtonState} render={<Button />}>
+                    <RestartIcon className={cn(icons.root, icons.restartIcon)} />
+                    <PlayIcon className={cn(icons.root, icons.playIcon)} />
+                    <PauseIcon className={cn(icons.root, icons.pauseIcon)} />
                   </PlayButton>
                 }
               />
-              <Tooltip.Popup className={cn(popup.tooltip)}>
+              <Tooltip.Popup className={tooltip.root}>
                 <Tooltip.Label />
-                <Tooltip.Shortcut className={popup.tooltipShortcut} />
+                <Tooltip.Shortcut className={tooltip.shortcut} />
               </Tooltip.Popup>
             </Tooltip.Root>
 
diff --git a/packages/react/src/presets/live-video/skin.tailwind.tsx b/packages/react/src/presets/live-video/skin.tailwind.tsx
index 4499772a..545058e9 100644
--- a/packages/react/src/presets/live-video/skin.tailwind.tsx
+++ b/packages/react/src/presets/live-video/skin.tailwind.tsx
@@ -1,25 +1,21 @@
 import {
-  airplayIcon,
-  bufferingIndicator,
+  buffering,
   button,
-  buttonGroupEnd,
-  buttonGroupStart,
-  captionsIcon,
-  castIcon,
   container,
   controls,
+  controlsGroup,
   error,
-  fullscreenIcon,
-  icon,
-  inputFeedback,
+  icons,
+  indicator,
   menu,
-  muteIcon,
   overlay,
-  pipIcon,
-  playIcon,
-  popup,
+  popover,
   poster,
   slider,
+  statusIndicator,
+  tooltip,
+  volumeIndicator,
+  volumePopover,
 } from '@videojs/skins/default/tailwind/video.tailwind';
 import { isString } from '@videojs/utils/predicate';
 import { cn } from '@videojs/utils/style';
@@ -98,7 +94,7 @@ const SliderFill = forwardRef<HTMLDivElement, ComponentProps<'div'> & { type?: '
   return (
     <div
       ref={ref}
-      className={cn(slider.fill.base, type === 'fill' ? slider.fill.fill : slider.fill.buffer, className)}
+      className={cn(slider.fillBase, type === 'fill' ? slider.fill : slider.buffer, className)}
       {...props}
     />
   );
@@ -111,7 +107,7 @@ const SliderThumb = forwardRef<HTMLDivElement, ComponentProps<'div'> & { persist
   return (
     <div
       ref={ref}
-      className={cn(slider.thumb.base, persistent ? slider.thumb.persistent : slider.thumb.interactive, className)}
+      className={cn(slider.thumbBase, persistent ? slider.thumbPersistent : slider.thumb, className)}
       {...props}
     />
   );
@@ -121,10 +117,10 @@ function VolumePopover(): ReactNode {
   const volumeUnsupported = usePlayer((s) => s.volumeAvailability === 'unsupported');
 
   const muteButton = (
-    <MuteButton className={muteIcon.button} render={<Button />}>
-      <VolumeOffIcon className={cn(icon, muteIcon.volumeOff)} />
-      <VolumeLowIcon className={cn(icon, muteIcon.volumeLow)} />
-      <VolumeHighIcon className={cn(icon, muteIcon.volumeHigh)} />
+    <MuteButton className={icons.muteButtonState} render={<Button />}>
+      <VolumeOffIcon className={cn(icons.root, icons.volumeOffIcon)} />
+      <VolumeLowIcon className={cn(icons.root, icons.volumeLowIcon)} />
+      <VolumeHighIcon className={cn(icons.root, icons.volumeHighIcon)} />
     </MuteButton>
   );
 
@@ -133,7 +129,7 @@ function VolumePopover(): ReactNode {
   return (
     <Popover.Root openOnHover delay={200} closeDelay={100} side="top">
       <Popover.Trigger render={muteButton} />
-      <Popover.Popup className={cn(popup.popover, popup.volume)}>
+      <Popover.Popup className={cn(popover.root, volumePopover.root)}>
         <VolumeSlider.Root orientation="vertical" thumbAlignment="edge" render={<SliderRoot />}>
           <VolumeSlider.Track render={<SliderTrack />}>
             <VolumeSlider.Fill render={<SliderFill />} />
@@ -156,15 +152,15 @@ function CaptionsTrigger(): ReactNode {
       <Tooltip.Root side="top">
         <Tooltip.Trigger
           render={
-            <CaptionsButton className={captionsIcon.button} render={<Button />}>
-              <CaptionsOffIcon className={cn(icon, captionsIcon.off)} />
-              <CaptionsOnIcon className={cn(icon, captionsIcon.on)} />
+            <CaptionsButton className={icons.captionsButtonState} render={<Button />}>
+              <CaptionsOffIcon className={cn(icons.root, icons.captionsOffIcon)} />
+              <CaptionsOnIcon className={cn(icons.root, icons.captionsOnIcon)} />
             </CaptionsButton>
           }
         />
-        <Tooltip.Popup className={cn(popup.tooltip)}>
+        <Tooltip.Popup className={tooltip.root}>
           <Tooltip.Label />
-          <Tooltip.Shortcut className={popup.tooltipShortcut} />
+          <Tooltip.Shortcut className={tooltip.shortcut} />
         </Tooltip.Popup>
       </Tooltip.Root>
     );
@@ -175,13 +171,13 @@ function CaptionsTrigger(): ReactNode {
       <Menu.Trigger
         disabled={disabled}
         render={
-          <CaptionsButton className={captionsIcon.button} render={<Button />}>
-            <CaptionsOffIcon className={cn(icon, captionsIcon.off)} />
-            <CaptionsOnIcon className={cn(icon, captionsIcon.on)} />
+          <CaptionsButton className={icons.captionsButtonState} render={<Button />}>
+            <CaptionsOffIcon className={cn(icons.root, icons.captionsOffIcon)} />
+            <CaptionsOnIcon className={cn(icons.root, icons.captionsOnIcon)} />
           </CaptionsButton>
         }
       />
-      <Menu.Content className={cn(popup.popover, menu.root)}>
+      <Menu.Content className={cn(popover.root, menu.root)}>
         <Menu.RadioGroup
           className={menu.group}
           value={captions.value}
@@ -192,7 +188,7 @@ function CaptionsTrigger(): ReactNode {
             <Menu.RadioItem key={option.value} className={menu.item} value={option.value} disabled={option.disabled}>
               <span>{option.label}</span>
               <Menu.ItemIndicator checked={option.value === captions.value} forceMount className={menu.indicator}>
-                <CheckIcon className={icon} />
+                <CheckIcon className={icons.root} />
               </Menu.ItemIndicator>
             </Menu.RadioItem>
           ))}
@@ -217,8 +213,8 @@ export function LiveVideoSkinTailwind(props: LiveVideoSkinProps): ReactNode {
         />
       )}
 
-      <BufferingIndicator className={bufferingIndicator.root}>
-        <SpinnerIcon className={icon} />
+      <BufferingIndicator className={buffering.root}>
+        <SpinnerIcon className={icons.root} />
       </BufferingIndicator>
 
       <ErrorDialog.Root>
@@ -240,20 +236,20 @@ export function LiveVideoSkinTailwind(props: LiveVideoSkinProps): ReactNode {
         className={controls}
       >
         <Tooltip.Provider>
-          <div className={buttonGroupStart}>
+          <div className={controlsGroup.start}>
             <Tooltip.Root side="top">
               <Tooltip.Trigger
                 render={
-                  <PlayButton className={playIcon.button} render={<Button />}>
-                    <RestartIcon className={cn(icon, playIcon.restart)} />
-                    <PlayIcon className={cn(icon, playIcon.play)} />
-                    <PauseIcon className={cn(icon, playIcon.pause)} />
+                  <PlayButton className={icons.playButtonState} render={<Button />}>
+                    <RestartIcon className={cn(icons.root, icons.restartIcon)} />
+                    <PlayIcon className={cn(icons.root, icons.playIcon)} />
+                    <PauseIcon className={cn(icons.root, icons.pauseIcon)} />
                   </PlayButton>
                 }
               />
-              <Tooltip.Popup className={cn(popup.tooltip)}>
+              <Tooltip.Popup className={tooltip.root}>
                 <Tooltip.Label />
-                <Tooltip.Shortcut className={popup.tooltipShortcut} />
+                <Tooltip.Shortcut className={tooltip.shortcut} />
               </Tooltip.Popup>
             </Tooltip.Root>
 
@@ -262,7 +258,7 @@ export function LiveVideoSkinTailwind(props: LiveVideoSkinProps): ReactNode {
 
           <div className="grow" aria-hidden="true" />
 
-          <div className={buttonGroupEnd}>
+          <div className={controlsGroup.end}>
             <VolumePopover />
 
             <CaptionsTrigger />
@@ -270,60 +266,60 @@ export function LiveVideoSkinTailwind(props: LiveVideoSkinProps): ReactNode {
             <Tooltip.Root side="top">
               <Tooltip.Trigger
                 render={
-                  <CastButton className={castIcon.button} render={<Button />}>
-                    <CastEnterIcon className={cn(icon, castIcon.enter)} />
-                    <CastExitIcon className={cn(icon, castIcon.exit)} />
+                  <CastButton className={icons.castButtonState} render={<Button />}>
+                    <CastEnterIcon className={cn(icons.root, icons.castEnterIcon)} />
+                    <CastExitIcon className={cn(icons.root, icons.castExitIcon)} />
                   </CastButton>
                 }
               />
-              <Tooltip.Popup className={cn(popup.tooltip)}>
+              <Tooltip.Popup className={tooltip.root}>
                 <Tooltip.Label />
-                <Tooltip.Shortcut className={popup.tooltipShortcut} />
+                <Tooltip.Shortcut className={tooltip.shortcut} />
               </Tooltip.Popup>
             </Tooltip.Root>
 
             <Tooltip.Root side="top">
               <Tooltip.Trigger
                 render={
-                  <AirPlayButton className={airplayIcon.button} render={<Button />}>
-                    <AirPlayEnterIcon className={cn(icon, airplayIcon.enter)} />
-                    <AirPlayExitIcon className={cn(icon, airplayIcon.exit)} />
+                  <AirPlayButton className={icons.airplayButtonState} render={<Button />}>
+                    <AirPlayEnterIcon className={cn(icons.root, icons.airplayEnterIcon)} />
+                    <AirPlayExitIcon className={cn(icons.root, icons.airplayExitIcon)} />
                   </AirPlayButton>
                 }
               />
-              <Tooltip.Popup className={cn(popup.tooltip)}>
+              <Tooltip.Popup className={tooltip.root}>
                 <Tooltip.Label />
-                <Tooltip.Shortcut className={popup.tooltipShortcut} />
+                <Tooltip.Shortcut className={tooltip.shortcut} />
               </Tooltip.Popup>
             </Tooltip.Root>
 
             <Tooltip.Root side="top">
               <Tooltip.Trigger
                 render={
-                  <PiPButton className={pipIcon.button} render={<Button />}>
-                    <PipEnterIcon className={cn(icon, pipIcon.off)} />
-                    <PipExitIcon className={cn(icon, pipIcon.on)} />
+                  <PiPButton className={icons.pipButtonState} render={<Button />}>
+                    <PipEnterIcon className={cn(icons.root, icons.pipEnterIcon)} />
+                    <PipExitIcon className={cn(icons.root, icons.pipExitIcon)} />
                   </PiPButton>
                 }
               />
-              <Tooltip.Popup className={cn(popup.tooltip)}>
+              <Tooltip.Popup className={tooltip.root}>
                 <Tooltip.Label />
-                <Tooltip.Shortcut className={popup.tooltipShortcut} />
+                <Tooltip.Shortcut className={tooltip.shortcut} />
               </Tooltip.Popup>
             </Tooltip.Root>
 
             <Tooltip.Root side="top">
               <Tooltip.Trigger
                 render={
-                  <FullscreenButton className={fullscreenIcon.button} render={<Button />}>
-                    <FullscreenEnterIcon className={cn(icon, fullscreenIcon.enter)} />
-                    <FullscreenExitIcon className={cn(icon, fullscreenIcon.exit)} />
+                  <FullscreenButton className={icons.fullscreenButtonState} render={<Button />}>
+                    <FullscreenEnterIcon className={cn(icons.root, icons.fullscreenEnterIcon)} />
+                    <FullscreenExitIcon className={cn(icons.root, icons.fullscreenExitIcon)} />
                   </FullscreenButton>
                 }
               />
-              <Tooltip.Popup className={cn(popup.tooltip)}>
+              <Tooltip.Popup className={tooltip.root}>
                 <Tooltip.Label />
-                <Tooltip.Shortcut className={popup.tooltipShortcut} />
+                <Tooltip.Shortcut className={tooltip.shortcut} />
               </Tooltip.Popup>
             </Tooltip.Root>
           </div>
@@ -349,38 +345,29 @@ export function LiveVideoSkinTailwind(props: LiveVideoSkinProps): ReactNode {
 
       {/* Input Feedback */}
       <StatusAnnouncer />
-      <div className={inputFeedback.root}>
-        <VolumeIndicator.Root
-          className={cn(inputFeedback.island.base, inputFeedback.island.volume, inputFeedback.island.shownVolume)}
-        >
-          <VolumeIndicator.Fill className={inputFeedback.island.content}>
-            <VolumeHighIcon className={cn(inputFeedback.island.icon, inputFeedback.island.shownVolumeHigh)} />
-            <VolumeLowIcon className={cn(inputFeedback.island.icon, inputFeedback.island.shownVolumeLow)} />
-            <VolumeOffIcon className={cn(inputFeedback.island.icon, inputFeedback.island.shownVolumeOff)} />
-            <VolumeIndicator.Value className={inputFeedback.island.value} />
-          </VolumeIndicator.Fill>
-        </VolumeIndicator.Root>
+      <VolumeIndicator.Root className={volumeIndicator.root}>
+        <VolumeIndicator.Fill className={indicator.content}>
+          <VolumeHighIcon className={cn(volumeIndicator.icon, volumeIndicator.highIcon)} />
+          <VolumeLowIcon className={cn(volumeIndicator.icon, volumeIndicator.lowIcon)} />
+          <VolumeOffIcon className={cn(volumeIndicator.icon, volumeIndicator.offIcon)} />
+          <VolumeIndicator.Value className={indicator.value} />
+        </VolumeIndicator.Fill>
+      </VolumeIndicator.Root>
 
-        <StatusIndicator.Root
-          actions={TOP_STATUS_ACTIONS}
-          className={cn(inputFeedback.island.base, inputFeedback.island.shownStatus)}
-        >
-          <div className={inputFeedback.island.content}>
-            <CaptionsOnIcon className={cn(inputFeedback.island.icon, inputFeedback.island.shownCaptionsOn)} />
-            <CaptionsOffIcon className={cn(inputFeedback.island.icon, inputFeedback.island.shownCaptionsOff)} />
-            <FullscreenEnterIcon className={cn(inputFeedback.island.icon, inputFeedback.island.shownFullscreenEnter)} />
-            <FullscreenExitIcon className={cn(inputFeedback.island.icon, inputFeedback.island.shownFullscreenExit)} />
-            <PipEnterIcon className={cn(inputFeedback.island.icon, inputFeedback.island.shownPipEnter)} />
-            <PipExitIcon className={cn(inputFeedback.island.icon, inputFeedback.island.shownPipExit)} />
-            <StatusIndicator.Value className={inputFeedback.island.value} />
-          </div>
-        </StatusIndicator.Root>
+      <StatusIndicator.Root actions={TOP_STATUS_ACTIONS} className={statusIndicator.top}>
+        <CaptionsOnIcon className={cn(statusIndicator.topIcon, statusIndicator.captionsOnIcon)} />
+        <CaptionsOffIcon className={cn(statusIndicator.topIcon, statusIndicator.captionsOffIcon)} />
+        <FullscreenEnterIcon className={cn(statusIndicator.topIcon, statusIndicator.fullscreenEnterIcon)} />
+        <FullscreenExitIcon className={cn(statusIndicator.topIcon, statusIndicator.fullscreenExitIcon)} />
+        <PipEnterIcon className={cn(statusIndicator.topIcon, statusIndicator.pipEnterIcon)} />
+        <PipExitIcon className={cn(statusIndicator.topIcon, statusIndicator.pipExitIcon)} />
+        <StatusIndicator.Value className={indicator.value} />
+      </StatusIndicator.Root>
 
-        <StatusIndicator.Root actions={CENTER_STATUS_ACTIONS} className={inputFeedback.bubble.base}>
-          <PlayIcon className={cn(inputFeedback.bubble.icon, inputFeedback.bubble.shownPlay)} />
-          <PauseIcon className={cn(inputFeedback.bubble.icon, inputFeedback.bubble.shownPause)} />
-        </StatusIndicator.Root>
-      </div>
+      <StatusIndicator.Root actions={CENTER_STATUS_ACTIONS} className={statusIndicator.center}>
+        <PlayIcon className={cn(statusIndicator.centerIcon, statusIndicator.playIcon)} />
+        <PauseIcon className={cn(statusIndicator.centerIcon, statusIndicator.pauseIcon)} />
+      </StatusIndicator.Root>
 
       {/* Hotkeys */}
       <Hotkey keys="Space" action="togglePaused" />
@@ -399,38 +386,29 @@ export function LiveVideoSkinTailwind(props: LiveVideoSkinProps): ReactNode {
 
       {/* Input Feedback */}
       <StatusAnnouncer />
-      <div className={inputFeedback.root}>
-        <VolumeIndicator.Root
-          className={cn(inputFeedback.island.base, inputFeedback.island.volume, inputFeedback.island.shownVolume)}
-        >
-          <VolumeIndicator.Fill className={inputFeedback.island.content}>
-            <VolumeHighIcon className={cn(inputFeedback.island.icon, inputFeedback.island.shownVolumeHigh)} />
-            <VolumeLowIcon className={cn(inputFeedback.island.icon, inputFeedback.island.shownVolumeLow)} />
-            <VolumeOffIcon className={cn(inputFeedback.island.icon, inputFeedback.island.shownVolumeOff)} />
-            <VolumeIndicator.Value className={inputFeedback.island.value} />
-          </VolumeIndicator.Fill>
-        </VolumeIndicator.Root>
+      <VolumeIndicator.Root className={volumeIndicator.root}>
+        <VolumeIndicator.Fill className={indicator.content}>
+          <VolumeHighIcon className={cn(volumeIndicator.icon, volumeIndicator.highIcon)} />
+          <VolumeLowIcon className={cn(volumeIndicator.icon, volumeIndicator.lowIcon)} />
+          <VolumeOffIcon className={cn(volumeIndicator.icon, volumeIndicator.offIcon)} />
+          <VolumeIndicator.Value className={indicator.value} />
+        </VolumeIndicator.Fill>
+      </VolumeIndicator.Root>
 
-        <StatusIndicator.Root
-          actions={TOP_STATUS_ACTIONS}
-          className={cn(inputFeedback.island.base, inputFeedback.island.shownStatus)}
-        >
-          <div className={inputFeedback.island.content}>
-            <CaptionsOnIcon className={cn(inputFeedback.island.icon, inputFeedback.island.shownCaptionsOn)} />
-            <CaptionsOffIcon className={cn(inputFeedback.island.icon, inputFeedback.island.shownCaptionsOff)} />
-            <FullscreenEnterIcon className={cn(inputFeedback.island.icon, inputFeedback.island.shownFullscreenEnter)} />
-            <FullscreenExitIcon className={cn(inputFeedback.island.icon, inputFeedback.island.shownFullscreenExit)} />
-            <PipEnterIcon className={cn(inputFeedback.island.icon, inputFeedback.island.shownPipEnter)} />
-            <PipExitIcon className={cn(inputFeedback.island.icon, inputFeedback.island.shownPipExit)} />
-            <StatusIndicator.Value className={inputFeedback.island.value} />
-          </div>
-        </StatusIndicator.Root>
+      <StatusIndicator.Root actions={TOP_STATUS_ACTIONS} className={statusIndicator.top}>
+        <CaptionsOnIcon className={cn(statusIndicator.topIcon, statusIndicator.captionsOnIcon)} />
+        <CaptionsOffIcon className={cn(statusIndicator.topIcon, statusIndicator.captionsOffIcon)} />
+        <FullscreenEnterIcon className={cn(statusIndicator.topIcon, statusIndicator.fullscreenEnterIcon)} />
+        <FullscreenExitIcon className={cn(statusIndicator.topIcon, statusIndicator.fullscreenExitIcon)} />
+        <PipEnterIcon className={cn(statusIndicator.topIcon, statusIndicator.pipEnterIcon)} />
+        <PipExitIcon className={cn(statusIndicator.topIcon, statusIndicator.pipExitIcon)} />
+        <StatusIndicator.Value className={indicator.value} />
+      </StatusIndicator.Root>
 
-        <StatusIndicator.Root actions={CENTER_STATUS_ACTIONS} className={inputFeedback.bubble.base}>
-          <PlayIcon className={cn(inputFeedback.bubble.icon, inputFeedback.bubble.shownPlay)} />
-          <PauseIcon className={cn(inputFeedback.bubble.icon, inputFeedback.bubble.shownPause)} />
-        </StatusIndicator.Root>
-      </div>
+      <StatusIndicator.Root actions={CENTER_STATUS_ACTIONS} className={statusIndicator.center}>
+        <PlayIcon className={cn(statusIndicator.centerIcon, statusIndicator.playIcon)} />
+        <PauseIcon className={cn(statusIndicator.centerIcon, statusIndicator.pauseIcon)} />
+      </StatusIndicator.Root>
     </Container>
   );
 }
diff --git a/packages/react/src/presets/tests/skins-compiler-config.test.ts b/packages/react/src/presets/tests/skins-compiler-config.test.ts
deleted file mode 100644
index aeedf047..00000000
--- a/packages/react/src/presets/tests/skins-compiler-config.test.ts
+++ /dev/null
@@ -1,152 +0,0 @@
-import { compileProject } from '@videojs/compiler';
-import { describe, expect, it } from 'vitest';
-import config from '../../../skins.compiler.config';
-
-const compact = (value: string): string => value.replace(/\s+/g, '');
-
-describe('skins compiler config', () => {
-  it('lowers the default video source skin to a React Tailwind slice', async () => {
-    const result = await compileProject(config);
-    const output = result.files.find(
-      (file) => file.type === 'chunk' && file.fileName.endsWith('default-video.generated.tailwind.tsx')
-    );
-
-    expect(result.diagnostics).toEqual([]);
-    expect(output).toBeDefined();
-    const code = output!.source;
-
-    expect(code).not.toContain('@videojs/core/components');
-    expect(code).not.toContain('@videojs/icons/components');
-    expect(code).not.toContain('./tailwind/video.tailwind');
-    expect(code).toContain('from "@videojs/skins/default/tailwind/video.tailwind"');
-    expect(code).toContain('from "@videojs/utils/style"');
-    expect(code).toContain('from "@/player/context"');
-    expect(code).toContain('from "@/ui/airplay-button"');
-    expect(code).toContain('from "@/ui/buffering-indicator"');
-    expect(code).toContain('from "@/ui/error-dialog"');
-    expect(code).toContain('from "@/ui/feature-availability"');
-    expect(code).toContain('from "@/ui/mute-button"');
-    expect(code).toContain('from "@/ui/overlay"');
-    expect(code).toContain('from "@/ui/pip-button"');
-    expect(code).toContain('from "@/ui/play-button"');
-    expect(code).toContain('from "@/ui/popover"');
-    expect(code).toContain('from "@/ui/poster"');
-    expect(code).toContain('from "@/ui/seek-indicator"');
-    expect(code).toContain('from "@/ui/slider"');
-    expect(code).toContain('from "@/ui/status-indicator"');
-    expect(code).toContain('from "@/ui/volume-indicator"');
-    expect(code).toContain('from "@/ui/volume-slider"');
-    expect(code).not.toContain('from "@/ui/text"');
-    expect(code).toContain('from "@/utils/use-render"');
-    expect(code).toContain('from "@videojs/utils/predicate"');
-    expect(code).toContain('from "@/icons"');
-    expect(code).not.toContain('from "../skin-renderers"');
-    expect(code).toContain('from "../types"');
-    expect(code).toContain('import type { ReactNode } from "react"');
-
-    const compactCode = compact(code);
-    expect(compactCode).toContain(compact('export interface DefaultVideoSkinProps extends BaseVideoSkinProps'));
-    expect(compactCode).toContain(compact('const iconButton = [button.base, button.subtle, button.icon];'));
-    expect(compactCode).toContain(
-      compact("const TOP_STATUS_ACTIONS = ['toggleSubtitles', 'toggleFullscreen', 'togglePictureInPicture'] as const;")
-    );
-    expect(compactCode).toContain(compact("const CENTER_STATUS_ACTIONS = ['togglePaused'] as const;"));
-    expect(compactCode).toContain(compact('children?: ReactNode | undefined;'));
-    expect(compactCode).toContain(
-      compact('DefaultVideoSkin({ className, children, poster, ...rest }: DefaultVideoSkinProps)')
-    );
-    expect(compactCode).toContain(compact('<Container className={cn(container, className)} {...rest}>'));
-    expect(compactCode).toContain(
-      compact(
-        '{poster && <Poster src={isString(poster) ? poster : undefined} render={isRenderProp(poster) ? poster : undefined} />}'
-      )
-    );
-    expect(compactCode).toContain(compact('<BufferingIndicator className={bufferingIndicator.root}>'));
-    expect(compactCode).toContain(compact('<SpinnerIcon className={icon} />'));
-    expect(compactCode).not.toContain('BufferingIndicatorRoot');
-    expect(compactCode).not.toContain('bufferingIndicator.container');
-    expect(compactCode).toContain(compact('<ErrorDialog.Popup className={error.popup}>'));
-    expect(compactCode).toContain(
-      compact('<ErrorDialog.Title className={error.title}>Something went wrong.</ErrorDialog.Title>')
-    );
-    expect(compactCode).toContain(compact('<ErrorDialog.Description className={error.description} />'));
-    expect(compactCode).toContain(
-      compact('<ErrorDialog.Close className={cn(button.base, button.primary, error.close)}>OK</ErrorDialog.Close>')
-    );
-    expect(compactCode).not.toContain('ErrorDialog.Panel');
-    expect(compactCode).not.toContain('ErrorDialog.Content');
-    expect(compactCode).not.toContain('ErrorDialog.Actions');
-    expect(compactCode).toContain(compact('<Controls.Root className={controls} data-controls="">'));
-    expect(compactCode).toContain(compact('<Overlay className={overlay} />'));
-    expect(compactCode).not.toContain(compact('<div className={overlay} />'));
-    expect(compactCode).not.toContain('inputFeedback.root');
-    expect(compactCode).toContain(
-      compact(
-        '<VolumeIndicator.Root className={cn(inputFeedback.island.root, inputFeedback.island.base, inputFeedback.island.volume, inputFeedback.island.shownVolume)}>'
-      )
-    );
-    expect(compactCode).toContain(compact('<VolumeIndicator.Fill className={inputFeedback.island.content}>'));
-    expect(compactCode).toContain(
-      compact('<VolumeHighIcon className={cn(inputFeedback.island.icon, inputFeedback.island.shownVolumeHigh)} />')
-    );
-    expect(compactCode).toContain(
-      compact(
-        '<StatusIndicator.Root actions={TOP_STATUS_ACTIONS} className={cn(inputFeedback.island.root, inputFeedback.island.base, inputFeedback.island.statusContent, inputFeedback.island.shownStatus)}>'
-      )
-    );
-    expect(compactCode).toContain(
-      compact(
-        '<SeekIndicator.Root className={cn(inputFeedback.bubble.root, inputFeedback.bubble.seekRoot, inputFeedback.bubble.base)}>'
-      )
-    );
-    expect(compactCode).toContain(
-      compact(
-        '<StatusIndicator.Root actions={CENTER_STATUS_ACTIONS} className={cn(inputFeedback.bubble.root, inputFeedback.bubble.centerRoot, inputFeedback.bubble.base)}>'
-      )
-    );
-    expect(compactCode).toContain(compact('<Tooltip.Trigger render={<PlayButton'));
-    expect(compactCode).toContain(compact('<PlayButton className={cn(iconButton, playIcon.button)}>'));
-    expect(compactCode).toContain(compact('<SeekButton seconds={-SEEK_TIME} className={cn(iconButton, seek.button)}>'));
-    expect(compactCode).toContain(compact('<SeekIcon className={cn(icon, iconFlipped)} />'));
-    expect(compactCode).toContain(compact('<span className={cn(seek.label, seek.labelBackward)}>{SEEK_TIME}</span>'));
-    expect(compactCode).toContain(compact('<SeekButton seconds={SEEK_TIME} className={cn(iconButton, seek.button)}>'));
-    expect(compactCode).toContain(compact('<span className={cn(seek.label, seek.labelForward)}>{SEEK_TIME}</span>'));
-    expect(compactCode).not.toContain('iconContainer');
-    expect(compactCode).not.toContain('<Text');
-    expect(compactCode).not.toContain(compact('render={<Button />}'));
-    expect(compactCode).toContain(compact('function MuteControl()'));
-    expect(compactCode).toContain(compact('<FeatureAvailability is="volume" when="unsupported">'));
-    expect(compactCode).toContain(compact('<FeatureAvailability is="volume" except="unsupported">'));
-    expect(compactCode).toContain(compact('<Popover.Root openOnHover delay={200} closeDelay={100} side="top">'));
-    expect(compactCode).toContain(compact('<Popover.Trigger render={<MuteControl />} />'));
-    expect(compactCode).toContain(compact('<MuteButton className={cn(iconButton, muteIcon.button)}>'));
-    expect(compactCode).toContain(compact('<VolumeOffIcon className={cn(icon, muteIcon.volumeOff)} />'));
-    expect(compactCode).toContain(compact('<Popover.Popup className={cn(popup.popover, popup.volume)}>'));
-    expect(compactCode).toContain(
-      compact('<VolumeSlider.Root orientation="vertical" thumbAlignment="edge" className={slider.root}>')
-    );
-    expect(compactCode).toContain(compact('<VolumeSlider.Fill className={cn(slider.fill.base, slider.fill.fill)} />'));
-    expect(compactCode).toContain(
-      compact('<VolumeSlider.Thumb className={cn(slider.thumb.base, slider.thumb.persistent)} />')
-    );
-    expect(compactCode).not.toContain('functionVolumePopover');
-    expect(compactCode).not.toContain('VolumePopover');
-    expect(compactCode).toContain(compact('<TimeSlider.Root className={slider.root}>'));
-    expect(compactCode).toContain(compact('<TimeSlider.Track className={slider.track}>'));
-    expect(compactCode).toContain(compact('<TimeSlider.Fill className={cn(slider.fill.base, slider.fill.fill)} />'));
-    expect(compactCode).toContain(
-      compact('<TimeSlider.Buffer className={cn(slider.fill.base, slider.fill.buffer)} />')
-    );
-    expect(compactCode).toContain(
-      compact('<TimeSlider.Thumb className={cn(slider.thumb.base, slider.thumb.interactive)} />')
-    );
-    expect(compactCode).toContain(compact('<Slider.Thumbnail.Root className={thumbnail.root}>'));
-    expect(compactCode).toContain(compact('<Slider.Thumbnail.Image className={thumbnail.image} />'));
-    expect(compactCode).toContain(compact('<TimeSlider.Value type="pointer" className={thumbnail.time} />'));
-    expect(compactCode).toContain(compact('<SpinnerIcon className={cn(icon, thumbnail.spinner)} />'));
-    expect(compactCode).toContain(compact('<TimeSlider.Preview className={slider.preview}>'));
-    expect(compactCode).toContain(compact('<TimeSlider.Value type="pointer" className={slider.value} />'));
-    expect(compactCode).not.toContain('SliderTrack');
-    expect(compactCode).not.toContain('className={[');
-  });
-});
diff --git a/packages/react/src/presets/video/__generated__/base.css b/packages/react/src/presets/video/__generated__/base.css
new file mode 100644
index 00000000..65bf9592
--- /dev/null
+++ b/packages/react/src/presets/video/__generated__/base.css
@@ -0,0 +1,128 @@
+:is(.media-root *) {
+  box-sizing: border-box;
+}
+
+.media-overlay {
+  position: absolute;
+  inset: calc(var(--spacing) * 0);
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  pointer-events: none;
+  border-radius: inherit;
+  opacity: 0%;
+  -webkit-backdrop-filter: saturate(100%);
+  backdrop-filter: saturate(100%);
+  transition-timing-function: var(--ease-out);
+  transition-duration: var(--media-controls-transition-duration);
+  transition-property: opacity, backdrop-filter;
+}
+
+.media-overlay[data-error-visible] {
+  -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(150%);
+  backdrop-filter: blur(var(--blur-lg)) saturate(150%);
+  transition-delay: var(--media-error-dialog-transition-delay);
+  transition-duration: var(--media-error-dialog-transition-duration);
+}
+
+.media-overlay[data-visible] {
+  opacity: 100%;
+}
+
+.media-root {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 100%;
+  container-name: media-container;
+  container-type: inline-size;
+  overflow: clip;
+  font-family:
+    Inter Variable,
+    Inter,
+    ui-sans-serif,
+    system-ui,
+    sans-serif;
+  font-size: 0.8125rem;
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
+  line-height: var(--leading-normal);
+  outline-width: 2px;
+  outline-style: solid;
+  outline-color: transparent;
+  outline-offset: calc(4px * -1);
+  background-color: var(--color-black);
+  border-radius: var(--media-border-radius, 2rem);
+  isolation: isolate;
+  transition-timing-function: var(--ease-out);
+  transition-duration: 100ms;
+  transition-property: outline-offset, outline-color;
+}
+
+.media-root [hidden][hidden] {
+  display: none;
+}
+
+.media-root button {
+  font-family: inherit;
+}
+
+.media-root video {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: var(--media-object-fit, contain);
+  object-position: var(--media-object-position, center);
+  border-radius: inherit;
+}
+
+.media-root video::-webkit-media-text-track-container {
+  z-index: 1;
+  font-family: inherit;
+  scale: 98% 98%;
+  translate: 0 var(--media-caption-track-y);
+  transition-delay: var(--media-caption-track-delay);
+  transition-timing-function: var(--ease-out);
+  transition-duration: var(--media-caption-track-duration);
+  transition-property: translate;
+}
+
+.media-root:after {
+  position: absolute;
+  inset: calc(var(--spacing) * 0);
+  z-index: 10;
+  pointer-events: none;
+  content: "";
+  border-radius: inherit;
+  box-shadow:
+    0 0 #0000,
+    0 0 #0000,
+    0 0 #0000,
+    inset 0 0 0 calc(1px + 0px) color-mix(in oklab, var(--color-black) 10%, transparent),
+    0 0 #0000;
+}
+
+.media-root:focus-visible {
+  outline-color: currentcolor;
+  outline-offset: 2px;
+}
+
+.media-root:fullscreen {
+  --media-border-radius: 0;
+}
+
+.media-root:fullscreen video {
+  object-fit: contain;
+}
+
+@media (prefers-color-scheme: dark) {
+  .media-root {
+    content: "";
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .media-root {
+    interpolate-size: allow-keywords;
+  }
+}
diff --git a/packages/react/src/presets/video/__generated__/button.css b/packages/react/src/presets/video/__generated__/button.css
new file mode 100644
index 00000000..3d74d40c
--- /dev/null
+++ b/packages/react/src/presets/video/__generated__/button.css
@@ -0,0 +1,166 @@
+.media-airplay-enter-icon,
+.media-airplay-exit-icon,
+.media-cast-enter-icon,
+.media-cast-exit-icon,
+.media-fullscreen-enter-icon,
+.media-fullscreen-exit-icon,
+.media-pause-icon,
+.media-pip-enter-icon,
+.media-pip-exit-icon,
+.media-play-icon,
+.media-restart-icon,
+.media-volume-high-icon,
+.media-volume-low-icon,
+.media-volume-off-icon {
+  display: none;
+  filter: drop-shadow(0 1px 0 var(--media-current-shadow-color));
+  flex-shrink: 0;
+  grid-area: 1 / 1;
+  height: var(--media-icon-size);
+  opacity: 0%;
+  transition-behavior: allow-discrete;
+  transition-duration: 150ms;
+  transition-property: display, opacity;
+  transition-timing-function: var(--ease-out);
+  width: var(--media-icon-size);
+}
+
+.media-airplay-enter-icon:is(:where(.media-button):not([data-airplay-state="connected"]) *),
+.media-airplay-exit-icon:is(:where(.media-button)[data-airplay-state="connected"] *),
+.media-cast-enter-icon:is(:where(.media-button):not([data-cast-state="connected"]) *),
+.media-cast-exit-icon:is(:where(.media-button)[data-cast-state="connected"] *),
+.media-fullscreen-enter-icon:is(:where(.media-button):not([data-fullscreen]) *),
+.media-fullscreen-exit-icon:is(:where(.media-button)[data-fullscreen] *),
+.media-pause-icon:is(:where(.media-button)[data-started] *):is(:where(.media-button):not([data-paused]) *):is(
+    :where(.media-button):not([data-ended]) *
+  ),
+.media-pip-enter-icon:is(:where(.media-button):not([data-pip]) *),
+.media-pip-exit-icon:is(:where(.media-button)[data-pip] *),
+.media-play-icon:is(:where(.media-button):not([data-ended]) *):is(:where(.media-button):not([data-started]) *),
+.media-play-icon:is(:where(.media-button):not([data-ended]) *):is(:where(.media-button)[data-paused] *),
+.media-restart-icon:is(:where(.media-button)[data-ended] *),
+.media-volume-high-icon:is(:where(.media-button):not([data-muted]) *):is(
+    :where(.media-button):not([data-volume-level="low"]) *
+  ),
+.media-volume-low-icon:is(:where(.media-button):not([data-muted]) *):is(
+    :where(.media-button)[data-volume-level="low"] *
+  ),
+.media-volume-off-icon:is(:where(.media-button)[data-muted] *) {
+  display: block;
+  opacity: 100%;
+}
+
+.media-button {
+  position: relative;
+  display: grid;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: calc(var(--spacing) * 9);
+  min-height: calc(var(--spacing) * 0);
+  aspect-ratio: 1 / 1;
+  padding: calc(var(--spacing) * 0);
+  padding-block: calc(var(--spacing) * 2);
+  padding-inline: calc(var(--spacing) * 4);
+  color: inherit;
+  text-align: center;
+  touch-action: manipulation;
+  cursor: pointer;
+  -webkit-user-select: none;
+  user-select: none;
+  outline-width: 2px;
+  outline-style: solid;
+  outline-color: transparent;
+  outline-offset: calc(2px * -1);
+  background-color: transparent;
+  border-style: none;
+  border-radius: calc(infinity * 1px);
+  transition-timing-function: var(--ease-out);
+  transition-duration: 150ms;
+  transition-property: background-color, outline-offset, scale;
+  will-change: scale;
+}
+
+.media-button:active {
+  scale: 90% 90%;
+}
+
+.media-button:disabled {
+  cursor: not-allowed;
+  opacity: 50%;
+  filter: grayscale(100%);
+}
+
+.media-button:focus-visible {
+  outline-color: currentcolor;
+  outline-offset: 2px;
+  background-color: color-mix(in oklab, currentcolor 10%, transparent);
+}
+
+.media-button:not([data-airplay-state="connected"]) {
+  --media-icon--airplay__fill-animation: none;
+  --media-icon--airplay__triangle-animation: none;
+}
+
+.media-button[aria-expanded="true"] {
+  background-color: color-mix(in oklab, currentcolor 10%, transparent);
+}
+
+.media-button[data-availability="unavailable"],
+.media-button[data-availability="unsupported"] {
+  display: none;
+}
+
+.media-icon {
+  display: block;
+  filter: drop-shadow(0 1px 0 var(--media-current-shadow-color));
+  flex-shrink: 0;
+  grid-area: 1 / 1;
+  height: var(--media-icon-size);
+  transition-behavior: allow-discrete;
+  transition-duration: 150ms;
+  transition-property: display, opacity;
+  transition-timing-function: var(--ease-out);
+  width: var(--media-icon-size);
+}
+
+.media-seek-backward-icon {
+  display: block;
+  filter: drop-shadow(0 1px 0 var(--media-current-shadow-color));
+  flex-shrink: 0;
+  grid-area: 1 / 1;
+  height: var(--media-icon-size);
+  scale: -1 1;
+  transition-behavior: allow-discrete;
+  transition-duration: 150ms;
+  transition-property: display, opacity;
+  transition-timing-function: var(--ease-out);
+  width: var(--media-icon-size);
+}
+
+.media-seek-label-backward {
+  position: absolute;
+  bottom: calc(var(--spacing) * -0.75);
+  left: -1px;
+  font-size: 10px;
+  font-weight: var(--font-weight-medium);
+  font-variant-numeric: tabular-nums;
+  letter-spacing: var(--tracking-tighter);
+}
+
+.media-seek-label-forward {
+  position: absolute;
+  right: -1px;
+  bottom: calc(var(--spacing) * -0.75);
+  font-size: 10px;
+  font-weight: var(--font-weight-medium);
+  font-variant-numeric: tabular-nums;
+  letter-spacing: var(--tracking-tighter);
+}
+
+@media (hover: hover) {
+  .media-button:hover {
+    text-decoration-line: none;
+    background-color: color-mix(in oklab, currentcolor 10%, transparent);
+  }
+}
diff --git a/packages/react/src/presets/video/__generated__/controls.css b/packages/react/src/presets/video/__generated__/controls.css
new file mode 100644
index 00000000..0bcc3a9e
--- /dev/null
+++ b/packages/react/src/presets/video/__generated__/controls.css
@@ -0,0 +1,109 @@
+.media-controls {
+  position: absolute;
+  inset-inline: calc(var(--spacing) * 2);
+  bottom: calc(var(--spacing) * 2);
+  z-index: 10;
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: 0.075rem;
+  align-items: center;
+  padding: 0.375rem;
+  container-name: media-controls;
+  container-type: inline-size;
+  color: var(--media-color-primary, oklch(1 0 0));
+  text-shadow: 0px 1px 0px color-mix(in oklab, var(--media-current-shadow-color) 100%, transparent);
+  background-color: var(--media-surface-background-color);
+  border-radius: var(--radius-3xl);
+  box-shadow:
+    0 0 0 1px var(--media-surface-outer-border-color),
+    0 1px 3px 0 var(--media-surface-shadow-color),
+    0 1px 2px -1px var(--media-surface-shadow-color);
+  backdrop-filter: var(--media-surface-backdrop-filter);
+  transform-origin: bottom;
+  transition-timing-function: var(--media-controls-transition-timing-function);
+  transition-duration: var(--media-controls-transition-duration);
+}
+
+.media-controls-group-end {
+  display: flex;
+  flex: 1;
+  gap: 0.075rem;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.media-controls-group-start {
+  display: flex;
+  flex: 1;
+  gap: 0.075rem;
+  align-items: center;
+}
+
+.media-controls:after {
+  position: absolute;
+  inset: calc(var(--spacing) * 0);
+  z-index: 10;
+  pointer-events: none;
+  content: "";
+  border-radius: inherit;
+  box-shadow: inset 0 0 0 1px var(--media-surface-inner-border-color);
+}
+
+.media-controls:is(:where(.media-error)[data-open] ~ *) {
+  display: none;
+}
+
+.media-controls:not([data-visible]) {
+  pointer-events: none;
+  opacity: 0%;
+}
+
+@container media-container (width >= 42rem) {
+  .media-controls {
+    inset-inline: calc(var(--spacing) * 3);
+    bottom: calc(var(--spacing) * 3);
+    flex-wrap: nowrap;
+    column-gap: calc(var(--spacing) * 0.5);
+    padding: calc(var(--spacing) * 1);
+  }
+}
+
+@container media-container (width >= 42rem) {
+  .media-controls-group-end,
+  .media-controls-group-start {
+    flex: none;
+    gap: calc(var(--spacing) * 0.5);
+  }
+}
+
+@media (pointer: coarse) {
+  .media-controls {
+    transition-timing-function: var(--default-transition-timing-function);
+    transition-duration: var(--default-transition-duration);
+    transition-property: scale, opacity;
+    will-change: scale, opacity;
+  }
+}
+
+@media (pointer: fine) {
+  .media-controls {
+    transition-timing-function: var(--default-transition-timing-function);
+    transition-duration: var(--default-transition-duration);
+    transition-property: scale, filter, opacity;
+    will-change: scale, filter, opacity;
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .media-controls {
+    scale: 90% 90%;
+  }
+}
+
+@media (pointer: fine) {
+  @media (prefers-reduced-motion: no-preference) {
+    .media-controls {
+      filter: blur(var(--blur-sm));
+    }
+  }
+}
diff --git a/packages/react/src/presets/video/__generated__/default-video.css b/packages/react/src/presets/video/__generated__/default-video.css
new file mode 100644
index 00000000..442a9eb2
--- /dev/null
+++ b/packages/react/src/presets/video/__generated__/default-video.css
@@ -0,0 +1,171 @@
+@import "./base.css";
+@import "./button.css";
+@import "./controls.css";
+@import "./dialog.css";
+@import "./feedback.css";
+@import "./loading.css";
+@import "./popup.css";
+@import "./slider.css";
+@import "./time.css";
+
+@keyframes media-shake {
+  0%,
+  100% {
+    translate: 0;
+  }
+
+  20% {
+    translate: -6px;
+  }
+
+  40% {
+    translate: 4px;
+  }
+
+  60% {
+    translate: -2px;
+  }
+
+  80% {
+    translate: 1px;
+  }
+}
+
+@keyframes media-slide-in-forward {
+  from {
+    opacity: 0;
+    translate: -60%;
+  }
+}
+
+@keyframes media-slide-in-backward {
+  from {
+    opacity: 0;
+    translate: 60%;
+  }
+}
+
+@keyframes media-pop-in {
+  from {
+    opacity: 0;
+    scale: 0.8;
+  }
+}
+
+@property --media-progress-fill {
+  syntax: "<percentage>";
+  inherits: true;
+  initial-value: 0%;
+}
+
+:where(.media-root) {
+  --media-current-shadow-color: oklch(from currentColor 0 0 0 / clamp(0, calc((l - 0.5) * 0.5), 0.15));
+  --media-current-shadow-color-subtle: oklch(from var(--media-current-shadow-color) l c h / calc(alpha * 0.4));
+  --media-icon-size: 18px;
+}
+
+:where(.media-root) {
+  --media-caption-track-delay: 25ms;
+  --media-caption-track-duration: var(--media-controls-transition-duration);
+  --media-caption-track-y: -0.5rem;
+  --media-controls-transition-duration: 0.1s;
+  --media-controls-transition-timing-function: ease-out;
+  --media-error-dialog-transition-delay: 0.1s;
+  --media-error-dialog-transition-duration: 0.35s;
+  --media-error-dialog-transition-timing-function: var(--media-spring-timing-function);
+  --media-popover-boundary-offset: 0.5rem;
+  --media-popover-side-offset: 0.5rem;
+  --media-popup-transition-duration: 0.1s;
+  --media-popup-transition-timing-function: ease-out;
+  --media-spring-timing-function: linear(
+    0,
+    0.034 1.5%,
+    0.763 9.7%,
+    1.066 13.9%,
+    1.198 19.9%,
+    1.184 21.8%,
+    0.963 37.5%,
+    0.997 50.9%,
+    1
+  );
+  --media-surface-backdrop-filter: blur(16px) saturate(1.5);
+  --media-surface-background-color: oklch(100% 0 0 / 0.1);
+  --media-surface-inner-border-color: oklch(100% 0 0 / 0.05);
+  --media-surface-outer-border-color: oklch(0% 0 0 / 0.1);
+  --media-surface-shadow-color: oklch(0% 0 0 / 0.15);
+  --media-tooltip-boundary-offset: 0.5rem;
+  --media-tooltip-side-offset: 0.75rem;
+  --media-video-border-radius: var(--media-border-radius, 2rem);
+}
+
+:where(.media-root:has([data-controls][data-visible])) {
+  --media-caption-track-y: -5.5rem;
+}
+
+@container media-container (width >= 42rem) {
+  :where(.media-root > *) {
+    --media-caption-track-y: -3.5rem;
+  }
+}
+
+@media (pointer: coarse) {
+  :where(.media-root) {
+    --media-controls-transition-duration: 0.15s;
+  }
+}
+
+@media (pointer: fine) {
+  :where(.media-root) {
+    --media-controls-transition-duration: 0.3s;
+  }
+}
+
+@media (prefers-contrast: more) {
+  :where(.media-root) {
+    --media-surface-background-color: oklch(0% 0 0);
+    --media-surface-inner-border-color: oklch(100% 0 0 / 0.25);
+    --media-surface-outer-border-color: transparent;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where(.media-root) {
+    --media-controls-transition-duration: 50ms;
+    --media-error-dialog-transition-delay: 0s;
+    --media-error-dialog-transition-duration: 50ms;
+    --media-error-dialog-transition-timing-function: ease-out;
+    --media-popup-transition-duration: 0s;
+  }
+}
+
+@media (prefers-reduced-transparency: reduce) {
+  :where(.media-root) {
+    --media-surface-background-color: oklch(0% 0 0);
+    --media-surface-inner-border-color: oklch(100% 0 0 / 0.25);
+    --media-surface-outer-border-color: transparent;
+  }
+}
+
+:root {
+  --animate-media-pop-in: media-pop-in 250ms ease-out;
+  --animate-media-shake: media-shake 300ms ease-in-out;
+  --animate-media-slide-in-backward: media-slide-in-backward 300ms ease-in-out;
+  --animate-media-slide-in-forward: media-slide-in-forward 300ms ease-in-out;
+  --blur-lg: 16px;
+  --blur-sm: 8px;
+  --color-black: #000;
+  --color-white: #fff;
+  --default-transition-duration: 150ms;
+  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  --ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --leading-normal: 1.5;
+  --leading-tight: 1.25;
+  --radius-3xl: 1.5rem;
+  --radius-xl: 0.75rem;
+  --spacing: 0.25rem;
+  --text-base: 1rem;
+  --tracking-tighter: -0.05em;
+}
diff --git a/packages/react/src/presets/video/__generated__/default-video.css.tsx b/packages/react/src/presets/video/__generated__/default-video.css.tsx
new file mode 100644
index 00000000..9f1e4bd4
--- /dev/null
+++ b/packages/react/src/presets/video/__generated__/default-video.css.tsx
@@ -0,0 +1,310 @@
+// Generated by @videojs/compiler. Do not edit.
+
+import { isString } from '@videojs/utils/predicate';
+import { cn } from '@videojs/utils/style';
+import type { ReactNode } from 'react';
+import {
+  AirPlayEnterIcon,
+  AirPlayExitIcon,
+  CaptionsOffIcon,
+  CaptionsOnIcon,
+  CastEnterIcon,
+  CastExitIcon,
+  ChevronIcon,
+  FullscreenEnterIcon,
+  FullscreenExitIcon,
+  PauseIcon,
+  PipEnterIcon,
+  PipExitIcon,
+  PlayIcon,
+  RestartIcon,
+  SeekIcon,
+  SpinnerIcon,
+  VolumeHighIcon,
+  VolumeLowIcon,
+  VolumeOffIcon,
+} from '@/icons';
+import { Container } from '@/player/context';
+import { AirPlayButton } from '@/ui/airplay-button';
+import { BufferingIndicator } from '@/ui/buffering-indicator';
+import { CastButton } from '@/ui/cast-button';
+import { Controls } from '@/ui/controls';
+import { ErrorDialog } from '@/ui/error-dialog';
+import { FeatureAvailability } from '@/ui/feature-availability';
+import { FullscreenButton } from '@/ui/fullscreen-button';
+import { Gesture } from '@/ui/gesture';
+import { Hotkey } from '@/ui/hotkey';
+import { MuteButton } from '@/ui/mute-button';
+import { Overlay } from '@/ui/overlay';
+import { PiPButton } from '@/ui/pip-button';
+import { PlayButton } from '@/ui/play-button';
+import { Popover } from '@/ui/popover';
+import { Poster } from '@/ui/poster';
+import { SeekButton } from '@/ui/seek-button';
+import { SeekIndicator } from '@/ui/seek-indicator';
+import { Slider } from '@/ui/slider';
+import { StatusAnnouncer } from '@/ui/status-announcer';
+import { StatusIndicator } from '@/ui/status-indicator';
+import { Time } from '@/ui/time';
+import { TimeSlider } from '@/ui/time-slider';
+import { Tooltip } from '@/ui/tooltip';
+import { VolumeIndicator } from '@/ui/volume-indicator';
+import { VolumeSlider } from '@/ui/volume-slider';
+import { isRenderProp } from '@/utils/use-render';
+import type { BaseVideoSkinProps } from '../../types';
+
+const SEEK_TIME = 10;
+
+const TOP_STATUS_ACTIONS = ['toggleSubtitles', 'toggleFullscreen', 'togglePictureInPicture'] as const;
+
+const CENTER_STATUS_ACTIONS = ['togglePaused'] as const;
+
+export interface DefaultVideoSkinProps extends BaseVideoSkinProps {
+  className?: string;
+  children?: ReactNode | undefined;
+}
+
+function MuteControl() {
+  return (
+    <MuteButton className="media-button">
+      <VolumeOffIcon className="media-volume-off-icon" />
+      <VolumeLowIcon className="media-volume-low-icon" />
+      <VolumeHighIcon className="media-volume-high-icon" />
+    </MuteButton>
+  );
+}
+
+export function DefaultVideoSkin({ className, children, poster, ...rest }: DefaultVideoSkinProps) {
+  return (
+    <Container className={cn('media-root', className)} {...rest}>
+      {children}
+
+      {poster && (
+        <Poster src={isString(poster) ? poster : undefined} render={isRenderProp(poster) ? poster : undefined} />
+      )}
+
+      <BufferingIndicator className="media-buffering">
+        <SpinnerIcon className="media-icon" />
+      </BufferingIndicator>
+
+      <ErrorDialog.Root>
+        <ErrorDialog.Popup className="media-error">
+          <ErrorDialog.Title className="media-error-title">Something went wrong.</ErrorDialog.Title>
+          <ErrorDialog.Description className="media-error-description" />
+          <ErrorDialog.Close className="media-error-close media-button">OK</ErrorDialog.Close>
+        </ErrorDialog.Popup>
+      </ErrorDialog.Root>
+
+      <Controls.Root className="media-controls" data-controls="">
+        <Tooltip.Provider>
+          <Controls.Group className="media-controls-group-start media-controls-group">
+            <Tooltip.Root side="top">
+              <Tooltip.Trigger
+                render={
+                  <PlayButton className="media-button">
+                    <RestartIcon className="media-restart-icon" />
+                    <PlayIcon className="media-play-icon" />
+                    <PauseIcon className="media-pause-icon" />
+                  </PlayButton>
+                }
+              />
+              <Tooltip.Popup className="media-tooltip">
+                <Tooltip.Label />
+                <Tooltip.Shortcut className="media-tooltip-shortcut" />
+              </Tooltip.Popup>
+            </Tooltip.Root>
+
+            <Tooltip.Root side="top">
+              <Tooltip.Trigger
+                render={
+                  <SeekButton seconds={-SEEK_TIME} className="media-button">
+                    <SeekIcon className="media-seek-backward-icon" />
+                    <span className="media-seek-label-backward media-seek-label">{SEEK_TIME}</span>
+                  </SeekButton>
+                }
+              />
+              <Tooltip.Popup className="media-tooltip">
+                <Tooltip.Label />
+                <Tooltip.Shortcut className="media-tooltip-shortcut" />
+              </Tooltip.Popup>
+            </Tooltip.Root>
+
+            <Tooltip.Root side="top">
+              <Tooltip.Trigger
+                render={
+                  <SeekButton seconds={SEEK_TIME} className="media-button">
+                    <SeekIcon className="media-icon" />
+                    <span className="media-seek-label-forward media-seek-label">{SEEK_TIME}</span>
+                  </SeekButton>
+                }
+              />
+              <Tooltip.Popup className="media-tooltip">
+                <Tooltip.Label />
+                <Tooltip.Shortcut className="media-tooltip-shortcut" />
+              </Tooltip.Popup>
+            </Tooltip.Root>
+          </Controls.Group>
+
+          <Time.Group className="media-time-group">
+            <Time.Value type="current" className="media-time-current" />
+            <TimeSlider.Root className="media-slider">
+              <TimeSlider.Track className="media-slider-track">
+                <TimeSlider.Fill className="media-slider-fill" />
+                <TimeSlider.Buffer className="media-slider-buffer" />
+              </TimeSlider.Track>
+              <TimeSlider.Thumb className="media-slider-thumb" />
+              <Slider.Thumbnail.Root className="media-slider-thumbnail">
+                <Slider.Thumbnail.Image className="media-slider-thumbnail-image" />
+                <TimeSlider.Value type="pointer" className="media-slider-thumbnail-time" />
+                <SpinnerIcon className="media-spinner" />
+              </Slider.Thumbnail.Root>
+              <TimeSlider.Preview className="media-slider-preview">
+                <TimeSlider.Value type="pointer" className="media-slider-value" />
+              </TimeSlider.Preview>
+            </TimeSlider.Root>
+            <Time.Value type="duration" className="media-time-duration" />
+          </Time.Group>
+
+          <Controls.Group className="media-controls-group-end media-controls-group">
+            <FeatureAvailability is="volume" when="unsupported">
+              <MuteControl />
+            </FeatureAvailability>
+            <FeatureAvailability is="volume" except="unsupported">
+              <Popover.Root openOnHover delay={200} closeDelay={100} side="top">
+                <Popover.Trigger render={<MuteControl />} />
+                <Popover.Popup className="media-volume-popover media-popover">
+                  <VolumeSlider.Root orientation="vertical" thumbAlignment="edge" className="media-slider">
+                    <VolumeSlider.Track className="media-slider-track">
+                      <VolumeSlider.Fill className="media-slider-fill" />
+                    </VolumeSlider.Track>
+                    <VolumeSlider.Thumb className="media-slider-thumb-persistent media-slider-thumb" />
+                  </VolumeSlider.Root>
+                </Popover.Popup>
+              </Popover.Root>
+            </FeatureAvailability>
+
+            <Tooltip.Root side="top">
+              <Tooltip.Trigger
+                render={
+                  <CastButton className="media-button">
+                    <CastEnterIcon className="media-cast-enter-icon" />
+                    <CastExitIcon className="media-cast-exit-icon" />
+                  </CastButton>
+                }
+              />
+              <Tooltip.Popup className="media-tooltip">
+                <Tooltip.Label />
+                <Tooltip.Shortcut className="media-tooltip-shortcut" />
+              </Tooltip.Popup>
+            </Tooltip.Root>
+
+            <Tooltip.Root side="top">
+              <Tooltip.Trigger
+                render={
+                  <AirPlayButton className="media-button">
+                    <AirPlayEnterIcon className="media-airplay-enter-icon" />
+                    <AirPlayExitIcon className="media-airplay-exit-icon" />
+                  </AirPlayButton>
+                }
+              />
+              <Tooltip.Popup className="media-tooltip">
+                <Tooltip.Label />
+                <Tooltip.Shortcut className="media-tooltip-shortcut" />
+              </Tooltip.Popup>
+            </Tooltip.Root>
+
+            <Tooltip.Root side="top">
+              <Tooltip.Trigger
+                render={
+                  <PiPButton className="media-button">
+                    <PipEnterIcon className="media-pip-enter-icon" />
+                    <PipExitIcon className="media-pip-exit-icon" />
+                  </PiPButton>
+                }
+              />
+              <Tooltip.Popup className="media-tooltip">
+                <Tooltip.Label />
+                <Tooltip.Shortcut className="media-tooltip-shortcut" />
+              </Tooltip.Popup>
+            </Tooltip.Root>
+
+            <Tooltip.Root side="top">
+              <Tooltip.Trigger
+                render={
+                  <FullscreenButton className="media-button">
+                    <FullscreenEnterIcon className="media-fullscreen-enter-icon" />
+                    <FullscreenExitIcon className="media-fullscreen-exit-icon" />
+                  </FullscreenButton>
+                }
+              />
+              <Tooltip.Popup className="media-tooltip">
+                <Tooltip.Label />
+                <Tooltip.Shortcut className="media-tooltip-shortcut" />
+              </Tooltip.Popup>
+            </Tooltip.Root>
+          </Controls.Group>
+        </Tooltip.Provider>
+      </Controls.Root>
+
+      <Overlay className="media-overlay" />
+
+      <Hotkey keys="Space" action="togglePaused" />
+      <Hotkey keys="k" action="togglePaused" />
+      <Hotkey keys="m" action="toggleMuted" />
+      <Hotkey keys="f" action="toggleFullscreen" />
+      <Hotkey keys="c" action="toggleSubtitles" />
+      <Hotkey keys="i" action="togglePictureInPicture" />
+      <Hotkey keys="ArrowRight" action="seekStep" value={SEEK_TIME / 2} />
+      <Hotkey keys="ArrowLeft" action="seekStep" value={-(SEEK_TIME / 2)} />
+      <Hotkey keys="l" action="seekStep" value={SEEK_TIME} />
+      <Hotkey keys="j" action="seekStep" value={-SEEK_TIME} />
+      <Hotkey keys="ArrowUp" action="volumeStep" value={0.05} />
+      <Hotkey keys="ArrowDown" action="volumeStep" value={-0.05} />
+      <Hotkey keys="0-9" action="seekToPercent" />
+      <Hotkey keys="Home" action="seekToPercent" value={0} />
+      <Hotkey keys="End" action="seekToPercent" value={100} />
+      <Hotkey keys=">" action="speedUp" />
+      <Hotkey keys="<" action="speedDown" />
+
+      <Gesture type="tap" action="togglePaused" pointer="mouse" region="center" />
+      <Gesture type="tap" action="toggleControls" pointer="touch" />
+      <Gesture type="doubletap" action="seekStep" value={-SEEK_TIME} region="left" />
+      <Gesture type="doubletap" action="toggleFullscreen" region="center" />
+      <Gesture type="doubletap" action="seekStep" value={SEEK_TIME} region="right" />
+
+      <StatusAnnouncer />
+
+      <VolumeIndicator.Root className="media-volume-indicator">
+        <VolumeIndicator.Fill className="media-indicator-content">
+          <VolumeHighIcon className="media-volume-indicator-high-icon" />
+          <VolumeLowIcon className="media-volume-indicator-low-icon" />
+          <VolumeOffIcon className="media-volume-indicator-off-icon" />
+          <VolumeIndicator.Value className="media-indicator-value" />
+        </VolumeIndicator.Fill>
+      </VolumeIndicator.Root>
+
+      <StatusIndicator.Root actions={TOP_STATUS_ACTIONS} className="media-status-indicator-top media-status-indicator">
+        <CaptionsOnIcon className="media-status-indicator-captions-on-icon" />
+        <CaptionsOffIcon className="media-status-indicator-captions-off-icon" />
+        <FullscreenEnterIcon className="media-status-indicator-fullscreen-enter-icon" />
+        <FullscreenExitIcon className="media-status-indicator-fullscreen-exit-icon" />
+        <PipEnterIcon className="media-status-indicator-pip-enter-icon" />
+        <PipExitIcon className="media-status-indicator-pip-exit-icon" />
+        <StatusIndicator.Value className="media-indicator-value" />
+      </StatusIndicator.Root>
+
+      <SeekIndicator.Root className="media-seek-indicator">
+        <ChevronIcon className="media-seek-indicator-icon" />
+        <SeekIndicator.Value className="media-seek-indicator-value" />
+      </SeekIndicator.Root>
+
+      <StatusIndicator.Root
+        actions={CENTER_STATUS_ACTIONS}
+        className="media-status-indicator-center media-status-indicator"
+      >
+        <PlayIcon className="media-status-indicator-play-icon" />
+        <PauseIcon className="media-status-indicator-pause-icon" />
+      </StatusIndicator.Root>
+    </Container>
+  );
+}
diff --git a/packages/react/src/presets/video/__generated__/dialog.css b/packages/react/src/presets/video/__generated__/dialog.css
new file mode 100644
index 00000000..bf3184cc
--- /dev/null
+++ b/packages/react/src/presets/video/__generated__/dialog.css
@@ -0,0 +1,113 @@
+.media-error {
+  position: absolute;
+  top: calc(1 / 2 * 100%);
+  left: calc(1 / 2 * 100%);
+  z-index: 20;
+  display: none;
+  flex-direction: column;
+  gap: calc(var(--spacing) * 3);
+  max-width: calc(var(--spacing) * 72);
+  padding: calc(var(--spacing) * 5);
+  color: var(--color-white);
+  text-shadow: 0px 1px 0px
+    color-mix(in oklab, color-mix(in oklab, var(--color-black) 25%, transparent) 100%, transparent);
+  outline-style: none;
+  background-color: var(--media-surface-background-color);
+  border-radius: 1.75rem;
+  box-shadow:
+    0 0 0 1px var(--media-surface-outer-border-color),
+    0 1px 3px 0 var(--media-surface-shadow-color),
+    0 1px 2px -1px var(--media-surface-shadow-color);
+  backdrop-filter: var(--media-surface-backdrop-filter);
+  translate: calc(calc(1 / 2 * 100%) * -1) calc(calc(1 / 2 * 100%) * -1);
+  transition-delay: var(--media-error-dialog-transition-delay);
+  transition-timing-function: var(--media-error-dialog-transition-timing-function);
+  transition-duration: var(--media-error-dialog-transition-duration);
+  transition-property: opacity, scale, transform;
+}
+
+.media-error-close {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-height: calc(var(--spacing) * 0);
+  padding-block: calc(var(--spacing) * 2);
+  padding-inline: calc(var(--spacing) * 4);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-black);
+  text-align: center;
+  text-shadow: none;
+  touch-action: manipulation;
+  cursor: pointer;
+  -webkit-user-select: none;
+  user-select: none;
+  outline-width: 2px;
+  outline-style: solid;
+  outline-color: transparent;
+  outline-offset: calc(2px * -1);
+  background-color: var(--color-white);
+  border-style: none;
+  border-radius: calc(infinity * 1px);
+  transition-timing-function: var(--ease-out);
+  transition-duration: 150ms;
+  transition-property: background-color, outline-offset, scale;
+  will-change: scale;
+}
+
+.media-error-close:active {
+  scale: 0.98;
+}
+
+.media-error-close:disabled {
+  cursor: not-allowed;
+  opacity: 50%;
+  filter: grayscale(100%);
+}
+
+.media-error-close:focus-visible {
+  outline-color: currentcolor;
+  outline-offset: 2px;
+}
+
+.media-error-close[data-availability="unavailable"],
+.media-error-close[data-availability="unsupported"] {
+  display: none;
+}
+
+.media-error-description {
+  overflow-wrap: anywhere;
+  opacity: 70%;
+}
+
+.media-error-title {
+  font-size: var(--text-base);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--leading-tight);
+}
+
+.media-error:after {
+  position: absolute;
+  inset: calc(var(--spacing) * 0);
+  z-index: 10;
+  pointer-events: none;
+  content: "";
+  border-radius: inherit;
+  box-shadow: inset 0 0 0 1px var(--media-surface-inner-border-color);
+}
+
+.media-error[data-ending-style] {
+  opacity: 0%;
+  scale: 50% 50%;
+  transition-delay: 0ms;
+}
+
+.media-error[data-open] {
+  display: flex;
+}
+
+.media-error[data-starting-style] {
+  opacity: 0%;
+  scale: 50% 50%;
+}
diff --git a/packages/react/src/presets/video/__generated__/feedback.css b/packages/react/src/presets/video/__generated__/feedback.css
new file mode 100644
index 00000000..591b2dc2
--- /dev/null
+++ b/packages/react/src/presets/video/__generated__/feedback.css
@@ -0,0 +1,339 @@
+:is(.media-indicator-content *),
+:is(.media-status-indicator-top *) {
+  mix-blend-mode: difference;
+}
+
+:is(.media-volume-indicator > *) {
+  --media-progress-fill: var(--media-volume-fill);
+  background-image: linear-gradient(
+    to right,
+    currentColor 0%,
+    currentColor var(--media-progress-fill),
+    transparent var(--media-progress-fill),
+    transparent 100%
+  );
+  border-radius: inherit;
+  transition: --media-progress-fill 200ms linear;
+}
+
+.media-indicator-content {
+  display: flex;
+  gap: calc(var(--spacing) * 2);
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding-block: calc(var(--spacing) * 1);
+  padding-inline: calc(var(--spacing) * 2.5);
+}
+
+.media-indicator-value {
+  margin-left: auto;
+}
+
+.media-seek-indicator {
+  position: absolute;
+  top: calc(50% - 1.75rem);
+  display: flex;
+  flex-direction: column;
+  grid-row-start: 1;
+  grid-column-start: 2;
+  align-items: center;
+  justify-content: center;
+  padding: calc(var(--spacing) * 4);
+  color: var(--media-color-primary, oklch(1 0 0));
+  pointer-events: none;
+  translate: 0 calc(calc(1 / 2 * 100%) * -1);
+  transition-timing-function: var(--ease-out);
+  transition-duration: 250ms;
+  transition-property: opacity;
+}
+
+.media-seek-indicator-icon,
+.media-status-indicator-pause-icon,
+.media-status-indicator-play-icon {
+  display: none;
+  width: calc(var(--spacing) * 9);
+  height: calc(var(--spacing) * 9);
+}
+
+.media-seek-indicator-icon:is(:where(.media-seek-indicator):not([data-starting-style]) *):is(
+    :where(.media-seek-indicator)[data-direction="backward"] *
+  ) {
+  animation: var(--animate-media-slide-in-backward);
+}
+
+.media-seek-indicator-icon:is(:where(.media-seek-indicator):not([data-starting-style]) *):is(
+    :where(.media-seek-indicator)[data-direction="forward"] *
+  ) {
+  animation: var(--animate-media-slide-in-forward);
+}
+
+.media-seek-indicator-icon:is(:where(.media-seek-indicator)[data-direction] *),
+.media-status-indicator-captions-off-icon:is(:where(.media-status-indicator-top)[data-status="captions-off"] *),
+.media-status-indicator-captions-on-icon:is(:where(.media-status-indicator-top)[data-status="captions-on"] *),
+.media-status-indicator-fullscreen-enter-icon:is(:where(.media-status-indicator-top)[data-status="fullscreen"] *),
+.media-status-indicator-fullscreen-exit-icon:is(:where(.media-status-indicator-top)[data-status="exit-fullscreen"] *),
+.media-status-indicator-pause-icon:is(:where(.media-status-indicator-center)[data-status="pause"] *),
+.media-status-indicator-pip-enter-icon:is(:where(.media-status-indicator-top)[data-status="pip"] *),
+.media-status-indicator-pip-exit-icon:is(:where(.media-status-indicator-top)[data-status="exit-pip"] *),
+.media-status-indicator-play-icon:is(:where(.media-status-indicator-center)[data-status="play"] *),
+.media-volume-indicator-high-icon:is(:where(.media-volume-indicator)[data-level="high"] *),
+.media-volume-indicator-low-icon:is(:where(.media-volume-indicator)[data-level="low"] *),
+.media-volume-indicator-off-icon:is(:where(.media-volume-indicator)[data-level="off"] *) {
+  display: block;
+}
+
+.media-seek-indicator-icon:is(:where(.media-seek-indicator)[data-direction="backward"] *) {
+  scale: calc(100% * -1) 1;
+}
+
+.media-seek-indicator-value {
+  font-variant-numeric: tabular-nums;
+}
+
+.media-seek-indicator:not([data-direction]) {
+  left: calc(1 / 2 * 100%);
+  translate: calc(calc(1 / 2 * 100%) * -1) 0;
+  transition-timing-function:
+    ease-out, linear(0, 0.12 1.5%, 1.35 9.7%, 2.2 13.9%, 3 19.9%, 2.7 21.8%, 0.62 37.5%, 0.96 50.9%, 1);
+  transition-duration: 600ms;
+  transition-property: opacity, scale;
+}
+
+.media-seek-indicator:not([data-direction])[data-ending-style],
+.media-seek-indicator:not([data-direction])[data-starting-style],
+.media-status-indicator-center:not([data-direction])[data-ending-style],
+.media-status-indicator-center:not([data-direction])[data-starting-style] {
+  scale: 80% 80%;
+  transition-timing-function: var(--ease-in);
+  transition-duration: 200ms;
+}
+
+.media-seek-indicator[data-direction="backward"] {
+  left: calc(var(--spacing) * 0);
+  grid-column-start: 1;
+  justify-self: flex-start;
+}
+
+.media-seek-indicator[data-direction="forward"] {
+  right: calc(var(--spacing) * 0);
+  grid-column-start: 3;
+  justify-self: flex-end;
+}
+
+.media-seek-indicator[data-ending-style],
+.media-seek-indicator[data-starting-style],
+.media-status-indicator-center[data-ending-style],
+.media-status-indicator-center[data-starting-style] {
+  opacity: 0%;
+  transition-timing-function: var(--ease-in);
+  transition-duration: 200ms;
+}
+
+.media-status-indicator-captions-off-icon,
+.media-status-indicator-captions-on-icon,
+.media-status-indicator-fullscreen-enter-icon,
+.media-status-indicator-fullscreen-exit-icon,
+.media-status-indicator-pip-enter-icon,
+.media-status-indicator-pip-exit-icon,
+.media-volume-indicator-high-icon,
+.media-volume-indicator-low-icon,
+.media-volume-indicator-off-icon {
+  display: none;
+  flex-shrink: 0;
+}
+
+.media-status-indicator-center {
+  position: absolute;
+  top: calc(50% - 1.75rem);
+  left: calc(1 / 2 * 100%);
+  display: flex;
+  flex-direction: column;
+  grid-row-start: 1;
+  grid-column-start: 2;
+  align-items: center;
+  justify-content: center;
+  padding: calc(var(--spacing) * 4);
+  color: var(--media-color-primary, oklch(1 0 0));
+  pointer-events: none;
+  translate: calc(calc(1 / 2 * 100%) * -1) calc(calc(1 / 2 * 100%) * -1);
+  transition-timing-function: var(--ease-out);
+  transition-duration: 250ms;
+  transition-property: opacity;
+}
+
+.media-status-indicator-center:not([data-direction]) {
+  transition-timing-function:
+    ease-out, linear(0, 0.12 1.5%, 1.35 9.7%, 2.2 13.9%, 3 19.9%, 2.7 21.8%, 0.62 37.5%, 0.96 50.9%, 1);
+  transition-duration: 600ms;
+  transition-property: opacity, scale;
+}
+
+.media-status-indicator-center[data-direction="backward"] {
+  grid-column-start: 1;
+  justify-self: flex-start;
+}
+
+.media-status-indicator-center[data-direction="forward"] {
+  grid-column-start: 3;
+  justify-self: flex-end;
+}
+
+.media-status-indicator-top {
+  --media-surface-background-color: oklch(0 0 0 / 0.25);
+  position: absolute;
+  top: calc(var(--spacing) * 3);
+  left: calc(1 / 2 * 100%);
+  display: flex;
+  gap: calc(var(--spacing) * 2);
+  align-items: center;
+  justify-content: space-between;
+  padding-block: calc(var(--spacing) * 1);
+  padding-inline: calc(var(--spacing) * 2.5);
+  font-weight: var(--font-weight-medium);
+  color: inherit;
+  pointer-events: none;
+  background-color: var(--media-surface-background-color);
+  border-radius: calc(infinity * 1px);
+  box-shadow:
+    0 0 0 1px var(--media-surface-outer-border-color),
+    0 1px 3px 0 var(--media-surface-shadow-color),
+    0 1px 2px -1px var(--media-surface-shadow-color);
+  backdrop-filter: var(--media-surface-backdrop-filter);
+  transform-origin: top;
+  translate: calc(calc(1 / 2 * 100%) * -1) 0;
+  transition-timing-function: var(--ease-out);
+  transition-duration: 100ms;
+}
+
+.media-status-indicator-top:after,
+.media-volume-indicator:after {
+  position: absolute;
+  inset: calc(var(--spacing) * 0);
+  z-index: 10;
+  pointer-events: none;
+  content: "";
+  border-radius: inherit;
+  box-shadow: inset 0 0 0 1px var(--media-surface-inner-border-color);
+}
+
+.media-status-indicator-top[data-ending-style],
+.media-status-indicator-top[data-starting-style],
+.media-volume-indicator[data-ending-style],
+.media-volume-indicator[data-starting-style] {
+  opacity: 0%;
+  transition-timing-function: var(--ease-in);
+  transition-duration: 250ms;
+}
+
+.media-status-indicator-top[data-open],
+.media-volume-indicator[data-open] {
+  transition-duration: 100ms;
+}
+
+.media-volume-indicator {
+  --media-surface-background-color: oklch(0 0 0 / 0.25);
+  position: absolute;
+  top: calc(var(--spacing) * 3);
+  left: calc(1 / 2 * 100%);
+  width: min(80%, 12rem);
+  font-weight: var(--font-weight-medium);
+  color: inherit;
+  pointer-events: none;
+  background-color: var(--media-surface-background-color);
+  border-radius: calc(infinity * 1px);
+  box-shadow:
+    0 0 0 1px var(--media-surface-outer-border-color),
+    0 1px 3px 0 var(--media-surface-shadow-color),
+    0 1px 2px -1px var(--media-surface-shadow-color);
+  backdrop-filter: var(--media-surface-backdrop-filter);
+  transform-origin: top;
+  translate: calc(calc(1 / 2 * 100%) * -1) 0;
+  transition-timing-function: var(--ease-out);
+  transition-duration: 100ms;
+}
+
+.media-volume-indicator[data-max],
+.media-volume-indicator[data-min] {
+  animation: var(--animate-media-shake);
+}
+
+@container media-container (width >= 42rem) {
+  .media-seek-indicator,
+  .media-status-indicator-center {
+    top: calc(1 / 2 * 100%);
+    padding: calc(var(--spacing) * 8);
+  }
+}
+
+@media (pointer: coarse) {
+  .media-status-indicator-top,
+  .media-volume-indicator {
+    transition-timing-function: var(--default-transition-timing-function);
+    transition-duration: var(--default-transition-duration);
+    transition-property: scale, translate, opacity;
+    will-change: scale, translate, opacity;
+  }
+}
+
+@media (prefers-contrast: more) {
+  .media-status-indicator-top,
+  .media-volume-indicator {
+    --media-surface-background-color: oklch(0 0 0);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .media-status-indicator-fullscreen-enter-icon:is(:where(.media-status-indicator-top)[data-status="fullscreen"] *),
+  .media-status-indicator-fullscreen-exit-icon:is(:where(.media-status-indicator-top)[data-status="exit-fullscreen"] *),
+  .media-status-indicator-pause-icon:is(:where(.media-status-indicator-center)[data-status="pause"] *),
+  .media-status-indicator-pip-enter-icon:is(:where(.media-status-indicator-top)[data-status="pip"] *),
+  .media-status-indicator-pip-exit-icon:is(:where(.media-status-indicator-top)[data-status="exit-pip"] *),
+  .media-status-indicator-play-icon:is(:where(.media-status-indicator-center)[data-status="play"] *) {
+    animation: var(--animate-media-pop-in);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .media-status-indicator-top,
+  .media-volume-indicator {
+    translate: 0 calc(calc(1 / 4 * 100%) * -1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .media-seek-indicator,
+  .media-status-indicator-center {
+    transition-timing-function: var(--ease-out);
+    transition-duration: 100ms;
+    transition-property: opacity;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .media-seek-indicator-icon,
+  .media-volume-indicator {
+    animation: none;
+  }
+}
+
+@media (prefers-reduced-transparency: reduce) {
+  .media-status-indicator-top,
+  .media-volume-indicator {
+    --media-surface-background-color: oklch(0 0 0);
+  }
+}
+
+@media (pointer: fine) {
+  @media (prefers-reduced-motion: no-preference) {
+    .media-status-indicator-top,
+    .media-volume-indicator {
+      filter: blur(var(--blur-sm));
+      scale: 90% 90%;
+      transition-timing-function: var(--default-transition-timing-function);
+      transition-duration: var(--default-transition-duration);
+      transition-property: scale, translate, filter, opacity;
+      will-change: scale, translate, filter, opacity;
+    }
+  }
+}
diff --git a/packages/react/src/presets/video/__generated__/loading.css b/packages/react/src/presets/video/__generated__/loading.css
new file mode 100644
index 00000000..adb2f3f1
--- /dev/null
+++ b/packages/react/src/presets/video/__generated__/loading.css
@@ -0,0 +1,38 @@
+.media-buffering {
+  position: absolute;
+  inset: calc(var(--spacing) * 0);
+  display: none;
+  align-items: center;
+  justify-content: center;
+  width: fit-content;
+  height: fit-content;
+  padding: calc(var(--spacing) * 1);
+  margin: auto;
+  color: var(--color-white);
+  pointer-events: none;
+  background-color: var(--media-surface-background-color);
+  border-radius: calc(infinity * 1px);
+  box-shadow:
+    0 0 0 1px var(--media-surface-outer-border-color),
+    0 1px 3px 0 var(--media-surface-shadow-color),
+    0 1px 2px -1px var(--media-surface-shadow-color);
+  backdrop-filter: var(--media-surface-backdrop-filter);
+}
+
+.media-buffering:after {
+  position: absolute;
+  inset: calc(var(--spacing) * 0);
+  z-index: 10;
+  pointer-events: none;
+  content: "";
+  border-radius: inherit;
+  box-shadow: inset 0 0 0 1px var(--media-surface-inner-border-color);
+}
+
+.media-buffering:not([data-visible]) {
+  --media-spinner-animation: none;
+}
+
+.media-buffering[data-visible] {
+  display: flex;
+}
diff --git a/packages/react/src/presets/video/__generated__/popup.css b/packages/react/src/presets/video/__generated__/popup.css
new file mode 100644
index 00000000..6ca9f80b
--- /dev/null
+++ b/packages/react/src/presets/video/__generated__/popup.css
@@ -0,0 +1,176 @@
+.media-tooltip {
+  padding-block: calc(var(--spacing) * 1);
+  padding-inline: calc(var(--spacing) * 2.5);
+  margin: calc(var(--spacing) * 0);
+  overflow: visible;
+  font-size: 0.75rem;
+  color: inherit;
+  white-space: nowrap;
+  background-color: var(--media-surface-background-color);
+  border-style: solid;
+  border-width: 0px;
+  border-radius: calc(infinity * 1px);
+  box-shadow:
+    0 0 0 1px var(--media-surface-outer-border-color),
+    0 1px 3px 0 var(--media-surface-shadow-color),
+    0 1px 2px -1px var(--media-surface-shadow-color);
+  backdrop-filter: var(--media-surface-backdrop-filter);
+  transition-timing-function: var(--media-popup-transition-timing-function);
+  transition-duration: var(--media-popup-transition-duration),var(--media-popup-transition-duration),var(--media-popup-transition-duration) var(--popup-transition-duration, );
+  transition-property: scale,opacity,filter var(--popup-transition-property, );
+}
+
+.media-tooltip-shortcut {
+  min-width: 1.5em;
+  padding: 0.1em;
+  font-family: inherit;
+  font-size: 90%;
+  font-weight: var(--font-weight-semibold);
+  line-height: 1.25;
+  text-align: center;
+  background-color: color-mix(in oklab, currentcolor 30%, transparent);
+  border-radius: 0.25rem;
+}
+
+.media-tooltip:after,
+.media-volume-popover:after {
+  position: absolute;
+  inset: calc(var(--spacing) * 0);
+  z-index: 10;
+  pointer-events: none;
+  content: "";
+  border-radius: inherit;
+  box-shadow: inset 0 0 0 1px var(--media-surface-inner-border-color);
+}
+
+.media-tooltip:before,
+.media-volume-popover:before {
+  position: absolute;
+  pointer-events: inherit;
+  content: "";
+}
+
+.media-tooltip[data-ending-style],
+.media-volume-popover[data-ending-style] {
+  opacity: 0%;
+  filter: blur(var(--blur-sm));
+  scale: 50% 50%;
+  transition-duration: max(0ms, calc(var(--media-popup-transition-duration) - 50ms));
+}
+
+.media-tooltip[data-open] {
+  display: flex;
+  gap: calc(var(--spacing) * 1);
+  align-items: center;
+}
+
+.media-tooltip[data-side="bottom"],
+.media-volume-popover[data-side="bottom"] {
+  transform-origin: top;
+}
+
+.media-tooltip[data-side="bottom"]:before {
+  right: calc(var(--spacing) * 0);
+  bottom: 100%;
+  left: calc(var(--spacing) * 0);
+  height: var(--media-tooltip-side-offset);
+  content: "";
+}
+
+.media-tooltip[data-side="left"],
+.media-volume-popover[data-side="left"] {
+  transform-origin: 100%;
+}
+
+.media-tooltip[data-side="left"]:before {
+  top: calc(var(--spacing) * 0);
+  bottom: calc(var(--spacing) * 0);
+  left: 100%;
+  width: var(--media-tooltip-side-offset);
+  content: "";
+}
+
+.media-tooltip[data-side="right"],
+.media-volume-popover[data-side="right"] {
+  transform-origin: 0;
+}
+
+.media-tooltip[data-side="right"]:before {
+  top: calc(var(--spacing) * 0);
+  right: 100%;
+  bottom: calc(var(--spacing) * 0);
+  width: var(--media-tooltip-side-offset);
+  content: "";
+}
+
+.media-tooltip[data-side="top"],
+.media-volume-popover[data-side="top"] {
+  transform-origin: bottom;
+}
+
+.media-tooltip[data-side="top"]:before {
+  top: 100%;
+  right: calc(var(--spacing) * 0);
+  left: calc(var(--spacing) * 0);
+  height: var(--media-tooltip-side-offset);
+  content: "";
+}
+
+.media-tooltip[data-starting-style],
+.media-volume-popover[data-starting-style] {
+  opacity: 0%;
+  filter: blur(var(--blur-sm));
+  scale: 50% 50%;
+}
+
+.media-volume-popover {
+  padding-block: calc(var(--spacing) * 3);
+  padding-inline: calc(var(--spacing) * 0);
+  margin: calc(var(--spacing) * 0);
+  overflow: visible;
+  color: inherit;
+  background-color: var(--media-surface-background-color);
+  border-style: solid;
+  border-width: 0px;
+  border-radius: calc(infinity * 1px);
+  box-shadow:
+    0 0 0 1px var(--media-surface-outer-border-color),
+    0 1px 3px 0 var(--media-surface-shadow-color),
+    0 1px 2px -1px var(--media-surface-shadow-color);
+  backdrop-filter: var(--media-surface-backdrop-filter);
+  transition-timing-function: var(--media-popup-transition-timing-function);
+  transition-duration: var(--media-popup-transition-duration),var(--media-popup-transition-duration),var(--media-popup-transition-duration) var(--popup-transition-duration, );
+  transition-property: scale,opacity,filter var(--popup-transition-property, );
+}
+
+.media-volume-popover[data-side="bottom"]:before {
+  right: calc(var(--spacing) * 0);
+  bottom: 100%;
+  left: calc(var(--spacing) * 0);
+  height: var(--media-popover-side-offset);
+  content: "";
+}
+
+.media-volume-popover[data-side="left"]:before {
+  top: calc(var(--spacing) * 0);
+  bottom: calc(var(--spacing) * 0);
+  left: 100%;
+  width: var(--media-popover-side-offset);
+  content: "";
+}
+
+.media-volume-popover[data-side="right"]:before {
+  top: calc(var(--spacing) * 0);
+  right: 100%;
+  bottom: calc(var(--spacing) * 0);
+  width: var(--media-popover-side-offset);
+  content: "";
+}
+
+.media-volume-popover[data-side="top"]:before {
+  top: 100%;
+  right: calc(var(--spacing) * 0);
+  left: calc(var(--spacing) * 0);
+  height: var(--media-popover-side-offset);
+  content: "";
+}
diff --git a/packages/react/src/presets/video/__generated__/slider.css b/packages/react/src/presets/video/__generated__/slider.css
new file mode 100644
index 00000000..38915c72
--- /dev/null
+++ b/packages/react/src/presets/video/__generated__/slider.css
@@ -0,0 +1,398 @@
+:is(.media-slider-preview:is(:where(.media-slider-thumbnail):has([role="img"]:not([data-hidden])) ~ *) > *) {
+  display: none;
+}
+
+.media-slider {
+  position: relative;
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  outline-style: none;
+  border-radius: calc(infinity * 1px);
+}
+
+.media-slider-buffer {
+  position: absolute;
+  pointer-events: none;
+  background-color: color-mix(in oklab, currentcolor 20%, transparent);
+  border-radius: inherit;
+  transition-timing-function: var(--ease-out);
+  transition-duration: 250ms;
+}
+
+.media-slider-buffer[data-orientation="horizontal"] {
+  inset-block: calc(var(--spacing) * 0);
+  left: calc(var(--spacing) * 0);
+  width: var(--media-slider-buffer);
+  transition-timing-function: var(--default-transition-timing-function);
+  transition-duration: var(--default-transition-duration);
+  transition-property: width;
+}
+
+.media-slider-buffer[data-orientation="vertical"] {
+  inset-inline: calc(var(--spacing) * 0);
+  bottom: calc(var(--spacing) * 0);
+  height: var(--media-slider-buffer);
+  transition-timing-function: var(--default-transition-timing-function);
+  transition-duration: var(--default-transition-duration);
+  transition-property: height;
+}
+
+.media-slider-fill {
+  position: absolute;
+  pointer-events: none;
+  background-color: currentcolor;
+  border-radius: inherit;
+}
+
+.media-slider-fill:is(:where(.media-slider)[data-dragging] *)[data-orientation="horizontal"] {
+  width: var(--media-slider-pointer);
+}
+
+.media-slider-fill:is(:where(.media-slider)[data-dragging] *)[data-orientation="vertical"] {
+  height: var(--media-slider-pointer);
+}
+
+.media-slider-fill[data-orientation="horizontal"] {
+  inset-block: calc(var(--spacing) * 0);
+  left: calc(var(--spacing) * 0);
+  width: var(--media-slider-fill);
+}
+
+.media-slider-fill[data-orientation="vertical"] {
+  inset-inline: calc(var(--spacing) * 0);
+  bottom: calc(var(--spacing) * 0);
+  height: var(--media-slider-fill);
+}
+
+.media-slider-preview:before {
+  display: block;
+  min-width: calc(var(--spacing) * 1);
+  height: calc(var(--spacing) * 1);
+  content: "";
+  background-color: currentcolor;
+  border-radius: calc(infinity * 1px);
+  box-shadow:
+    0 0 #0000,
+    0 0 #0000,
+    0 0 #0000,
+    0 0 #0000,
+    0 0 0 1px var(--media-current-shadow-color, oklch(0 0 0 / 0.15)),
+    0 1px 2px 0 oklch(0 0 0 / 0.35);
+  opacity: 0%;
+  scale: 50% 50%;
+  transition-timing-function: var(--ease-out);
+  transition-duration: 200ms;
+  transition-property: opacity, scale;
+}
+
+.media-slider-preview[data-pointing]:not([data-dragging]):before,
+.media-slider-thumb-persistent:focus-visible:after,
+.media-slider-thumb:focus-visible:after {
+  content: "";
+  opacity: 100%;
+  scale: 100% 100%;
+}
+
+.media-slider-thumb {
+  position: absolute;
+  z-index: 10;
+  width: calc(var(--spacing) * 2.5);
+  height: calc(var(--spacing) * 2.5);
+  -webkit-user-select: none;
+  user-select: none;
+  outline-width: 4px;
+  outline-style: solid;
+  outline-color: transparent;
+  outline-offset: calc(4px * -1);
+  background-color: currentcolor;
+  border-radius: calc(infinity * 1px);
+  box-shadow:
+    0 0 #0000,
+    0 0 #0000,
+    0 0 #0000,
+    0 0 #0000,
+    0 0 0 1px var(--media-current-shadow-color, oklch(0 0 0 / 0.1)),
+    0 1px 3px 0 oklch(0 0 0 / 0.35),
+    0 1px 2px -1px oklch(0 0 0 / 0.35);
+  opacity: 0%;
+  translate: calc(calc(1 / 2 * 100%) * -1) calc(calc(1 / 2 * 100%) * -1);
+  transition-timing-function: var(--ease-out);
+  transition-duration: 150ms;
+  transition-property: opacity, height, width, outline-offset;
+}
+
+.media-slider-thumb-persistent {
+  position: absolute;
+  z-index: 10;
+  width: calc(var(--spacing) * 3);
+  height: calc(var(--spacing) * 3);
+  -webkit-user-select: none;
+  user-select: none;
+  outline-width: 4px;
+  outline-style: solid;
+  outline-color: transparent;
+  outline-offset: calc(4px * -1);
+  background-color: currentcolor;
+  border-radius: calc(infinity * 1px);
+  box-shadow:
+    0 0 #0000,
+    0 0 #0000,
+    0 0 #0000,
+    0 0 #0000,
+    0 0 0 1px var(--media-current-shadow-color, oklch(0 0 0 / 0.1)),
+    0 1px 3px 0 oklch(0 0 0 / 0.35),
+    0 1px 2px -1px oklch(0 0 0 / 0.35);
+  translate: calc(calc(1 / 2 * 100%) * -1) calc(calc(1 / 2 * 100%) * -1);
+  transition-timing-function: var(--ease-out);
+  transition-duration: 150ms;
+  transition-property: opacity, height, width, outline-offset;
+}
+
+.media-slider-thumb-persistent:after,
+.media-slider-thumb:after {
+  position: absolute;
+  inset: calc(var(--spacing) * -1);
+  pointer-events: none;
+  content: "";
+  border-radius: inherit;
+  box-shadow:
+    0 0 #0000,
+    0 0 #0000,
+    0 0 #0000,
+    0 0 #0000,
+    0 0 0 2px currentColor;
+  opacity: 0%;
+  scale: 50% 50%;
+  transition-timing-function: var(--ease-out);
+  transition-duration: 150ms;
+  transition-property: opacity, scale;
+}
+
+.media-slider-thumb-persistent:focus-visible {
+  outline-color: color-mix(in oklab, currentcolor 15%, transparent);
+  outline-offset: 0px;
+}
+
+.media-slider-thumb-persistent:is(:where(.media-slider)[data-dragging] *)[data-orientation="horizontal"],
+.media-slider-thumb:is(:where(.media-slider)[data-dragging] *)[data-orientation="horizontal"] {
+  left: var(--media-slider-pointer);
+}
+
+.media-slider-thumb-persistent:is(:where(.media-slider)[data-dragging] *)[data-orientation="vertical"],
+.media-slider-thumb:is(:where(.media-slider)[data-dragging] *)[data-orientation="vertical"] {
+  top: calc(100% - var(--media-slider-pointer));
+}
+
+.media-slider-thumb-persistent[data-orientation="horizontal"],
+.media-slider-thumb[data-orientation="horizontal"] {
+  top: calc(1 / 2 * 100%);
+  left: var(--media-slider-fill);
+}
+
+.media-slider-thumb-persistent[data-orientation="vertical"],
+.media-slider-thumb[data-orientation="vertical"] {
+  top: calc(100% - var(--media-slider-fill));
+  left: calc(1 / 2 * 100%);
+}
+
+.media-slider-thumb:focus-visible {
+  outline-color: color-mix(in oklab, currentcolor 15%, transparent);
+  outline-offset: 0px;
+  opacity: 100%;
+}
+
+.media-slider-thumb:is(:where(.media-slider):active *) {
+  width: calc(var(--spacing) * 3);
+  height: calc(var(--spacing) * 3);
+}
+
+.media-slider-thumbnail {
+  --media-slider-thumbnail-inset: calc((100cqi - 100%) / 2);
+  --media-slider-thumbnail-max-width: 11rem;
+  --media-slider-thumbnail-padding: -1.125rem;
+  position: absolute;
+  bottom: calc(100% + 1.2rem);
+  left: clamp(
+    calc(
+      var(--media-slider-thumbnail-max-width) /
+      2 +
+      var(--media-slider-thumbnail-padding) -
+      var(--media-slider-thumbnail-inset)
+    ),
+    var(--media-slider-pointer),
+    calc(
+      100% -
+      var(--media-slider-thumbnail-max-width) /
+      2 -
+      var(--media-slider-thumbnail-padding) +
+      var(--media-slider-thumbnail-inset)
+    )
+  );
+  pointer-events: none;
+  background-color: var(--media-surface-background-color);
+  border-radius: var(--radius-xl);
+  box-shadow:
+    0 0 0 1px var(--media-surface-outer-border-color),
+    0 1px 3px 0 var(--media-surface-shadow-color),
+    0 1px 2px -1px var(--media-surface-shadow-color);
+  opacity: 0%;
+  filter: blur(var(--blur-sm));
+  backdrop-filter: var(--media-surface-backdrop-filter);
+  transform-origin: bottom;
+  scale: 80% 80%;
+  translate: calc(calc(1 / 2 * 100%) * -1) 0;
+  transition-timing-function: var(--default-transition-timing-function);
+  transition-duration: 150ms;
+  transition-property: scale, opacity, filter;
+}
+
+.media-slider-thumbnail-image {
+  position: relative;
+  display: block;
+  max-width: var(--media-slider-thumbnail-max-width);
+  overflow: clip;
+  border-radius: inherit;
+  transition-timing-function: var(--ease-out);
+  transition-duration: 150ms;
+  transition-property: opacity;
+}
+
+.media-slider-thumbnail-image:after {
+  position: absolute;
+  inset: calc(var(--spacing) * 0);
+  content: "";
+  border-radius: inherit;
+}
+
+.media-slider-thumbnail-image[data-loading] {
+  opacity: 0%;
+}
+
+.media-slider-thumbnail-time {
+  position: absolute;
+  inset-inline: calc(var(--spacing) * 0);
+  bottom: calc(var(--spacing) * 2);
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+}
+
+.media-slider-thumbnail:after {
+  position: absolute;
+  inset: calc(var(--spacing) * 0);
+  z-index: 10;
+  pointer-events: none;
+  content: "";
+  border-radius: inherit;
+  box-shadow: inset 0 0 0 1px var(--media-surface-inner-border-color);
+}
+
+.media-slider-thumbnail:has([role="img"]:not([data-hidden])):is(:where(.media-slider)[data-pointing] *) {
+  opacity: 100%;
+  filter: ;
+  scale: 100% 100%;
+}
+
+.media-slider-thumbnail:has([role="img"][data-loading]) {
+  max-height: calc(var(--spacing) * 24);
+}
+
+.media-slider-track {
+  position: relative;
+  overflow: hidden;
+  -webkit-user-select: none;
+  user-select: none;
+  background-color: color-mix(in oklab, var(--color-white) 20%, transparent);
+  border-radius: inherit;
+  box-shadow:
+    0 0 #0000,
+    0 0 #0000,
+    0 0 #0000,
+    0 0 0 calc(1px + 0px) color-mix(in oklab, var(--color-black) 5%, transparent),
+    0 0 #0000;
+  isolation: isolate;
+}
+
+.media-slider-track[data-orientation="horizontal"] {
+  width: 100%;
+  height: calc(var(--spacing) * 1);
+}
+
+.media-slider-track[data-orientation="vertical"] {
+  width: calc(var(--spacing) * 1);
+  height: 100%;
+}
+
+.media-slider-value {
+  position: absolute;
+  bottom: calc(var(--spacing) * 9);
+  font-variant-numeric: tabular-nums;
+  text-shadow: 0px 1px 0px color-mix(in oklab, var(--media-current-shadow-color) 100%, transparent);
+  opacity: 0%;
+  filter: blur(var(--blur-lg));
+  scale: 50% 50%;
+  translate: calc(calc(1 / 2 * 100%) * -1) calc(var(--spacing) * 2);
+  transition-timing-function: var(--ease-out);
+  transition-duration: 200ms;
+  transition-property: filter, opacity, scale, translate;
+}
+
+.media-slider-value:is(:where(.media-slider-preview)[data-pointing] *) {
+  opacity: 100%;
+  filter: ;
+  scale: 100% 100%;
+  translate: 0 calc(var(--spacing) * 0);
+}
+
+.media-slider[data-orientation="horizontal"] {
+  width: 100%;
+  min-width: calc(var(--spacing) * 20);
+  height: calc(var(--spacing) * 8);
+}
+
+.media-slider[data-orientation="vertical"] {
+  width: calc(var(--spacing) * 8);
+  height: calc(var(--spacing) * 20);
+}
+
+.media-spinner {
+  display: block;
+  filter: drop-shadow(0 1px 0 var(--media-current-shadow-color));
+  flex-shrink: 0;
+  grid-area: 1 / 1;
+  height: var(--media-icon-size);
+  left: calc(1 / 2 * 100%);
+  opacity: 0%;
+  position: absolute;
+  top: calc(1 / 2 * 100%);
+  transition-behavior: allow-discrete;
+  transition-duration: 150ms;
+  transition-property: opacity;
+  transition-timing-function: var(--ease-out);
+  translate: calc(calc(1 / 2 * 100%) * -1) calc(calc(1 / 2 * 100%) * -1);
+  width: var(--media-icon-size);
+}
+
+.media-spinner:is(:where(.media-slider-thumbnail):has([role="img"][data-loading]) *) {
+  opacity: 100%;
+}
+
+.media-spinner:is(:where(.media-slider-thumbnail):not(:has([role="img"][data-loading])) *) {
+  --media-spinner-animation: none;
+}
+
+@media (hover: hover) {
+  .media-slider-thumb-persistent:hover,
+  .media-slider-thumb:hover {
+    outline-color: color-mix(in oklab, currentcolor 15%, transparent);
+    outline-offset: 0px;
+  }
+}
+
+@media (hover: hover) {
+  .media-slider-thumb:is(:where(.media-slider):hover *) {
+    opacity: 100%;
+  }
+}
diff --git a/packages/react/src/presets/video/__generated__/time.css b/packages/react/src/presets/video/__generated__/time.css
new file mode 100644
index 00000000..810f7fde
--- /dev/null
+++ b/packages/react/src/presets/video/__generated__/time.css
@@ -0,0 +1,37 @@
+.media-time-current {
+  display: none;
+  font-variant-numeric: tabular-nums;
+}
+
+.media-time-duration {
+  font-variant-numeric: tabular-nums;
+}
+
+.media-time-group {
+  display: flex;
+  flex: 1;
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 100%;
+  gap: calc(var(--spacing) * 3);
+  align-items: center;
+  order: -1;
+  padding-inline: calc(var(--spacing) * 2.5);
+  container-name: media-time;
+  container-type: inline-size;
+}
+
+@container media-container (width >= 42rem) {
+  .media-time-group {
+    flex-grow: 1;
+    flex-shrink: 1;
+    flex-basis: calc(var(--spacing) * 0);
+    order: unset;
+  }
+}
+
+@container media-time (width >= 18rem) {
+  .media-time-current {
+    display: block;
+  }
+}
diff --git a/packages/react/src/presets/video/default-video.generated.tailwind.tsx b/packages/react/src/presets/video/default-video.generated.tailwind.tsx
deleted file mode 100644
index 771dc3da..00000000
--- a/packages/react/src/presets/video/default-video.generated.tailwind.tsx
+++ /dev/null
@@ -1,353 +0,0 @@
-// Generated by @videojs/compiler. Do not edit.
-
-import {
-  airplayIcon,
-  bufferingIndicator,
-  button,
-  buttonGroupEnd,
-  buttonGroupStart,
-  castIcon,
-  container,
-  controls,
-  error,
-  fullscreenIcon,
-  icon,
-  iconFlipped,
-  inputFeedback,
-  muteIcon,
-  overlay,
-  pipIcon,
-  playIcon,
-  popup,
-  seek,
-  slider,
-  thumbnail,
-  time,
-} from '@videojs/skins/default/tailwind/video.tailwind';
-import { isString } from '@videojs/utils/predicate';
-import { cn } from '@videojs/utils/style';
-import type { ReactNode } from 'react';
-import {
-  AirPlayEnterIcon,
-  AirPlayExitIcon,
-  CaptionsOffIcon,
-  CaptionsOnIcon,
-  CastEnterIcon,
-  CastExitIcon,
-  ChevronIcon,
-  FullscreenEnterIcon,
-  FullscreenExitIcon,
-  PauseIcon,
-  PipEnterIcon,
-  PipExitIcon,
-  PlayIcon,
-  RestartIcon,
-  SeekIcon,
-  SpinnerIcon,
-  VolumeHighIcon,
-  VolumeLowIcon,
-  VolumeOffIcon,
-} from '@/icons';
-import { Container } from '@/player/context';
-import { AirPlayButton } from '@/ui/airplay-button';
-import { BufferingIndicator } from '@/ui/buffering-indicator';
-import { CastButton } from '@/ui/cast-button';
-import { Controls } from '@/ui/controls';
-import { ErrorDialog } from '@/ui/error-dialog';
-import { FeatureAvailability } from '@/ui/feature-availability';
-import { FullscreenButton } from '@/ui/fullscreen-button';
-import { Gesture } from '@/ui/gesture';
-import { Hotkey } from '@/ui/hotkey';
-import { MuteButton } from '@/ui/mute-button';
-import { Overlay } from '@/ui/overlay';
-import { PiPButton } from '@/ui/pip-button';
-import { PlayButton } from '@/ui/play-button';
-import { Popover } from '@/ui/popover';
-import { Poster } from '@/ui/poster';
-import { SeekButton } from '@/ui/seek-button';
-import { SeekIndicator } from '@/ui/seek-indicator';
-import { Slider } from '@/ui/slider';
-import { StatusAnnouncer } from '@/ui/status-announcer';
-import { StatusIndicator } from '@/ui/status-indicator';
-import { Time } from '@/ui/time';
-import { TimeSlider } from '@/ui/time-slider';
-import { Tooltip } from '@/ui/tooltip';
-import { VolumeIndicator } from '@/ui/volume-indicator';
-import { VolumeSlider } from '@/ui/volume-slider';
-import { isRenderProp } from '@/utils/use-render';
-import type { BaseVideoSkinProps } from '../types';
-
-const SEEK_TIME = 10;
-
-const TOP_STATUS_ACTIONS = ['toggleSubtitles', 'toggleFullscreen', 'togglePictureInPicture'] as const;
-
-const CENTER_STATUS_ACTIONS = ['togglePaused'] as const;
-
-const iconButton = [button.base, button.subtle, button.icon];
-
-export interface DefaultVideoSkinProps extends BaseVideoSkinProps {
-  className?: string;
-  children?: ReactNode | undefined;
-}
-
-function MuteControl() {
-  return (
-    <MuteButton className={cn(iconButton, muteIcon.button)} type="button">
-      <VolumeOffIcon className={cn(icon, muteIcon.volumeOff)} />
-      <VolumeLowIcon className={cn(icon, muteIcon.volumeLow)} />
-      <VolumeHighIcon className={cn(icon, muteIcon.volumeHigh)} />
-    </MuteButton>
-  );
-}
-
-export function DefaultVideoSkin({ className, children, poster, ...rest }: DefaultVideoSkinProps) {
-  return (
-    <Container className={cn(container, className)} {...rest}>
-      {children}
-
-      {poster && (
-        <Poster src={isString(poster) ? poster : undefined} render={isRenderProp(poster) ? poster : undefined} />
-      )}
-
-      <BufferingIndicator className={bufferingIndicator.root}>
-        <SpinnerIcon className={icon} />
-      </BufferingIndicator>
-
-      <ErrorDialog.Root>
-        <ErrorDialog.Popup className={error.popup}>
-          <ErrorDialog.Title className={error.title}>Something went wrong.</ErrorDialog.Title>
-          <ErrorDialog.Description className={error.description} />
-          <ErrorDialog.Close className={cn(button.base, button.primary, error.close)}>OK</ErrorDialog.Close>
-        </ErrorDialog.Popup>
-      </ErrorDialog.Root>
-
-      <Controls.Root className={controls} data-controls="">
-        <Tooltip.Provider>
-          <Controls.Group className={buttonGroupStart}>
-            <Tooltip.Root side="top">
-              <Tooltip.Trigger
-                render={
-                  <PlayButton className={cn(iconButton, playIcon.button)} type="button">
-                    <RestartIcon className={cn(icon, playIcon.restart)} />
-                    <PlayIcon className={cn(icon, playIcon.play)} />
-                    <PauseIcon className={cn(icon, playIcon.pause)} />
-                  </PlayButton>
-                }
-              />
-              <Tooltip.Popup className={popup.tooltip}>
-                <Tooltip.Label />
-                <Tooltip.Shortcut className={popup.tooltipShortcut} />
-              </Tooltip.Popup>
-            </Tooltip.Root>
-
-            <Tooltip.Root side="top">
-              <Tooltip.Trigger
-                render={
-                  <SeekButton seconds={-SEEK_TIME} className={cn(iconButton, seek.button)} type="button">
-                    <SeekIcon className={cn(icon, iconFlipped)} />
-                    <span className={cn(seek.label, seek.labelBackward)}>{SEEK_TIME}</span>
-                  </SeekButton>
-                }
-              />
-              <Tooltip.Popup className={popup.tooltip}>
-                <Tooltip.Label />
-                <Tooltip.Shortcut className={popup.tooltipShortcut} />
-              </Tooltip.Popup>
-            </Tooltip.Root>
-
-            <Tooltip.Root side="top">
-              <Tooltip.Trigger
-                render={
-                  <SeekButton seconds={SEEK_TIME} className={cn(iconButton, seek.button)} type="button">
-                    <SeekIcon className={icon} />
-                    <span className={cn(seek.label, seek.labelForward)}>{SEEK_TIME}</span>
-                  </SeekButton>
-                }
-              />
-              <Tooltip.Popup className={popup.tooltip}>
-                <Tooltip.Label />
-                <Tooltip.Shortcut className={popup.tooltipShortcut} />
-              </Tooltip.Popup>
-            </Tooltip.Root>
-          </Controls.Group>
-
-          <Time.Group className={time.group}>
-            <Time.Value type="current" className={time.current} />
-            <TimeSlider.Root className={slider.root}>
-              <TimeSlider.Track className={slider.track}>
-                <TimeSlider.Fill className={cn(slider.fill.base, slider.fill.fill)} />
-                <TimeSlider.Buffer className={cn(slider.fill.base, slider.fill.buffer)} />
-              </TimeSlider.Track>
-              <TimeSlider.Thumb className={cn(slider.thumb.base, slider.thumb.interactive)} />
-              <Slider.Thumbnail.Root className={thumbnail.root}>
-                <Slider.Thumbnail.Image className={thumbnail.image} />
-                <TimeSlider.Value type="pointer" className={thumbnail.time} />
-                <SpinnerIcon className={cn(icon, thumbnail.spinner)} />
-              </Slider.Thumbnail.Root>
-              <TimeSlider.Preview className={slider.preview}>
-                <TimeSlider.Value type="pointer" className={slider.value} />
-              </TimeSlider.Preview>
-            </TimeSlider.Root>
-            <Time.Value type="duration" className={time.duration} />
-          </Time.Group>
-
-          <Controls.Group className={buttonGroupEnd}>
-            <FeatureAvailability is="volume" when="unsupported">
-              <MuteControl />
-            </FeatureAvailability>
-            <FeatureAvailability is="volume" except="unsupported">
-              <Popover.Root openOnHover delay={200} closeDelay={100} side="top">
-                <Popover.Trigger render={<MuteControl />} />
-                <Popover.Popup className={cn(popup.popover, popup.volume)}>
-                  <VolumeSlider.Root orientation="vertical" thumbAlignment="edge" className={slider.root}>
-                    <VolumeSlider.Track className={slider.track}>
-                      <VolumeSlider.Fill className={cn(slider.fill.base, slider.fill.fill)} />
-                    </VolumeSlider.Track>
-                    <VolumeSlider.Thumb className={cn(slider.thumb.base, slider.thumb.persistent)} />
-                  </VolumeSlider.Root>
-                </Popover.Popup>
-              </Popover.Root>
-            </FeatureAvailability>
-
-            <Tooltip.Root side="top">
-              <Tooltip.Trigger
-                render={
-                  <CastButton className={cn(iconButton, castIcon.button)} type="button">
-                    <CastEnterIcon className={cn(icon, castIcon.enter)} />
-                    <CastExitIcon className={cn(icon, castIcon.exit)} />
-                  </CastButton>
-                }
-              />
-              <Tooltip.Popup className={popup.tooltip}>
-                <Tooltip.Label />
-                <Tooltip.Shortcut className={popup.tooltipShortcut} />
-              </Tooltip.Popup>
-            </Tooltip.Root>
-
-            <Tooltip.Root side="top">
-              <Tooltip.Trigger
-                render={
-                  <AirPlayButton className={cn(iconButton, airplayIcon.button)} type="button">
-                    <AirPlayEnterIcon className={cn(icon, airplayIcon.enter)} />
-                    <AirPlayExitIcon className={cn(icon, airplayIcon.exit)} />
-                  </AirPlayButton>
-                }
-              />
-              <Tooltip.Popup className={popup.tooltip}>
-                <Tooltip.Label />
-                <Tooltip.Shortcut className={popup.tooltipShortcut} />
-              </Tooltip.Popup>
-            </Tooltip.Root>
-
-            <Tooltip.Root side="top">
-              <Tooltip.Trigger
-                render={
-                  <PiPButton className={cn(iconButton, pipIcon.button)} type="button">
-                    <PipEnterIcon className={cn(icon, pipIcon.off)} />
-                    <PipExitIcon className={cn(icon, pipIcon.on)} />
-                  </PiPButton>
-                }
-              />
-              <Tooltip.Popup className={popup.tooltip}>
-                <Tooltip.Label />
-                <Tooltip.Shortcut className={popup.tooltipShortcut} />
-              </Tooltip.Popup>
-            </Tooltip.Root>
-
-            <Tooltip.Root side="top">
-              <Tooltip.Trigger
-                render={
-                  <FullscreenButton className={cn(iconButton, fullscreenIcon.button)} type="button">
-                    <FullscreenEnterIcon className={cn(icon, fullscreenIcon.enter)} />
-                    <FullscreenExitIcon className={cn(icon, fullscreenIcon.exit)} />
-                  </FullscreenButton>
-                }
-              />
-              <Tooltip.Popup className={popup.tooltip}>
-                <Tooltip.Label />
-                <Tooltip.Shortcut className={popup.tooltipShortcut} />
-              </Tooltip.Popup>
-            </Tooltip.Root>
-          </Controls.Group>
-        </Tooltip.Provider>
-      </Controls.Root>
-
-      <Overlay className={overlay} />
-
-      <Hotkey keys="Space" action="togglePaused" />
-      <Hotkey keys="k" action="togglePaused" />
-      <Hotkey keys="m" action="toggleMuted" />
-      <Hotkey keys="f" action="toggleFullscreen" />
-      <Hotkey keys="c" action="toggleSubtitles" />
-      <Hotkey keys="i" action="togglePictureInPicture" />
-      <Hotkey keys="ArrowRight" action="seekStep" value={SEEK_TIME / 2} />
-      <Hotkey keys="ArrowLeft" action="seekStep" value={-(SEEK_TIME / 2)} />
-      <Hotkey keys="l" action="seekStep" value={SEEK_TIME} />
-      <Hotkey keys="j" action="seekStep" value={-SEEK_TIME} />
-      <Hotkey keys="ArrowUp" action="volumeStep" value={0.05} />
-      <Hotkey keys="ArrowDown" action="volumeStep" value={-0.05} />
-      <Hotkey keys="0-9" action="seekToPercent" />
-      <Hotkey keys="Home" action="seekToPercent" value={0} />
-      <Hotkey keys="End" action="seekToPercent" value={100} />
-      <Hotkey keys=">" action="speedUp" />
-      <Hotkey keys="<" action="speedDown" />
-
-      <Gesture type="tap" action="togglePaused" pointer="mouse" region="center" />
-      <Gesture type="tap" action="toggleControls" pointer="touch" />
-      <Gesture type="doubletap" action="seekStep" value={-SEEK_TIME} region="left" />
-      <Gesture type="doubletap" action="toggleFullscreen" region="center" />
-      <Gesture type="doubletap" action="seekStep" value={SEEK_TIME} region="right" />
-
-      <StatusAnnouncer />
-
-      <VolumeIndicator.Root
-        className={cn(
-          inputFeedback.island.root,
-          inputFeedback.island.base,
-          inputFeedback.island.volume,
-          inputFeedback.island.shownVolume
-        )}
-      >
-        <VolumeIndicator.Fill className={inputFeedback.island.content}>
-          <VolumeHighIcon className={cn(inputFeedback.island.icon, inputFeedback.island.shownVolumeHigh)} />
-          <VolumeLowIcon className={cn(inputFeedback.island.icon, inputFeedback.island.shownVolumeLow)} />
-          <VolumeOffIcon className={cn(inputFeedback.island.icon, inputFeedback.island.shownVolumeOff)} />
-          <VolumeIndicator.Value className={inputFeedback.island.value} />
-        </VolumeIndicator.Fill>
-      </VolumeIndicator.Root>
-
-      <StatusIndicator.Root
-        actions={TOP_STATUS_ACTIONS}
-        className={cn(
-          inputFeedback.island.root,
-          inputFeedback.island.base,
-          inputFeedback.island.statusContent,
-          inputFeedback.island.shownStatus
-        )}
-      >
-        <CaptionsOnIcon className={cn(inputFeedback.island.icon, inputFeedback.island.shownCaptionsOn)} />
-        <CaptionsOffIcon className={cn(inputFeedback.island.icon, inputFeedback.island.shownCaptionsOff)} />
-        <FullscreenEnterIcon className={cn(inputFeedback.island.icon, inputFeedback.island.shownFullscreenEnter)} />
-        <FullscreenExitIcon className={cn(inputFeedback.island.icon, inputFeedback.island.shownFullscreenExit)} />
-        <PipEnterIcon className={cn(inputFeedback.island.icon, inputFeedback.island.shownPipEnter)} />
-        <PipExitIcon className={cn(inputFeedback.island.icon, inputFeedback.island.shownPipExit)} />
-        <StatusIndicator.Value className={inputFeedback.island.value} />
-      </StatusIndicator.Root>
-
-      <SeekIndicator.Root
-        className={cn(inputFeedback.bubble.root, inputFeedback.bubble.seekRoot, inputFeedback.bubble.base)}
-      >
-        <ChevronIcon className={cn(inputFeedback.bubble.icon, inputFeedback.bubble.shownSeek)} />
-        <SeekIndicator.Value className={inputFeedback.bubble.time} />
-      </SeekIndicator.Root>
-
-      <StatusIndicator.Root
-        actions={CENTER_STATUS_ACTIONS}
-        className={cn(inputFeedback.bubble.root, inputFeedback.bubble.centerRoot, inputFeedback.bubble.base)}
-      >
-        <PlayIcon className={cn(inputFeedback.bubble.icon, inputFeedback.bubble.shownPlay)} />
-        <PauseIcon className={cn(inputFeedback.bubble.icon, inputFeedback.bubble.shownPause)} />
-      </StatusIndicator.Root>
-    </Container>
-  );
-}
diff --git a/packages/react/src/presets/video/index.ts b/packages/react/src/presets/video/index.ts
index 1158b11a..6cb9ad27 100644
--- a/packages/react/src/presets/video/index.ts
+++ b/packages/react/src/presets/video/index.ts
@@ -4,4 +4,3 @@ export { Video, type VideoProps } from '@/media/video';
 export * from './minimal-skin';
 export * from './minimal-skin.tailwind';
 export * from './skin';
-export * from './skin.tailwind';
diff --git a/packages/react/src/presets/video/skin.css b/packages/react/src/presets/video/skin.css
index e69de29b..1f91f926 100644
--- a/packages/react/src/presets/video/skin.css
+++ b/packages/react/src/presets/video/skin.css
@@ -0,0 +1 @@
+@import "./__generated__/default-video.css";
diff --git a/packages/react/src/presets/video/skin.tailwind.tsx b/packages/react/src/presets/video/skin.tailwind.tsx
deleted file mode 100644
index ee71dbf4..00000000
--- a/packages/react/src/presets/video/skin.tailwind.tsx
+++ /dev/null
@@ -1,601 +0,0 @@
-import {
-  airplayIcon,
-  badge,
-  bufferingIndicator,
-  button,
-  buttonGroupEnd,
-  buttonGroupStart,
-  castIcon,
-  container,
-  controls,
-  error,
-  fullscreenIcon,
-  icon,
-  iconContainer,
-  iconFlipped,
-  inputFeedback,
-  menu,
-  muteIcon,
-  overlay,
-  pipIcon,
-  playIcon,
-  popup,
-  poster,
-  seek,
-  slider,
-  thumbnail,
-  time,
-} from '@videojs/skins/default/tailwind/video.tailwind';
-import { isString } from '@videojs/utils/predicate';
-import { cn } from '@videojs/utils/style';
-import { type ComponentProps, forwardRef, type ReactNode } from 'react';
-import {
-  AirPlayEnterIcon,
-  AirPlayExitIcon,
-  CaptionsOffIcon,
-  CaptionsOnIcon,
-  CastEnterIcon,
-  CastExitIcon,
-  CheckIcon,
-  ChevronIcon,
-  FullscreenEnterIcon,
-  FullscreenExitIcon,
-  GearIcon,
-  PauseIcon,
-  PipEnterIcon,
-  PipExitIcon,
-  PlayIcon,
-  RestartIcon,
-  SeekIcon,
-  SpeedIcon,
-  SpinnerIcon,
-  SwitchesIcon,
-  VolumeHighIcon,
-  VolumeLowIcon,
-  VolumeOffIcon,
-} from '@/icons';
-import { Container, usePlayer } from '@/player/context';
-import { AirPlayButton } from '@/ui/airplay-button';
-import { BufferingIndicator } from '@/ui/buffering-indicator';
-import { useCaptionsOptions } from '@/ui/captions-radio-group';
-import { CastButton } from '@/ui/cast-button';
-import { Controls } from '@/ui/controls';
-import { ErrorDialog } from '@/ui/error-dialog';
-import { FullscreenButton } from '@/ui/fullscreen-button';
-import { Gesture } from '@/ui/gesture';
-import { Hotkey } from '@/ui/hotkey';
-import { Menu } from '@/ui/menu';
-import { MuteButton } from '@/ui/mute-button';
-import { Overlay } from '@/ui/overlay';
-import { PiPButton } from '@/ui/pip-button';
-import { PlayButton } from '@/ui/play-button';
-import { usePlaybackRateOptions } from '@/ui/playback-rate';
-import { Popover } from '@/ui/popover';
-import { Poster } from '@/ui/poster';
-import { useQualityOptions } from '@/ui/quality';
-import { SeekButton } from '@/ui/seek-button';
-import { SeekIndicator } from '@/ui/seek-indicator';
-import { Slider } from '@/ui/slider';
-import { StatusAnnouncer } from '@/ui/status-announcer';
-import { StatusIndicator } from '@/ui/status-indicator';
-import { Time } from '@/ui/time';
-import { TimeSlider } from '@/ui/time-slider';
-import { Tooltip } from '@/ui/tooltip';
-import { VolumeIndicator } from '@/ui/volume-indicator';
-import { VolumeSlider } from '@/ui/volume-slider';
-import { isRenderProp } from '@/utils/use-render';
-import type { VideoSkinProps } from './skin';
-
-const SEEK_TIME = 10;
-const TOP_STATUS_ACTIONS = ['toggleSubtitles', 'toggleFullscreen', 'togglePictureInPicture'] as const;
-const CENTER_STATUS_ACTIONS = ['togglePaused'] as const;
-
-/* --------------------------------------- Components ---------------------------------------- */
-
-const Button = forwardRef<HTMLButtonElement, ComponentProps<'button'>>(function Button({ className, ...props }, ref) {
-  return (
-    <button ref={ref} type="button" className={cn(button.base, button.subtle, button.icon, className)} {...props} />
-  );
-});
-
-const SliderRoot = forwardRef<HTMLDivElement, ComponentProps<'div'>>(function SliderRoot({ className, ...props }, ref) {
-  return <div ref={ref} className={cn(slider.root, className)} {...props} />;
-});
-
-const SliderTrack = forwardRef<HTMLDivElement, ComponentProps<'div'>>(function SliderTrack(
-  { className, ...props },
-  ref
-) {
-  return <div ref={ref} className={cn(slider.track, className)} {...props} />;
-});
-
-const SliderFill = forwardRef<HTMLDivElement, ComponentProps<'div'> & { type?: 'fill' | 'buffer' }>(function SliderFill(
-  { type = 'fill', className, ...props },
-  ref
-) {
-  return (
-    <div
-      ref={ref}
-      className={cn(slider.fill.base, type === 'fill' ? slider.fill.fill : slider.fill.buffer, className)}
-      {...props}
-    />
-  );
-});
-
-const SliderBuffer = forwardRef<HTMLDivElement, ComponentProps<'div'>>(function SliderBuffer(props, ref) {
-  return <SliderFill type="buffer" ref={ref} {...props} />;
-});
-
-const SliderThumb = forwardRef<HTMLDivElement, ComponentProps<'div'> & { persistent?: boolean }>(function SliderThumb(
-  { persistent, className, ...props },
-  ref
-) {
-  return (
-    <div
-      ref={ref}
-      className={cn(slider.thumb.base, persistent ? slider.thumb.persistent : slider.thumb.interactive, className)}
-      {...props}
-    />
-  );
-});
-
-function VolumePopover(): ReactNode {
-  const volumeUnsupported = usePlayer((s) => s.volumeAvailability === 'unsupported');
-
-  const muteButton = (
-    <MuteButton className={muteIcon.button} render={<Button />}>
-      <VolumeOffIcon className={cn(icon, muteIcon.volumeOff)} />
-      <VolumeLowIcon className={cn(icon, muteIcon.volumeLow)} />
-      <VolumeHighIcon className={cn(icon, muteIcon.volumeHigh)} />
-    </MuteButton>
-  );
-
-  if (volumeUnsupported) return muteButton;
-
-  return (
-    <Popover.Root openOnHover delay={200} closeDelay={100} side="top">
-      <Popover.Trigger render={muteButton} />
-      <Popover.Popup className={cn(popup.popover, popup.volume)}>
-        <VolumeSlider.Root orientation="vertical" thumbAlignment="edge" render={<SliderRoot />}>
-          <VolumeSlider.Track render={<SliderTrack />}>
-            <VolumeSlider.Fill render={<SliderFill />} />
-          </VolumeSlider.Track>
-          <VolumeSlider.Thumb render={(props) => <SliderThumb persistent {...props} />} />
-        </VolumeSlider.Root>
-      </Popover.Popup>
-    </Popover.Root>
-  );
-}
-
-function MenuChevron({ flipped = false }: { flipped?: boolean }): ReactNode {
-  return <ChevronIcon className={cn(icon, menu.chevron, flipped ? iconFlipped : undefined)} />;
-}
-
-function SettingsMenu(): ReactNode {
-  const playbackRate = usePlaybackRateOptions();
-  const quality = useQualityOptions();
-  const captions = useCaptionsOptions();
-  const hasPlaybackRate = playbackRate?.state.availability === 'available';
-  const hasQuality = quality?.state.availability === 'available';
-  const hasCaptions = captions?.state.availability === 'available';
-
-  if (!hasPlaybackRate && !hasQuality && !hasCaptions) return null;
-
-  return (
-    <Menu.Root side="top" align="center">
-      <Menu.Trigger
-        aria-label="Settings"
-        className="media-button--settings"
-        render={<Button className={cn(button.icon, menu.settingsTrigger)} />}
-      >
-        <GearIcon className={cn(icon, menu.settingsIcon)} />
-      </Menu.Trigger>
-      <Menu.Content className={menu.settings}>
-        <Menu.View className={menu.rootView}>
-          <div className={menu.group}>
-            {hasQuality && quality ? (
-              <Menu.Root>
-                <Menu.Trigger
-                  type="quality"
-                  className={cn(menu.item, 'media-menu__item--submenu')}
-                  render={(props) => (
-                    <div {...props}>
-                      <SwitchesIcon className={icon} />
-                      <span>Quality</span>
-                      <span className={menu.hint}>
-                        <Menu.ItemValue className={menu.hintLabel} />
-                        <MenuChevron />
-                      </span>
-                    </div>
-                  )}
-                />
-                <Menu.Content className={menu.submenuPanel}>
-                  <Menu.Back className={menu.back}>
-                    <MenuChevron flipped />
-                    Quality
-                  </Menu.Back>
-                  <Menu.Separator className={menu.separator} />
-                  <Menu.RadioGroup
-                    className={menu.group}
-                    value={quality.value}
-                    onValueChange={quality.setValue}
-                    aria-label="Quality"
-                  >
-                    {quality.options.map((option) => (
-                      <Menu.RadioItem
-                        key={option.value}
-                        className={menu.item}
-                        value={option.value}
-                        disabled={option.disabled}
-                      >
-                        <span>{option.label}</span>
-                        {option.tier ? <sup className={menu.tier}>{option.tier}</sup> : null}
-                        {option.badge ? <span className={cn(badge, menu.badge)}>{option.badge}</span> : null}
-                        <Menu.ItemIndicator
-                          checked={option.value === quality.value}
-                          forceMount
-                          className={menu.indicator}
-                        >
-                          <CheckIcon className={icon} />
-                        </Menu.ItemIndicator>
-                      </Menu.RadioItem>
-                    ))}
-                  </Menu.RadioGroup>
-                </Menu.Content>
-              </Menu.Root>
-            ) : null}
-            {hasPlaybackRate && playbackRate ? (
-              <Menu.Root>
-                <Menu.Trigger
-                  type="playback-rate"
-                  className={cn(menu.item, 'media-menu__item--submenu')}
-                  render={(props) => (
-                    <div {...props}>
-                      <SpeedIcon className={icon} />
-                      <span>Speed</span>
-                      <span className={menu.hint}>
-                        <Menu.ItemValue className={menu.hintLabel} />
-                        <MenuChevron />
-                      </span>
-                    </div>
-                  )}
-                />
-                <Menu.Content className={menu.submenuPanel}>
-                  <Menu.Back className={menu.back}>
-                    <MenuChevron flipped />
-                    Speed
-                  </Menu.Back>
-                  <Menu.Separator className={menu.separator} />
-                  <Menu.RadioGroup
-                    className={menu.group}
-                    value={playbackRate.value}
-                    onValueChange={playbackRate.setValue}
-                    aria-label="Playback rate"
-                  >
-                    {playbackRate.options.map((option) => (
-                      <Menu.RadioItem
-                        key={option.value}
-                        className={menu.item}
-                        value={option.value}
-                        disabled={option.disabled}
-                      >
-                        <span>{option.label}</span>
-                        <Menu.ItemIndicator
-                          checked={option.value === playbackRate.value}
-                          forceMount
-                          className={menu.indicator}
-                        >
-                          <CheckIcon className={icon} />
-                        </Menu.ItemIndicator>
-                      </Menu.RadioItem>
-                    ))}
-                  </Menu.RadioGroup>
-                </Menu.Content>
-              </Menu.Root>
-            ) : null}
-            {hasCaptions && captions ? (
-              <Menu.Root>
-                <Menu.Trigger
-                  type="captions"
-                  className={cn(menu.item, 'media-menu__item--submenu')}
-                  render={(props) => (
-                    <div {...props}>
-                      <CaptionsOffIcon className={icon} />
-                      <span>Captions</span>
-                      <span className={menu.hint}>
-                        <Menu.ItemValue className={menu.hintLabel} />
-                        <MenuChevron />
-                      </span>
-                    </div>
-                  )}
-                />
-                <Menu.Content className={menu.submenuPanel}>
-                  <Menu.Back className={menu.back}>
-                    <MenuChevron flipped />
-                    Captions
-                  </Menu.Back>
-                  <Menu.Separator className={menu.separator} />
-                  <Menu.RadioGroup
-                    className={menu.group}
-                    value={captions.value}
-                    onValueChange={captions.setValue}
-                    aria-label="Captions"
-                  >
-                    {captions.options.map((option) => (
-                      <Menu.RadioItem
-                        key={option.value}
-                        className={menu.item}
-                        value={option.value}
-                        disabled={option.disabled}
-                      >
-                        <span>{option.label}</span>
-                        <Menu.ItemIndicator
-                          checked={option.value === captions.value}
-                          forceMount
-                          className={menu.indicator}
-                        >
-                          <CheckIcon className={icon} />
-                        </Menu.ItemIndicator>
-                      </Menu.RadioItem>
-                    ))}
-                  </Menu.RadioGroup>
-                </Menu.Content>
-              </Menu.Root>
-            ) : null}
-          </div>
-        </Menu.View>
-      </Menu.Content>
-    </Menu.Root>
-  );
-}
-
-/* ------------------------------------------ Skin ------------------------------------------- */
-
-export function VideoSkinTailwind(props: VideoSkinProps): ReactNode {
-  const { children, className, poster: posterProp, ...rest } = props;
-
-  return (
-    <Container className={cn(container, className)} {...rest}>
-      {children}
-
-      {posterProp && (
-        <Poster
-          src={isString(posterProp) ? posterProp : undefined}
-          render={isRenderProp(posterProp) ? posterProp : undefined}
-          className={poster}
-        />
-      )}
-
-      <BufferingIndicator className={bufferingIndicator.root}>
-        <SpinnerIcon className={icon} />
-      </BufferingIndicator>
-
-      <ErrorDialog.Root>
-        <ErrorDialog.Popup className={error.root}>
-          <div className={error.dialog}>
-            <div className={error.content}>
-              <ErrorDialog.Title className={error.title}>Something went wrong.</ErrorDialog.Title>
-              <ErrorDialog.Description className={error.description} />
-            </div>
-            <div className={error.actions}>
-              <ErrorDialog.Close className={cn(button.base, button.primary)}>OK</ErrorDialog.Close>
-            </div>
-          </div>
-        </ErrorDialog.Popup>
-      </ErrorDialog.Root>
-
-      <Controls.Root
-        data-controls="" // Used as a hook for Tailwind has-[] styles
-        className={controls}
-      >
-        <Tooltip.Provider>
-          <div className={buttonGroupStart}>
-            <Tooltip.Root side="top">
-              <Tooltip.Trigger
-                render={
-                  <PlayButton className={playIcon.button} render={<Button />}>
-                    <RestartIcon className={cn(icon, playIcon.restart)} />
-                    <PlayIcon className={cn(icon, playIcon.play)} />
-                    <PauseIcon className={cn(icon, playIcon.pause)} />
-                  </PlayButton>
-                }
-              />
-              <Tooltip.Popup className={cn(popup.tooltip)}>
-                <Tooltip.Label />
-                <Tooltip.Shortcut className={popup.tooltipShortcut} />
-              </Tooltip.Popup>
-            </Tooltip.Root>
-
-            <Tooltip.Root side="top">
-              <Tooltip.Trigger
-                render={
-                  <SeekButton seconds={-SEEK_TIME} render={<Button />}>
-                    <span className={iconContainer}>
-                      <SeekIcon className={cn(icon, iconFlipped)} />
-                      <span className={cn(seek.label, seek.labelBackward)}>{SEEK_TIME}</span>
-                    </span>
-                  </SeekButton>
-                }
-              />
-              <Tooltip.Popup className={cn(popup.tooltip)}>
-                <Tooltip.Label />
-                <Tooltip.Shortcut className={popup.tooltipShortcut} />
-              </Tooltip.Popup>
-            </Tooltip.Root>
-
-            <Tooltip.Root side="top">
-              <Tooltip.Trigger
-                render={
-                  <SeekButton seconds={SEEK_TIME} render={<Button />}>
-                    <span className={iconContainer}>
-                      <SeekIcon className={icon} />
-                      <span className={cn(seek.label, seek.labelForward)}>{SEEK_TIME}</span>
-                    </span>
-                  </SeekButton>
-                }
-              />
-              <Tooltip.Popup className={cn(popup.tooltip)}>
-                <Tooltip.Label />
-                <Tooltip.Shortcut className={popup.tooltipShortcut} />
-              </Tooltip.Popup>
-            </Tooltip.Root>
-          </div>
-
-          <div className={time.group}>
-            <Time.Value type="current" className={time.current} />
-            <TimeSlider.Root render={<SliderRoot />}>
-              <TimeSlider.Track render={<SliderTrack />}>
-                <TimeSlider.Fill render={<SliderFill />} />
-                <TimeSlider.Buffer render={<SliderBuffer />} />
-              </TimeSlider.Track>
-              <TimeSlider.Thumb render={<SliderThumb />} />
-              <div className={thumbnail.root}>
-                <Slider.Thumbnail className={thumbnail.image} />
-                <TimeSlider.Value type="pointer" className={thumbnail.time} />
-                <SpinnerIcon className={cn(icon, thumbnail.spinner)} />
-              </div>
-              <TimeSlider.Preview className={slider.preview}>
-                <TimeSlider.Value type="pointer" className={slider.value} />
-              </TimeSlider.Preview>
-            </TimeSlider.Root>
-            <Time.Value type="duration" className={time.duration} />
-          </div>
-
-          <div className={cn(buttonGroupEnd, menu.settingsGroup)}>
-            <VolumePopover />
-
-            <SettingsMenu />
-
-            <Tooltip.Root side="top">
-              <Tooltip.Trigger
-                render={
-                  <CastButton className={castIcon.button} render={<Button />}>
-                    <CastEnterIcon className={cn(icon, castIcon.enter)} />
-                    <CastExitIcon className={cn(icon, castIcon.exit)} />
-                  </CastButton>
-                }
-              />
-              <Tooltip.Popup className={cn(popup.tooltip)}>
-                <Tooltip.Label />
-                <Tooltip.Shortcut className={popup.tooltipShortcut} />
-              </Tooltip.Popup>
-            </Tooltip.Root>
-
-            <Tooltip.Root side="top">
-              <Tooltip.Trigger
-                render={
-                  <AirPlayButton className={airplayIcon.button} render={<Button />}>
-                    <AirPlayEnterIcon className={cn(icon, airplayIcon.enter)} />
-                    <AirPlayExitIcon className={cn(icon, airplayIcon.exit)} />
-                  </AirPlayButton>
-                }
-              />
-              <Tooltip.Popup className={cn(popup.tooltip)}>
-                <Tooltip.Label />
-                <Tooltip.Shortcut className={popup.tooltipShortcut} />
-              </Tooltip.Popup>
-            </Tooltip.Root>
-
-            <Tooltip.Root side="top">
-              <Tooltip.Trigger
-                render={
-                  <PiPButton className={pipIcon.button} render={<Button />}>
-                    <PipEnterIcon className={cn(icon, pipIcon.off)} />
-                    <PipExitIcon className={cn(icon, pipIcon.on)} />
-                  </PiPButton>
-                }
-              />
-              <Tooltip.Popup className={cn(popup.tooltip)}>
-                <Tooltip.Label />
-                <Tooltip.Shortcut className={popup.tooltipShortcut} />
-              </Tooltip.Popup>
-            </Tooltip.Root>
-
-            <Tooltip.Root side="top">
-              <Tooltip.Trigger
-                render={
-                  <FullscreenButton className={fullscreenIcon.button} render={<Button />}>
-                    <FullscreenEnterIcon className={cn(icon, fullscreenIcon.enter)} />
-                    <FullscreenExitIcon className={cn(icon, fullscreenIcon.exit)} />
-                  </FullscreenButton>
-                }
-              />
-              <Tooltip.Popup className={cn(popup.tooltip)}>
-                <Tooltip.Label />
-                <Tooltip.Shortcut className={popup.tooltipShortcut} />
-              </Tooltip.Popup>
-            </Tooltip.Root>
-          </div>
-        </Tooltip.Provider>
-      </Controls.Root>
-
-      <Overlay className={overlay} />
-
-      {/* Hotkeys */}
-      <Hotkey keys="Space" action="togglePaused" />
-      <Hotkey keys="k" action="togglePaused" />
-      <Hotkey keys="m" action="toggleMuted" />
-      <Hotkey keys="f" action="toggleFullscreen" />
-      <Hotkey keys="c" action="toggleSubtitles" />
-      <Hotkey keys="i" action="togglePictureInPicture" />
-      <Hotkey keys="ArrowRight" action="seekStep" value={SEEK_TIME / 2} />
-      <Hotkey keys="ArrowLeft" action="seekStep" value={-(SEEK_TIME / 2)} />
-      <Hotkey keys="l" action="seekStep" value={SEEK_TIME} />
-      <Hotkey keys="j" action="seekStep" value={-SEEK_TIME} />
-      <Hotkey keys="ArrowUp" action="volumeStep" value={0.05} />
-      <Hotkey keys="ArrowDown" action="volumeStep" value={-0.05} />
-      <Hotkey keys="0-9" action="seekToPercent" />
-      <Hotkey keys="Home" action="seekToPercent" value={0} />
-      <Hotkey keys="End" action="seekToPercent" value={100} />
-      <Hotkey keys=">" action="speedUp" />
-      <Hotkey keys="<" action="speedDown" />
-
-      {/* Gestures */}
-      <Gesture type="tap" action="togglePaused" pointer="mouse" region="center" />
-      <Gesture type="tap" action="toggleControls" pointer="touch" />
-      <Gesture type="doubletap" action="seekStep" value={-SEEK_TIME} region="left" />
-      <Gesture type="doubletap" action="toggleFullscreen" region="center" />
-      <Gesture type="doubletap" action="seekStep" value={SEEK_TIME} region="right" />
-
-      {/* Input Feedback */}
-      <StatusAnnouncer />
-      <div className={inputFeedback.root}>
-        <VolumeIndicator.Root
-          className={cn(inputFeedback.island.base, inputFeedback.island.volume, inputFeedback.island.shownVolume)}
-        >
-          <VolumeIndicator.Fill className={inputFeedback.island.content}>
-            <VolumeHighIcon className={cn(inputFeedback.island.icon, inputFeedback.island.shownVolumeHigh)} />
-            <VolumeLowIcon className={cn(inputFeedback.island.icon, inputFeedback.island.shownVolumeLow)} />
-            <VolumeOffIcon className={cn(inputFeedback.island.icon, inputFeedback.island.shownVolumeOff)} />
-            <VolumeIndicator.Value className={inputFeedback.island.value} />
-          </VolumeIndicator.Fill>
-        </VolumeIndicator.Root>
-
-        <StatusIndicator.Root
-          actions={TOP_STATUS_ACTIONS}
-          className={cn(inputFeedback.island.base, inputFeedback.island.shownStatus)}
-        >
-          <div className={inputFeedback.island.content}>
-            <CaptionsOnIcon className={cn(inputFeedback.island.icon, inputFeedback.island.shownCaptionsOn)} />
-            <CaptionsOffIcon className={cn(inputFeedback.island.icon, inputFeedback.island.shownCaptionsOff)} />
-            <FullscreenEnterIcon className={cn(inputFeedback.island.icon, inputFeedback.island.shownFullscreenEnter)} />
-            <FullscreenExitIcon className={cn(inputFeedback.island.icon, inputFeedback.island.shownFullscreenExit)} />
-            <PipEnterIcon className={cn(inputFeedback.island.icon, inputFeedback.island.shownPipEnter)} />
-            <PipExitIcon className={cn(inputFeedback.island.icon, inputFeedback.island.shownPipExit)} />
-            <StatusIndicator.Value className={inputFeedback.island.value} />
-          </div>
-        </StatusIndicator.Root>
-
-        <SeekIndicator.Root className={inputFeedback.bubble.base}>
-          <ChevronIcon className={cn(inputFeedback.bubble.icon, inputFeedback.bubble.shownSeek)} />
-          <SeekIndicator.Value className={inputFeedback.bubble.time} />
-        </SeekIndicator.Root>
-
-        <StatusIndicator.Root actions={CENTER_STATUS_ACTIONS} className={inputFeedback.bubble.base}>
-          <PlayIcon className={cn(inputFeedback.bubble.icon, inputFeedback.bubble.shownPlay)} />
-          <PauseIcon className={cn(inputFeedback.bubble.icon, inputFeedback.bubble.shownPause)} />
-        </StatusIndicator.Root>
-      </div>
-    </Container>
-  );
-}
diff --git a/packages/react/src/presets/video/skin.tsx b/packages/react/src/presets/video/skin.tsx
index e9ecce41..ddd2489d 100644
--- a/packages/react/src/presets/video/skin.tsx
+++ b/packages/react/src/presets/video/skin.tsx
@@ -1,531 +1,2 @@
-import { isString } from '@videojs/utils/predicate';
-import { cn } from '@videojs/utils/style';
-import { type ComponentProps, forwardRef, type ReactNode } from 'react';
-import {
-  AirPlayEnterIcon,
-  AirPlayExitIcon,
-  CaptionsOffIcon,
-  CaptionsOnIcon,
-  CastEnterIcon,
-  CastExitIcon,
-  CheckIcon,
-  ChevronIcon,
-  FullscreenEnterIcon,
-  FullscreenExitIcon,
-  GearIcon,
-  PauseIcon,
-  PipEnterIcon,
-  PipExitIcon,
-  PlayIcon,
-  RestartIcon,
-  SeekIcon,
-  SpeedIcon,
-  SpinnerIcon,
-  SwitchesIcon,
-  VolumeHighIcon,
-  VolumeLowIcon,
-  VolumeOffIcon,
-} from '@/icons';
-import { Container, usePlayer } from '@/player/context';
-import { AirPlayButton } from '@/ui/airplay-button';
-import { BufferingIndicator } from '@/ui/buffering-indicator';
-import { useCaptionsOptions } from '@/ui/captions-radio-group';
-import { CastButton } from '@/ui/cast-button';
-import { Controls } from '@/ui/controls';
-import { ErrorDialog } from '@/ui/error-dialog';
-import { FullscreenButton } from '@/ui/fullscreen-button';
-import { Gesture } from '@/ui/gesture';
-import { Hotkey } from '@/ui/hotkey';
-import { Menu } from '@/ui/menu';
-import { MuteButton } from '@/ui/mute-button';
-import { Overlay } from '@/ui/overlay';
-import { PiPButton } from '@/ui/pip-button';
-import { PlayButton } from '@/ui/play-button';
-import { usePlaybackRateOptions } from '@/ui/playback-rate';
-import { Popover } from '@/ui/popover';
-import { Poster } from '@/ui/poster';
-import { useQualityOptions } from '@/ui/quality';
-import { SeekButton } from '@/ui/seek-button';
-import { SeekIndicator } from '@/ui/seek-indicator';
-import { Slider } from '@/ui/slider';
-import { StatusAnnouncer } from '@/ui/status-announcer';
-import { StatusIndicator } from '@/ui/status-indicator';
-import { Time } from '@/ui/time';
-import { TimeSlider } from '@/ui/time-slider';
-import { Tooltip } from '@/ui/tooltip';
-import { VolumeIndicator } from '@/ui/volume-indicator';
-import { VolumeSlider } from '@/ui/volume-slider';
-import { isRenderProp } from '@/utils/use-render';
-import type { BaseVideoSkinProps } from '../types';
-
-const SEEK_TIME = 10;
-const TOP_STATUS_ACTIONS = ['toggleSubtitles', 'toggleFullscreen', 'togglePictureInPicture'] as const;
-const CENTER_STATUS_ACTIONS = ['togglePaused'] as const;
-
-export type VideoSkinProps = BaseVideoSkinProps;
-
-const Button = forwardRef<HTMLButtonElement, ComponentProps<'button'>>(function Button({ className, ...props }, ref) {
-  return (
-    <button
-      ref={ref}
-      type="button"
-      className={cn('media-button media-button--subtle media-button--icon', className)}
-      {...props}
-    />
-  );
-});
-
-function VolumePopover(): ReactNode {
-  const volumeUnsupported = usePlayer((s) => s.volumeAvailability === 'unsupported');
-
-  const muteButton = (
-    <MuteButton className="media-button--mute" render={<Button />}>
-      <VolumeOffIcon className="media-icon media-icon--volume-off" />
-      <VolumeLowIcon className="media-icon media-icon--volume-low" />
-      <VolumeHighIcon className="media-icon media-icon--volume-high" />
-    </MuteButton>
-  );
-
-  if (volumeUnsupported) return muteButton;
-
-  return (
-    <Popover.Root openOnHover delay={200} closeDelay={100} side="top">
-      <Popover.Trigger render={muteButton} />
-      <Popover.Popup className="media-surface media-popover media-popover--volume">
-        <VolumeSlider.Root className="media-slider" orientation="vertical" thumbAlignment="edge">
-          <VolumeSlider.Track className="media-slider__track">
-            <VolumeSlider.Fill className="media-slider__fill" />
-          </VolumeSlider.Track>
-          <VolumeSlider.Thumb className="media-slider__thumb media-slider__thumb--persistent" />
-        </VolumeSlider.Root>
-      </Popover.Popup>
-    </Popover.Root>
-  );
-}
-
-function MenuChevron({ flipped = false }: { flipped?: boolean }): ReactNode {
-  return <ChevronIcon className={cn('media-icon media-menu__chevron', flipped ? 'media-icon--flipped' : undefined)} />;
-}
-
-function SettingsMenu(): ReactNode {
-  const playbackRate = usePlaybackRateOptions();
-  const quality = useQualityOptions();
-  const captions = useCaptionsOptions();
-  const hasPlaybackRate = playbackRate?.state.availability === 'available';
-  const hasQuality = quality?.state.availability === 'available';
-  const hasCaptions = captions?.state.availability === 'available';
-
-  if (!hasPlaybackRate && !hasQuality && !hasCaptions) return null;
-
-  return (
-    <Menu.Root side="top" align="center">
-      <Menu.Trigger aria-label="Settings" className="media-button--settings" render={<Button />}>
-        <GearIcon className="media-icon media-icon--settings" />
-      </Menu.Trigger>
-      <Menu.Content className="media-surface media-popover media-menu media-menu--settings">
-        <Menu.View className="media-menu__panel">
-          <div className="media-menu__group">
-            {hasQuality && quality ? (
-              <Menu.Root>
-                <Menu.Trigger
-                  type="quality"
-                  className="media-menu__item media-menu__item--submenu"
-                  render={(props) => (
-                    <div {...props}>
-                      <SwitchesIcon className="media-icon" />
-                      <span>Quality</span>
-                      <span className="media-menu__hint">
-                        <Menu.ItemValue className="media-menu__hint-label" />
-                        <MenuChevron />
-                      </span>
-                    </div>
-                  )}
-                />
-                <Menu.Content className="media-menu__panel">
-                  <Menu.Back className="media-menu__back">
-                    <MenuChevron flipped />
-                    Quality
-                  </Menu.Back>
-                  <Menu.Separator className="media-menu__separator" />
-                  <Menu.RadioGroup
-                    className="media-menu__group"
-                    value={quality.value}
-                    onValueChange={quality.setValue}
-                    aria-label="Quality"
-                  >
-                    {quality.options.map((option) => (
-                      <Menu.RadioItem
-                        key={option.value}
-                        className="media-menu__item"
-                        value={option.value}
-                        disabled={option.disabled}
-                      >
-                        <span>
-                          {option.label}
-                          {option.tier ? <sup className="media-menu__tier">{option.tier}</sup> : null}
-                        </span>
-                        {option.badge ? <span className="media-badge">{option.badge}</span> : null}
-                        <Menu.ItemIndicator
-                          checked={option.value === quality.value}
-                          forceMount
-                          className="media-menu__indicator"
-                        >
-                          <CheckIcon className="media-icon" />
-                        </Menu.ItemIndicator>
-                      </Menu.RadioItem>
-                    ))}
-                  </Menu.RadioGroup>
-                </Menu.Content>
-              </Menu.Root>
-            ) : null}
-            {hasPlaybackRate && playbackRate ? (
-              <Menu.Root>
-                <Menu.Trigger
-                  type="playback-rate"
-                  className="media-menu__item media-menu__item--submenu"
-                  render={(props) => (
-                    <div {...props}>
-                      <SpeedIcon className="media-icon" />
-                      <span>Speed</span>
-                      <span className="media-menu__hint">
-                        <Menu.ItemValue className="media-menu__hint-label" />
-                        <MenuChevron />
-                      </span>
-                    </div>
-                  )}
-                />
-                <Menu.Content className="media-menu__panel">
-                  <Menu.Back className="media-menu__back">
-                    <MenuChevron flipped />
-                    Speed
-                  </Menu.Back>
-                  <Menu.Separator className="media-menu__separator" />
-                  <Menu.RadioGroup
-                    className="media-menu__group"
-                    value={playbackRate.value}
-                    onValueChange={playbackRate.setValue}
-                    aria-label="Playback rate"
-                  >
-                    {playbackRate.options.map((option) => (
-                      <Menu.RadioItem
-                        key={option.value}
-                        className="media-menu__item"
-                        value={option.value}
-                        disabled={option.disabled}
-                      >
-                        <span>{option.label}</span>
-                        <Menu.ItemIndicator
-                          checked={option.value === playbackRate.value}
-                          forceMount
-                          className="media-menu__indicator"
-                        >
-                          <CheckIcon className="media-icon" />
-                        </Menu.ItemIndicator>
-                      </Menu.RadioItem>
-                    ))}
-                  </Menu.RadioGroup>
-                </Menu.Content>
-              </Menu.Root>
-            ) : null}
-            {hasCaptions && captions ? (
-              <Menu.Root>
-                <Menu.Trigger
-                  type="captions"
-                  className="media-menu__item media-menu__item--submenu"
-                  render={(props) => (
-                    <div {...props}>
-                      <CaptionsOffIcon className="media-icon" />
-                      <span>Captions</span>
-                      <span className="media-menu__hint">
-                        <Menu.ItemValue className="media-menu__hint-label" />
-                        <MenuChevron />
-                      </span>
-                    </div>
-                  )}
-                />
-                <Menu.Content className="media-menu__panel">
-                  <Menu.Back className="media-menu__back">
-                    <MenuChevron flipped />
-                    Captions
-                  </Menu.Back>
-                  <Menu.Separator className="media-menu__separator" />
-                  <Menu.RadioGroup
-                    className="media-menu__group"
-                    value={captions.value}
-                    onValueChange={captions.setValue}
-                    aria-label="Captions"
-                  >
-                    {captions.options.map((option) => (
-                      <Menu.RadioItem
-                        key={option.value}
-                        className="media-menu__item"
-                        value={option.value}
-                        disabled={option.disabled}
-                      >
-                        <span>{option.label}</span>
-                        <Menu.ItemIndicator
-                          checked={option.value === captions.value}
-                          forceMount
-                          className="media-menu__indicator"
-                        >
-                          <CheckIcon className="media-icon" />
-                        </Menu.ItemIndicator>
-                      </Menu.RadioItem>
-                    ))}
-                  </Menu.RadioGroup>
-                </Menu.Content>
-              </Menu.Root>
-            ) : null}
-          </div>
-        </Menu.View>
-      </Menu.Content>
-    </Menu.Root>
-  );
-}
-
-export function VideoSkin(props: VideoSkinProps): ReactNode {
-  const { children, className, poster, ...rest } = props;
-
-  return (
-    <Container className={cn('media-default-skin media-default-skin--video', className)} {...rest}>
-      {children}
-
-      {poster && (
-        <Poster src={isString(poster) ? poster : undefined} render={isRenderProp(poster) ? poster : undefined} />
-      )}
-
-      <BufferingIndicator
-        render={(props) => (
-          <div {...props} className="media-buffering-indicator">
-            <div className="media-surface">
-              <SpinnerIcon className="media-icon" />
-            </div>
-          </div>
-        )}
-      />
-
-      <ErrorDialog.Root>
-        <ErrorDialog.Popup className="media-error">
-          <div className="media-error__dialog media-surface">
-            <div className="media-error__content">
-              <ErrorDialog.Title className="media-error__title">Something went wrong.</ErrorDialog.Title>
-              <ErrorDialog.Description className="media-error__description" />
-            </div>
-            <div className="media-error__actions">
-              <ErrorDialog.Close className="media-button media-button--primary">OK</ErrorDialog.Close>
-            </div>
-          </div>
-        </ErrorDialog.Popup>
-      </ErrorDialog.Root>
-
-      <Controls.Root className="media-surface media-controls">
-        <Tooltip.Provider>
-          <div className="media-button-group">
-            <Tooltip.Root side="top">
-              <Tooltip.Trigger
-                render={
-                  <PlayButton className="media-button--play" render={<Button />}>
-                    <RestartIcon className="media-icon media-icon--restart" />
-                    <PlayIcon className="media-icon media-icon--play" />
-                    <PauseIcon className="media-icon media-icon--pause" />
-                  </PlayButton>
-                }
-              />
-              <Tooltip.Popup className="media-surface media-tooltip">
-                <Tooltip.Label />
-                <Tooltip.Shortcut className="media-tooltip__kbd" />
-              </Tooltip.Popup>
-            </Tooltip.Root>
-
-            <Tooltip.Root side="top">
-              <Tooltip.Trigger
-                render={
-                  <SeekButton seconds={-SEEK_TIME} className="media-button--seek" render={<Button />}>
-                    <span className="media-icon__container">
-                      <SeekIcon className="media-icon media-icon--seek media-icon--flipped" />
-                      <span className="media-icon__label">{SEEK_TIME}</span>
-                    </span>
-                  </SeekButton>
-                }
-              />
-              <Tooltip.Popup className="media-surface media-tooltip">
-                <Tooltip.Label />
-                <Tooltip.Shortcut className="media-tooltip__kbd" />
-              </Tooltip.Popup>
-            </Tooltip.Root>
-
-            <Tooltip.Root side="top">
-              <Tooltip.Trigger
-                render={
-                  <SeekButton seconds={SEEK_TIME} className="media-button--seek" render={<Button />}>
-                    <span className="media-icon__container">
-                      <SeekIcon className="media-icon media-icon--seek" />
-                      <span className="media-icon__label">{SEEK_TIME}</span>
-                    </span>
-                  </SeekButton>
-                }
-              />
-              <Tooltip.Popup className="media-surface media-tooltip">
-                <Tooltip.Label />
-                <Tooltip.Shortcut className="media-tooltip__kbd" />
-              </Tooltip.Popup>
-            </Tooltip.Root>
-          </div>
-
-          <div className="media-time-controls">
-            <Time.Value type="current" className="media-time" />
-            <TimeSlider.Root className="media-slider">
-              <TimeSlider.Track className="media-slider__track">
-                <TimeSlider.Fill className="media-slider__fill" />
-                <TimeSlider.Buffer className="media-slider__buffer" />
-              </TimeSlider.Track>
-              <TimeSlider.Thumb className="media-slider__thumb" />
-
-              <div className="media-surface media-thumbnail media-slider__thumbnail">
-                <Slider.Thumbnail className="media-thumbnail__image" />
-                <TimeSlider.Value type="pointer" className="media-time media-thumbnail__time" />
-                <SpinnerIcon className="media-thumbnail__spinner media-icon" />
-              </div>
-              <TimeSlider.Preview className="media-slider__preview">
-                <TimeSlider.Value type="pointer" className="media-time media-slider__value" />
-              </TimeSlider.Preview>
-            </TimeSlider.Root>
-            <Time.Value type="duration" className="media-time" />
-          </div>
-
-          <div className="media-button-group">
-            <VolumePopover />
-
-            <SettingsMenu />
-
-            <Tooltip.Root side="top">
-              <Tooltip.Trigger
-                render={
-                  <CastButton className="media-button--cast" render={<Button />}>
-                    <CastEnterIcon className="media-icon media-icon--cast-enter" />
-                    <CastExitIcon className="media-icon media-icon--cast-exit" />
-                  </CastButton>
-                }
-              />
-              <Tooltip.Popup className="media-surface media-tooltip">
-                <Tooltip.Label />
-                <Tooltip.Shortcut className="media-tooltip__kbd" />
-              </Tooltip.Popup>
-            </Tooltip.Root>
-
-            <Tooltip.Root side="top">
-              <Tooltip.Trigger
-                render={
-                  <AirPlayButton className="media-button--airplay" render={<Button />}>
-                    <AirPlayEnterIcon className="media-icon media-icon--airplay-enter" />
-                    <AirPlayExitIcon className="media-icon media-icon--airplay-exit" />
-                  </AirPlayButton>
-                }
-              />
-              <Tooltip.Popup className="media-surface media-tooltip">
-                <Tooltip.Label />
-                <Tooltip.Shortcut className="media-tooltip__kbd" />
-              </Tooltip.Popup>
-            </Tooltip.Root>
-
-            <Tooltip.Root side="top">
-              <Tooltip.Trigger
-                render={
-                  <PiPButton className="media-button--pip" render={<Button />}>
-                    <PipEnterIcon className="media-icon media-icon--pip-enter" />
-                    <PipExitIcon className="media-icon media-icon--pip-exit" />
-                  </PiPButton>
-                }
-              />
-              <Tooltip.Popup className="media-surface media-tooltip">
-                <Tooltip.Label />
-                <Tooltip.Shortcut className="media-tooltip__kbd" />
-              </Tooltip.Popup>
-            </Tooltip.Root>
-
-            <Tooltip.Root side="top">
-              <Tooltip.Trigger
-                render={
-                  <FullscreenButton className="media-button--fullscreen" render={<Button />}>
-                    <FullscreenEnterIcon className="media-icon media-icon--fullscreen-enter" />
-                    <FullscreenExitIcon className="media-icon media-icon--fullscreen-exit" />
-                  </FullscreenButton>
-                }
-              />
-              <Tooltip.Popup className="media-surface media-tooltip">
-                <Tooltip.Label />
-                <Tooltip.Shortcut className="media-tooltip__kbd" />
-              </Tooltip.Popup>
-            </Tooltip.Root>
-          </div>
-        </Tooltip.Provider>
-      </Controls.Root>
-
-      <Overlay className="media-overlay" />
-
-      {/* Hotkeys */}
-      <Hotkey keys="Space" action="togglePaused" />
-      <Hotkey keys="k" action="togglePaused" />
-      <Hotkey keys="m" action="toggleMuted" />
-      <Hotkey keys="f" action="toggleFullscreen" />
-      <Hotkey keys="c" action="toggleSubtitles" />
-      <Hotkey keys="i" action="togglePictureInPicture" />
-      <Hotkey keys="ArrowRight" action="seekStep" value={SEEK_TIME / 2} />
-      <Hotkey keys="ArrowLeft" action="seekStep" value={-(SEEK_TIME / 2)} />
-      <Hotkey keys="l" action="seekStep" value={SEEK_TIME} />
-      <Hotkey keys="j" action="seekStep" value={-SEEK_TIME} />
-      <Hotkey keys="ArrowUp" action="volumeStep" value={0.05} />
-      <Hotkey keys="ArrowDown" action="volumeStep" value={-0.05} />
-      <Hotkey keys="0-9" action="seekToPercent" />
-      <Hotkey keys="Home" action="seekToPercent" value={0} />
-      <Hotkey keys="End" action="seekToPercent" value={100} />
-      <Hotkey keys=">" action="speedUp" />
-      <Hotkey keys="<" action="speedDown" />
-
-      {/* Gestures */}
-      <Gesture type="tap" action="togglePaused" pointer="mouse" region="center" />
-      <Gesture type="tap" action="toggleControls" pointer="touch" />
-      <Gesture type="doubletap" action="seekStep" value={-SEEK_TIME} region="left" />
-      <Gesture type="doubletap" action="toggleFullscreen" region="center" />
-      <Gesture type="doubletap" action="seekStep" value={SEEK_TIME} region="right" />
-
-      {/* Input Feedback */}
-      <StatusAnnouncer />
-      <div className="media-input-feedback">
-        <VolumeIndicator.Root className="media-surface media-input-feedback-island media-input-feedback-island--volume">
-          <VolumeIndicator.Fill className="media-input-feedback-island__content">
-            <VolumeHighIcon className="media-icon media-icon--volume-high" />
-            <VolumeLowIcon className="media-icon media-icon--volume-low" />
-            <VolumeOffIcon className="media-icon media-icon--volume-off" />
-            <VolumeIndicator.Value className="media-input-feedback-island__value" />
-          </VolumeIndicator.Fill>
-        </VolumeIndicator.Root>
-
-        <StatusIndicator.Root
-          actions={TOP_STATUS_ACTIONS}
-          className="media-surface media-input-feedback-island media-input-feedback-island--status"
-        >
-          <div className="media-input-feedback-island__content">
-            <CaptionsOnIcon className="media-icon media-icon--captions-on" />
-            <CaptionsOffIcon className="media-icon media-icon--captions-off" />
-            <FullscreenEnterIcon className="media-icon media-icon--fullscreen-enter" />
-            <FullscreenExitIcon className="media-icon media-icon--fullscreen-exit" />
-            <PipEnterIcon className="media-icon media-icon--pip-enter" />
-            <PipExitIcon className="media-icon media-icon--pip-exit" />
-            <StatusIndicator.Value className="media-input-feedback-island__value" />
-          </div>
-        </StatusIndicator.Root>
-
-        <SeekIndicator.Root className="media-input-feedback-bubble">
-          <ChevronIcon className="media-icon media-icon--seek" />
-          <SeekIndicator.Value className="media-time" />
-        </SeekIndicator.Root>
-
-        <StatusIndicator.Root actions={CENTER_STATUS_ACTIONS} className="media-input-feedback-bubble">
-          <PlayIcon className="media-icon media-icon--play" />
-          <PauseIcon className="media-icon media-icon--pause" />
-        </StatusIndicator.Root>
-      </div>
-    </Container>
-  );
-}
+export type { DefaultVideoSkinProps as VideoSkinProps } from './__generated__/default-video.css.js';
+export { DefaultVideoSkin as VideoSkin } from './__generated__/default-video.css.js';
diff --git a/packages/skins/src/default/tailwind/audio.tailwind.ts b/packages/skins/src/default/tailwind/audio.tailwind.ts
index 6193823d..c99d384d 100644
--- a/packages/skins/src/default/tailwind/audio.tailwind.ts
+++ b/packages/skins/src/default/tailwind/audio.tailwind.ts
@@ -3,9 +3,10 @@ import { bufferingIndicator as baseBufferingIndicator } from './components/buffe
 import { container as baseContainer } from './components/container';
 import { controls as baseControls } from './components/controls';
 import { error as baseError } from './components/error';
-import { popup as basePopup } from './components/popup';
+import { popover as basePopover, volumePopover as baseVolumePopover } from './components/popover';
 import { slider as baseSlider } from './components/slider';
 import { surface } from './components/surface';
+import { tooltip as baseTooltip, tooltipShortcut as baseTooltipShortcut } from './components/tooltip';
 
 /* ===========================================================================
    Container
@@ -64,9 +65,21 @@ export const slider = {
    ========================================================================== */
 
 export const popup = {
-  ...basePopup,
-  popover: cn(surface, basePopup.popover),
-  tooltip: cn(surface, basePopup.tooltip),
+  popover: cn(surface, basePopover),
+  tooltip: cn(surface, baseTooltip),
+};
+
+export const popover = {
+  root: popup.popover,
+};
+
+export const tooltip = {
+  root: popup.tooltip,
+  shortcut: baseTooltipShortcut,
+};
+
+export const volumePopover = {
+  root: baseVolumePopover,
 };
 
 /* ===========================================================================
@@ -114,6 +127,7 @@ export {
 export { badge } from './components/badge';
 export { button } from './components/button';
 export { buttonGroup } from './components/button-group';
+export * as icons from './components/icon';
 export { icon, iconContainer, iconFlipped, iconHidden } from './components/icon';
 export { menu } from './components/menu';
 export { playbackRate } from './components/playback-rate';
diff --git a/packages/skins/src/default/tailwind/components/button-group.ts b/packages/skins/src/default/tailwind/components/button-group.ts
index 143d2b02..f53d55ce 100644
--- a/packages/skins/src/default/tailwind/components/button-group.ts
+++ b/packages/skins/src/default/tailwind/components/button-group.ts
@@ -1,3 +1,3 @@
 import { cn } from '@videojs/utils/style';
 
-export const buttonGroup = cn('flex items-center gap-[0.075rem]', '@2xl/media-root:gap-0.5');
+export const buttonGroup = cn('flex items-center gap-[0.075rem]', '@2xl/media-container:gap-0.5');
diff --git a/packages/skins/src/default/tailwind/components/container.ts b/packages/skins/src/default/tailwind/components/container.ts
index 396cbd86..40e1dbfc 100644
--- a/packages/skins/src/default/tailwind/components/container.ts
+++ b/packages/skins/src/default/tailwind/components/container.ts
@@ -4,17 +4,12 @@ import { reset } from './reset';
 export const container = cn(
   reset,
   // Layout & containment
-  'block relative isolate h-full w-full @container/media-root',
+  'block relative isolate h-full w-full @container/media-container',
   // Appearance
   'rounded-(--media-border-radius,2rem)',
   'font-[Inter_Variable,Inter,ui-sans-serif,system-ui,sans-serif] text-[0.8125rem] leading-normal subpixel-antialiased',
   // Focus ring
   'outline-2 outline-transparent -outline-offset-4',
   'transition-[outline-offset,outline-color] duration-100 ease-out',
-  'focus-visible:outline-current focus-visible:outline-offset-2',
-  // Shadow color variables (derived from currentColor lightness)
-  '[--media-current-shadow-color:oklch(from_currentColor_0_0_0/clamp(0,calc((l-0.5)*0.5),0.15))]',
-  '[--media-current-shadow-color-subtle:oklch(from_var(--media-current-shadow-color)_l_c_h/calc(alpha*0.4))]',
-  // Icon sizing
-  '[--media-icon-size:18px]'
+  'focus-visible:outline-current focus-visible:outline-offset-2'
 );
diff --git a/packages/skins/src/default/tailwind/components/icon.ts b/packages/skins/src/default/tailwind/components/icon.ts
index 8fc1b33e..c425ee97 100644
--- a/packages/skins/src/default/tailwind/components/icon.ts
+++ b/packages/skins/src/default/tailwind/components/icon.ts
@@ -1,4 +1,13 @@
 import { cn } from '@videojs/utils/style';
+import {
+  airplayIcon as baseAirplayIcon,
+  captionsIcon as baseCaptionsIcon,
+  castIcon as baseCastIcon,
+  fullscreenIcon as baseFullscreenIcon,
+  muteIcon as baseMuteIcon,
+  pipIcon as basePipIcon,
+  playIcon as basePlayIcon,
+} from '../../../shared/tailwind/icon-state';
 
 export const icon = cn(
   'block [grid-area:1/1] size-(--media-icon-size) shrink-0',
@@ -9,3 +18,40 @@ export const icon = cn(
 export const iconHidden = 'hidden opacity-0';
 export const iconFlipped = '[scale:-1_1]';
 export const iconContainer = 'relative grid';
+
+export const root = icon;
+export const hidden = iconHidden;
+export const flipped = iconFlipped;
+export const container = iconContainer;
+
+export const playButtonState = basePlayIcon.button;
+export const restartIcon = basePlayIcon.restart;
+export const playIcon = basePlayIcon.play;
+export const pauseIcon = basePlayIcon.pause;
+
+export const muteButtonState = baseMuteIcon.button;
+export const volumeOffIcon = baseMuteIcon.volumeOff;
+export const volumeLowIcon = baseMuteIcon.volumeLow;
+export const volumeHighIcon = baseMuteIcon.volumeHigh;
+
+export const castButtonState = baseCastIcon.button;
+export const castEnterIcon = baseCastIcon.enter;
+export const castExitIcon = baseCastIcon.exit;
+
+export const airplayButtonState = baseAirplayIcon.button;
+export const airplayEnterIcon = baseAirplayIcon.enter;
+export const airplayExitIcon = baseAirplayIcon.exit;
+
+export const pipButtonState = basePipIcon.button;
+export const pipEnterIcon = basePipIcon.off;
+export const pipExitIcon = basePipIcon.on;
+
+export const fullscreenButtonState = baseFullscreenIcon.button;
+export const fullscreenEnterIcon = baseFullscreenIcon.enter;
+export const fullscreenExitIcon = baseFullscreenIcon.exit;
+
+export const captionsButtonState = baseCaptionsIcon.button;
+export const captionsOffIcon = baseCaptionsIcon.off;
+export const captionsOnIcon = baseCaptionsIcon.on;
+
+export const seekBackwardIcon = iconFlipped;
diff --git a/packages/skins/src/default/tailwind/components/indicators.ts b/packages/skins/src/default/tailwind/components/indicators.ts
new file mode 100644
index 00000000..fa1ee9cd
--- /dev/null
+++ b/packages/skins/src/default/tailwind/components/indicators.ts
@@ -0,0 +1,166 @@
+import { cn } from '@videojs/utils/style';
+
+const feedbackColor = '[color:var(--media-color-primary,oklch(1_0_0))]';
+const islandRoot = cn('absolute left-1/2 top-3 -translate-x-1/2 pointer-events-none', feedbackColor);
+const islandContent = cn(
+  'flex justify-between items-center gap-2 px-2.5 py-1',
+  // Increase contrast of content via blend mode
+  '**:mix-blend-difference'
+);
+const islandBase = cn(
+  // Surface override (darker than default)
+  '[--media-surface-background-color:oklch(0_0_0/0.25)]',
+  // Layout
+  'absolute top-3 rounded-full origin-top pointer-events-none',
+  'text-inherit font-medium',
+  // Transition
+  'duration-100 ease-out',
+  'data-starting-style:opacity-0',
+  'data-ending-style:opacity-0',
+  'data-starting-style:duration-250',
+  'data-starting-style:ease-in',
+  'data-ending-style:duration-250',
+  'data-ending-style:ease-in',
+  'pointer-coarse:will-change-[scale,translate,opacity]',
+  'pointer-coarse:transition-[scale,translate,opacity]',
+  'pointer-fine:motion-safe:will-change-[scale,translate,filter,opacity]',
+  'pointer-fine:motion-safe:transition-[scale,translate,filter,opacity]',
+  'pointer-fine:motion-safe:data-starting-style:blur-sm',
+  'pointer-fine:motion-safe:data-starting-style:scale-90',
+  'pointer-fine:motion-safe:data-ending-style:blur-sm',
+  'pointer-fine:motion-safe:data-ending-style:scale-90',
+  'motion-safe:data-ending-style:-translate-y-1/4',
+  // Reduced transparency / high contrast: solid surface background
+  '[@media(prefers-reduced-transparency:reduce)]:[--media-surface-background-color:oklch(0_0_0)]',
+  'contrast-more:[--media-surface-background-color:oklch(0_0_0)]'
+);
+
+const bubbleRoot = cn(
+  'absolute pointer-events-none',
+  'top-[calc(50%-1.75rem)] -translate-y-1/2',
+  '@2xl/media-container:top-1/2',
+  feedbackColor
+);
+const bubbleBase = cn(
+  // Default placement - center column for status bubbles and undirected seeks
+  'col-start-2 row-start-1',
+  'flex flex-col items-center justify-center p-4',
+  'transition-opacity duration-250 ease-out',
+  'data-starting-style:opacity-0',
+  'data-ending-style:opacity-0',
+  'data-starting-style:duration-200',
+  'data-starting-style:ease-in',
+  'data-ending-style:duration-200',
+  'data-ending-style:ease-in',
+  '@2xl/media-container:p-8',
+  'not-data-direction:[transition-property:opacity,scale]',
+  'not-data-direction:duration-600',
+  'not-data-direction:[transition-timing-function:ease-out,linear(0,0.12_1.5%,1.35_9.7%,2.2_13.9%,3_19.9%,2.7_21.8%,0.62_37.5%,0.96_50.9%,1)]',
+  'motion-reduce:not-data-direction:transition-opacity',
+  'motion-reduce:not-data-direction:duration-100',
+  'motion-reduce:not-data-direction:ease-out',
+  'not-data-direction:data-starting-style:scale-80',
+  'not-data-direction:data-ending-style:scale-80',
+  'not-data-direction:data-starting-style:duration-200',
+  'not-data-direction:data-starting-style:ease-in',
+  'not-data-direction:data-ending-style:duration-200',
+  'not-data-direction:data-ending-style:ease-in',
+  // Direction placement
+  'data-[direction=backward]:col-start-1 data-[direction=backward]:justify-self-start',
+  'data-[direction=forward]:col-start-3 data-[direction=forward]:justify-self-end'
+);
+
+/**
+ * NOTE: tailwind.css is required to support the `@property --media-progress-fill` registration and animation keyframes. You should import from either:
+ * - "@videojs/html/tailwind.css" for HTML skins
+ * - "@videojs/react/tailwind.css" for React skins
+ */
+export const volumeIndicator = cn(
+  islandRoot,
+  'group/volume-indicator',
+  islandBase,
+  'w-[min(80%,12rem)]',
+  '*:[--media-progress-fill:var(--media-volume-fill)]',
+  '*:rounded-[inherit]',
+  '*:[background-image:linear-gradient(to_right,currentColor_0%,currentColor_var(--media-progress-fill),transparent_var(--media-progress-fill),transparent_100%)]',
+  '*:[transition:--media-progress-fill_200ms_linear]',
+  'data-open:duration-100',
+  // Boundary shake (keyframes must be registered and media-shake added to @theme - see note at top)
+  'data-min:animate-media-shake',
+  'data-max:animate-media-shake',
+  'motion-reduce:data-min:animate-none',
+  'motion-reduce:data-max:animate-none'
+);
+
+export const statusIndicatorTop = cn(
+  islandRoot,
+  'group/status-indicator-top',
+  islandBase,
+  islandContent,
+  'data-open:duration-100'
+);
+
+export const seekIndicator = cn(
+  bubbleRoot,
+  'not-data-direction:left-1/2 not-data-direction:-translate-x-1/2',
+  'data-[direction=backward]:left-0',
+  'data-[direction=forward]:right-0',
+  'group/seek-indicator',
+  bubbleBase
+);
+
+export const statusIndicatorCenter = cn(
+  bubbleRoot,
+  'left-1/2 -translate-x-1/2',
+  'group/status-indicator-center',
+  bubbleBase
+);
+
+export const indicatorContent = cn(islandContent, 'w-full');
+export const indicatorValue = 'ml-auto';
+
+export const volumeIndicatorIcon = cn('hidden shrink-0');
+export const volumeIndicatorHighIcon = 'group-data-[level=high]/volume-indicator:block';
+export const volumeIndicatorLowIcon = 'group-data-[level=low]/volume-indicator:block';
+export const volumeIndicatorOffIcon = 'group-data-[level=off]/volume-indicator:block';
+
+export const statusIndicatorTopIcon = cn('hidden shrink-0');
+export const statusIndicatorCaptionsOnIcon = 'group-data-[status=captions-on]/status-indicator-top:block';
+export const statusIndicatorCaptionsOffIcon = 'group-data-[status=captions-off]/status-indicator-top:block';
+export const statusIndicatorFullscreenEnterIcon = cn(
+  'group-data-[status=fullscreen]/status-indicator-top:block',
+  'motion-safe:group-not-data-starting-style/status-indicator-top:group-data-[status=fullscreen]/status-indicator-top:animate-media-pop-in'
+);
+export const statusIndicatorFullscreenExitIcon = cn(
+  'group-data-[status=exit-fullscreen]/status-indicator-top:block',
+  'motion-safe:group-not-data-starting-style/status-indicator-top:group-data-[status=exit-fullscreen]/status-indicator-top:animate-media-pop-in'
+);
+export const statusIndicatorPipEnterIcon = cn(
+  'group-data-[status=pip]/status-indicator-top:block',
+  'motion-safe:group-not-data-starting-style/status-indicator-top:group-data-[status=pip]/status-indicator-top:animate-media-pop-in'
+);
+export const statusIndicatorPipExitIcon = cn(
+  'group-data-[status=exit-pip]/status-indicator-top:block',
+  'motion-safe:group-not-data-starting-style/status-indicator-top:group-data-[status=exit-pip]/status-indicator-top:animate-media-pop-in'
+);
+
+export const seekIndicatorIcon = cn(
+  'hidden w-9 h-9',
+  'group-data-direction/seek-indicator:block',
+  'group-data-[direction=backward]/seek-indicator:-scale-x-100',
+  // Slide animation (keyframes registered in companion CSS)
+  'group-not-data-starting-style/seek-indicator:group-data-[direction=forward]/seek-indicator:animate-media-slide-in-forward',
+  'group-not-data-starting-style/seek-indicator:group-data-[direction=backward]/seek-indicator:animate-media-slide-in-backward',
+  'motion-reduce:group-data-direction/seek-indicator:animate-none'
+);
+export const seekIndicatorValue = 'tabular-nums';
+
+export const statusIndicatorCenterIcon = 'hidden w-9 h-9';
+export const statusIndicatorPauseIcon = cn(
+  'group-data-[status=pause]/status-indicator-center:block',
+  'motion-safe:group-not-data-starting-style/status-indicator-center:group-data-[status=pause]/status-indicator-center:animate-media-pop-in'
+);
+export const statusIndicatorPlayIcon = cn(
+  'group-data-[status=play]/status-indicator-center:block',
+  'motion-safe:group-not-data-starting-style/status-indicator-center:group-data-[status=play]/status-indicator-center:animate-media-pop-in'
+);
diff --git a/packages/skins/src/default/tailwind/components/input-feedback.ts b/packages/skins/src/default/tailwind/components/input-feedback.ts
deleted file mode 100644
index ba411718..00000000
--- a/packages/skins/src/default/tailwind/components/input-feedback.ts
+++ /dev/null
@@ -1,168 +0,0 @@
-import { cn } from '@videojs/utils/style';
-
-const feedbackColor = '[color:var(--media-color-primary,oklch(1_0_0))]';
-const islandContent = cn(
-  'flex justify-between items-center gap-2 px-2.5 py-1',
-  // Increase contrast of content via blend mode
-  '**:mix-blend-difference'
-);
-
-/**
- * NOTE: tailwind.css is required to support the `@property --media-progress-fill` registration and animation keyframes. You should import from either:
- * - "@videojs/html/tailwind.css" for HTML skins
- * - "@videojs/react/tailwind.css" for React skins
- */
-export const inputFeedback = {
-  root: cn(
-    // Layout
-    'absolute inset-x-0 top-0 bottom-14 pointer-events-none',
-    'grid grid-cols-3 items-center justify-items-center',
-    // Shift to full extent in larger containers
-    '@2xl/media-root:bottom-0',
-    // Color
-    feedbackColor
-  ),
-
-  island: {
-    root: cn('absolute left-1/2 top-3 -translate-x-1/2 pointer-events-none', feedbackColor),
-    base: cn(
-      'group/input-indicator',
-      // Surface override (darker than default)
-      '[--media-surface-background-color:oklch(0_0_0/0.25)]',
-      // Layout
-      'absolute top-3 rounded-full origin-top pointer-events-none',
-      'text-inherit font-medium',
-      // Transition
-      'duration-100 ease-out',
-      'data-starting-style:opacity-0',
-      'data-ending-style:opacity-0',
-      'data-starting-style:duration-250',
-      'data-starting-style:ease-in',
-      'data-ending-style:duration-250',
-      'data-ending-style:ease-in',
-      'pointer-coarse:will-change-[scale,translate,opacity]',
-      'pointer-coarse:transition-[scale,translate,opacity]',
-      'pointer-fine:motion-safe:will-change-[scale,translate,filter,opacity]',
-      'pointer-fine:motion-safe:transition-[scale,translate,filter,opacity]',
-      'pointer-fine:motion-safe:data-starting-style:blur-sm',
-      'pointer-fine:motion-safe:data-starting-style:scale-90',
-      'pointer-fine:motion-safe:data-ending-style:blur-sm',
-      'pointer-fine:motion-safe:data-ending-style:scale-90',
-      'motion-safe:data-ending-style:-translate-y-1/4',
-      // Reduced transparency / high contrast: solid surface background
-      '[@media(prefers-reduced-transparency:reduce)]:[--media-surface-background-color:oklch(0_0_0)]',
-      'contrast-more:[--media-surface-background-color:oklch(0_0_0)]'
-    ),
-    content: cn(islandContent, 'w-full'),
-    statusContent: islandContent,
-    // Volume island sizing + progress-fill gradient on the content child
-    volume: cn(
-      'w-[min(80%,12rem)]',
-      '*:[--media-progress-fill:var(--media-volume-fill)]',
-      '*:rounded-[inherit]',
-      '*:[background-image:linear-gradient(to_right,currentColor_0%,currentColor_var(--media-progress-fill),transparent_var(--media-progress-fill),transparent_100%)]',
-      '*:[transition:--media-progress-fill_200ms_linear]'
-    ),
-    // Shown state - applied on the active item itself
-    shownVolume: cn(
-      'data-open:duration-100',
-      // Boundary shake (keyframes must be registered and media-shake added to @theme - see note at top)
-      'data-min:animate-media-shake',
-      'data-max:animate-media-shake',
-      'motion-reduce:data-min:animate-none',
-      'motion-reduce:data-max:animate-none'
-    ),
-    shownStatus: cn('data-open:duration-100'),
-    // Icon inside island - hidden by default; specific icons opt in via shown* below.
-    icon: cn('hidden shrink-0'),
-    // Volume level -> which icon shows
-    shownVolumeHigh: 'group-data-[level=high]/input-indicator:block',
-    shownVolumeLow: 'group-data-[level=low]/input-indicator:block',
-    shownVolumeOff: 'group-data-[level=off]/input-indicator:block',
-    // Captions state -> which icon shows
-    shownCaptionsOn: 'group-data-[status=captions-on]/input-indicator:block',
-    shownCaptionsOff: 'group-data-[status=captions-off]/input-indicator:block',
-    shownFullscreenEnter: cn(
-      'group-data-[status=fullscreen]/input-indicator:block',
-      'motion-safe:group-not-data-starting-style/input-indicator:group-data-[status=fullscreen]/input-indicator:animate-media-pop-in'
-    ),
-    shownFullscreenExit: cn(
-      'group-data-[status=exit-fullscreen]/input-indicator:block',
-      'motion-safe:group-not-data-starting-style/input-indicator:group-data-[status=exit-fullscreen]/input-indicator:animate-media-pop-in'
-    ),
-    shownPipEnter: cn(
-      'group-data-[status=pip]/input-indicator:block',
-      'motion-safe:group-not-data-starting-style/input-indicator:group-data-[status=pip]/input-indicator:animate-media-pop-in'
-    ),
-    shownPipExit: cn(
-      'group-data-[status=exit-pip]/input-indicator:block',
-      'motion-safe:group-not-data-starting-style/input-indicator:group-data-[status=exit-pip]/input-indicator:animate-media-pop-in'
-    ),
-    value: 'ml-auto',
-  },
-
-  bubble: {
-    root: cn(
-      'absolute pointer-events-none',
-      'top-[calc(50%-1.75rem)] -translate-y-1/2',
-      '@2xl/media-root:top-1/2',
-      feedbackColor
-    ),
-    seekRoot: cn(
-      'not-data-direction:left-1/2 not-data-direction:-translate-x-1/2',
-      'data-[direction=backward]:left-0',
-      'data-[direction=forward]:right-0'
-    ),
-    centerRoot: 'left-1/2 -translate-x-1/2',
-    base: cn(
-      'group/input-indicator',
-      // Default placement - center column for status bubbles and undirected seeks
-      'col-start-2 row-start-1',
-      'flex flex-col items-center justify-center p-4',
-      'transition-opacity duration-250 ease-out',
-      'data-starting-style:opacity-0',
-      'data-ending-style:opacity-0',
-      'data-starting-style:duration-200',
-      'data-starting-style:ease-in',
-      'data-ending-style:duration-200',
-      'data-ending-style:ease-in',
-      '@2xl/media-root:p-8',
-      'not-data-direction:[transition-property:opacity,scale]',
-      'not-data-direction:duration-600',
-      'not-data-direction:[transition-timing-function:ease-out,linear(0,0.12_1.5%,1.35_9.7%,2.2_13.9%,3_19.9%,2.7_21.8%,0.62_37.5%,0.96_50.9%,1)]',
-      'motion-reduce:not-data-direction:transition-opacity',
-      'motion-reduce:not-data-direction:duration-100',
-      'motion-reduce:not-data-direction:ease-out',
-      'not-data-direction:data-starting-style:scale-80',
-      'not-data-direction:data-ending-style:scale-80',
-      'not-data-direction:data-starting-style:duration-200',
-      'not-data-direction:data-starting-style:ease-in',
-      'not-data-direction:data-ending-style:duration-200',
-      'not-data-direction:data-ending-style:ease-in',
-      // Direction placement
-      'data-[direction=backward]:col-start-1 data-[direction=backward]:justify-self-start',
-      'data-[direction=forward]:col-start-3 data-[direction=forward]:justify-self-end'
-    ),
-    // Icons in the bubble
-    icon: 'hidden w-9 h-9',
-    // Seek icon: shown for seekStep + seekToPercent; flipped for backward; slides in on active
-    shownSeek: cn(
-      'group-data-direction/input-indicator:block',
-      'group-data-[direction=backward]/input-indicator:-scale-x-100',
-      // Slide animation (keyframes registered in companion CSS)
-      'group-not-data-starting-style/input-indicator:group-data-[direction=forward]/input-indicator:animate-media-slide-in-forward',
-      'group-not-data-starting-style/input-indicator:group-data-[direction=backward]/input-indicator:animate-media-slide-in-backward',
-      'motion-reduce:group-data-direction/input-indicator:animate-none'
-    ),
-    // togglePaused: pause icon when paused, play icon when playing
-    shownPause: cn(
-      'group-data-[status=pause]/input-indicator:block',
-      'motion-safe:group-not-data-starting-style/input-indicator:group-data-[status=pause]/input-indicator:animate-media-pop-in'
-    ),
-    shownPlay: cn(
-      'group-data-[status=play]/input-indicator:block',
-      'motion-safe:group-not-data-starting-style/input-indicator:group-data-[status=play]/input-indicator:animate-media-pop-in'
-    ),
-    time: 'tabular-nums',
-  },
-};
diff --git a/packages/skins/src/default/tailwind/components/menu.ts b/packages/skins/src/default/tailwind/components/menu.ts
index d97fd960..5fed2939 100644
--- a/packages/skins/src/default/tailwind/components/menu.ts
+++ b/packages/skins/src/default/tailwind/components/menu.ts
@@ -1,6 +1,6 @@
 import { cn } from '@videojs/utils/style';
 
-import { popup } from './popup';
+import { popover } from './popover';
 
 const panelBase = cn(
   'absolute inset-0 overflow-auto overscroll-none p-1 outline-none translate-none',
@@ -42,9 +42,12 @@ const menuTokens = cn(
   'motion-reduce:[--menu-transition-duration:0ms]'
 );
 
+const offsets = '[--media-popover-side-offset:0.5rem] [--media-popover-boundary-offset:0.5rem]';
+
 const menuHostShell = cn(
-  popup.popover,
+  popover,
   menuTokens,
+  offsets,
   'max-w-(--media-popover-available-width,none) max-h-[min(var(--media-popover-available-height,var(--menu-max-height)),var(--menu-max-height))]',
   'box-border rounded-xl p-1 overscroll-none'
 );
diff --git a/packages/skins/src/default/tailwind/components/popup.ts b/packages/skins/src/default/tailwind/components/popover.ts
similarity index 57%
rename from packages/skins/src/default/tailwind/components/popup.ts
rename to packages/skins/src/default/tailwind/components/popover.ts
index 8df675ef..8a5bc58e 100644
--- a/packages/skins/src/default/tailwind/components/popup.ts
+++ b/packages/skins/src/default/tailwind/components/popover.ts
@@ -13,29 +13,17 @@ const base = cn(
   // Ensure we animate from the correct origin based on the side the popover is on
   'data-[side=top]:origin-bottom data-[side=bottom]:origin-top data-[side=left]:origin-right data-[side=right]:origin-left',
   // Safe area between trigger and popup
-  'before:absolute before:pointer-events-[inherit]',
+  'before:absolute before:[pointer-events:inherit]',
   'data-[side=top]:before:left-0 data-[side=top]:before:right-0 data-[side=top]:before:top-full',
   'data-[side=bottom]:before:left-0 data-[side=bottom]:before:right-0 data-[side=bottom]:before:bottom-full',
   'data-[side=left]:before:top-0 data-[side=left]:before:bottom-0 data-[side=left]:before:left-full',
   'data-[side=right]:before:top-0 data-[side=right]:before:bottom-0 data-[side=right]:before:right-full'
 );
 
-export const popup = {
-  popover: cn(
-    base,
-    'data-[side=top]:before:h-(--media-popover-side-offset) data-[side=bottom]:before:h-(--media-popover-side-offset)',
-    'data-[side=left]:before:w-(--media-popover-side-offset) data-[side=right]:before:w-(--media-popover-side-offset)'
-  ),
-  tooltip: cn(
-    base,
-    'py-1 px-2.5 rounded-full text-[0.75rem] whitespace-nowrap',
-    /* Flex only while open - unconditional `flex` overrides UA `[popover]` `display:none`. */
-    'data-[open]:flex data-[open]:items-center data-[open]:gap-1',
-    'data-[side=top]:before:h-(--media-tooltip-side-offset) data-[side=bottom]:before:h-(--media-tooltip-side-offset)',
-    'data-[side=left]:before:w-(--media-tooltip-side-offset) data-[side=right]:before:w-(--media-tooltip-side-offset)'
-  ),
-  volume: 'py-3 px-0 rounded-full',
-  tooltipShortcut: cn(
-    'min-w-[1.5em] p-[0.1em] bg-current/30 text-[90%] font-semibold font-[inherit] leading-[1.25] text-center rounded'
-  ),
-};
+export const popover = cn(
+  base,
+  'data-[side=top]:before:h-(--media-popover-side-offset) data-[side=bottom]:before:h-(--media-popover-side-offset)',
+  'data-[side=left]:before:w-(--media-popover-side-offset) data-[side=right]:before:w-(--media-popover-side-offset)'
+);
+
+export const volumePopover = 'py-3 px-0 rounded-full';
diff --git a/packages/skins/src/default/tailwind/components/slider.ts b/packages/skins/src/default/tailwind/components/slider.ts
index 40fb2109..d22df867 100644
--- a/packages/skins/src/default/tailwind/components/slider.ts
+++ b/packages/skins/src/default/tailwind/components/slider.ts
@@ -1,86 +1,103 @@
 import { cn } from '@videojs/utils/style';
 
+export const root = cn(
+  'group/slider relative flex flex-1 items-center justify-center rounded-full outline-none cursor-pointer',
+  // Horizontal
+  'data-[orientation=horizontal]:min-w-20 data-[orientation=horizontal]:w-full data-[orientation=horizontal]:h-8',
+  // Vertical
+  'data-[orientation=vertical]:w-8 data-[orientation=vertical]:h-20'
+);
+
+export const track = cn(
+  'relative isolate overflow-hidden rounded-[inherit] select-none',
+  // Horizontal
+  'data-[orientation=horizontal]:w-full data-[orientation=horizontal]:h-1',
+  // Vertical
+  'data-[orientation=vertical]:w-1 data-[orientation=vertical]:h-full'
+);
+
+export const fillBase = 'absolute rounded-[inherit] pointer-events-none';
+
+export const fill = cn(
+  'bg-current',
+  // Horizontal
+  'data-[orientation=horizontal]:inset-y-0 data-[orientation=horizontal]:left-0',
+  'data-[orientation=horizontal]:w-(--media-slider-fill)',
+  'group-data-dragging/slider:data-[orientation=horizontal]:w-(--media-slider-pointer)',
+  // Vertical
+  'data-[orientation=vertical]:inset-x-0 data-[orientation=vertical]:bottom-0',
+  'data-[orientation=vertical]:h-(--media-slider-fill)',
+  'group-data-dragging/slider:data-[orientation=vertical]:h-(--media-slider-pointer)'
+);
+
+export const buffer = cn(
+  'bg-current/20 duration-250 ease-out',
+  // Horizontal
+  'data-[orientation=horizontal]:inset-y-0 data-[orientation=horizontal]:left-0',
+  'data-[orientation=horizontal]:transition-[width] data-[orientation=horizontal]:w-(--media-slider-buffer)',
+  // Vertical
+  'data-[orientation=vertical]:inset-x-0 data-[orientation=vertical]:bottom-0',
+  'data-[orientation=vertical]:transition-[height] data-[orientation=vertical]:h-(--media-slider-buffer)'
+);
+
+export const thumbBase = cn(
+  'z-10 absolute -translate-x-1/2 -translate-y-1/2',
+  'bg-current rounded-full',
+  'shadow-[0_0_0_1px_var(--media-current-shadow-color,oklch(0_0_0/0.1)),0_1px_3px_0_oklch(0_0_0/0.35),0_1px_2px_-1px_oklch(0_0_0/0.35)]',
+  'transition-[opacity,height,width,outline-offset] duration-150 ease-out select-none',
+  'outline-4 outline-transparent -outline-offset-4',
+  'hover:outline-current/15 hover:outline-offset-0',
+  'focus-visible:outline-current/15 focus-visible:outline-offset-0',
+  // Focus ring via ::after (matches default slider.css)
+  'after:absolute after:-inset-1 after:rounded-[inherit]',
+  'after:shadow-[0_0_0_2px_currentColor] after:pointer-events-none',
+  'after:transition-[opacity,scale] after:duration-150 after:ease-out',
+  'after:opacity-0 after:scale-50',
+  'focus-visible:after:opacity-100 focus-visible:after:scale-100',
+  // Horizontal
+  'data-[orientation=horizontal]:top-1/2 data-[orientation=horizontal]:left-(--media-slider-fill)',
+  'group-data-dragging/slider:data-[orientation=horizontal]:left-(--media-slider-pointer)',
+  // Vertical
+  'data-[orientation=vertical]:left-1/2 data-[orientation=vertical]:top-[calc(100%-var(--media-slider-fill))]',
+  'group-data-dragging/slider:data-[orientation=vertical]:top-[calc(100%-var(--media-slider-pointer))]'
+);
+
+export const thumb = cn(
+  'size-2.5',
+  'opacity-0 focus-visible:opacity-100 group-hover/slider:opacity-100',
+  'group-active/slider:size-3'
+);
+
+export const thumbPersistent = 'size-3';
+
+export const preview = cn(
+  'group/preview',
+  'before:block before:min-w-1 before:h-1 before:bg-current before:rounded-full before:opacity-0 before:scale-50',
+  'before:shadow-[0_0_0_1px_var(--media-current-shadow-color,oklch(0_0_0/0.15)),0_1px_2px_0_oklch(0_0_0/0.35)]',
+  'before:transition-[opacity,scale] before:duration-200 before:ease-out',
+  'data-pointing:not-data-dragging:before:opacity-100 data-pointing:not-data-dragging:before:scale-100',
+  'peer-has-[[role=img]:not([data-hidden])]/thumbnail:*:hidden'
+);
+
+export const value = cn(
+  'absolute bottom-9 tabular-nums',
+  '-translate-x-1/2 translate-y-2 scale-50 opacity-0 blur-lg',
+  'text-shadow-2xs text-shadow-(color:--media-current-shadow-color)',
+  'transition-[filter,opacity,scale,translate] duration-200 ease-out',
+  'group-data-pointing/preview:translate-y-0 group-data-pointing/preview:scale-100',
+  'group-data-pointing/preview:opacity-100 group-data-pointing/preview:blur-none'
+);
+
+/** Compatibility namespace for the existing aggregate token imports. */
 export const slider = {
-  root: cn(
-    'group/slider relative flex flex-1 items-center justify-center rounded-full outline-none cursor-pointer',
-    // Horizontal
-    'data-[orientation=horizontal]:min-w-20 data-[orientation=horizontal]:w-full data-[orientation=horizontal]:h-8',
-    // Vertical
-    'data-[orientation=vertical]:w-8 data-[orientation=vertical]:h-20'
-  ),
-  track: cn(
-    'relative isolate overflow-hidden rounded-[inherit] select-none',
-    // Horizontal
-    'data-[orientation=horizontal]:w-full data-[orientation=horizontal]:h-1',
-    // Vertical
-    'data-[orientation=vertical]:w-1 data-[orientation=vertical]:h-full'
-  ),
-  fill: {
-    base: 'absolute rounded-[inherit] pointer-events-none',
-    fill: cn(
-      'bg-current',
-      // Horizontal
-      'data-[orientation=horizontal]:inset-y-0 data-[orientation=horizontal]:left-0',
-      'data-[orientation=horizontal]:w-(--media-slider-fill)',
-      'group-data-dragging/slider:data-[orientation=horizontal]:w-(--media-slider-pointer)',
-      // Vertical
-      'data-[orientation=vertical]:inset-x-0 data-[orientation=vertical]:bottom-0',
-      'data-[orientation=vertical]:h-(--media-slider-fill)',
-      'group-data-dragging/slider:data-[orientation=vertical]:h-(--media-slider-pointer)'
-    ),
-    buffer: cn(
-      'bg-current/20 duration-250 ease-out',
-      // Horizontal
-      'data-[orientation=horizontal]:inset-y-0 data-[orientation=horizontal]:left-0',
-      'data-[orientation=horizontal]:transition-[width] data-[orientation=horizontal]:w-(--media-slider-buffer)',
-      // Vertical
-      'data-[orientation=vertical]:inset-x-0 data-[orientation=vertical]:bottom-0',
-      'data-[orientation=vertical]:transition-[height] data-[orientation=vertical]:h-(--media-slider-buffer)'
-    ),
-  },
-  thumb: {
-    base: cn(
-      'z-10 absolute -translate-x-1/2 -translate-y-1/2',
-      'bg-current rounded-full',
-      'shadow-[0_0_0_1px_var(--media-current-shadow-color,oklch(0_0_0/0.1)),0_1px_3px_0_oklch(0_0_0/0.35),0_1px_2px_-1px_oklch(0_0_0/0.35)]',
-      'transition-[opacity,height,width,outline-offset] duration-150 ease-out select-none',
-      'outline-4 outline-transparent -outline-offset-4',
-      'hover:outline-current/15 hover:outline-offset-0',
-      'focus-visible:outline-current/15 focus-visible:outline-offset-0',
-      // Focus ring via ::after (matches default slider.css)
-      'after:absolute after:-inset-1 after:rounded-[inherit]',
-      'after:shadow-[0_0_0_2px_currentColor] after:pointer-events-none',
-      'after:transition-[opacity,scale] after:duration-150 after:ease-out',
-      'after:opacity-0 after:scale-50',
-      'focus-visible:after:opacity-100 focus-visible:after:scale-100',
-      // Horizontal
-      'data-[orientation=horizontal]:top-1/2 data-[orientation=horizontal]:left-(--media-slider-fill)',
-      'group-data-dragging/slider:data-[orientation=horizontal]:left-(--media-slider-pointer)',
-      // Vertical
-      'data-[orientation=vertical]:left-1/2 data-[orientation=vertical]:top-[calc(100%-var(--media-slider-fill))]',
-      'group-data-dragging/slider:data-[orientation=vertical]:top-[calc(100%-var(--media-slider-pointer))]'
-    ),
-    persistent: 'size-3',
-    interactive: cn(
-      'size-2.5',
-      'opacity-0 focus-visible:opacity-100 group-hover/slider:opacity-100',
-      'group-active/slider:size-3'
-    ),
-  },
-  preview: cn(
-    'group/preview',
-    'before:block before:min-w-1 before:h-1 before:bg-current before:rounded-full before:opacity-0 before:scale-50',
-    'before:shadow-[0_0_0_1px_var(--media-current-shadow-color,oklch(0_0_0/0.15)),0_1px_2px_0_oklch(0_0_0/0.35)]',
-    'before:transition-[opacity,scale] before:duration-200 before:ease-out',
-    'data-pointing:not-data-dragging:before:opacity-100 data-pointing:not-data-dragging:before:scale-100',
-    'peer-has-[[role=img]:not([data-hidden])]/thumbnail:*:hidden'
-  ),
-  value: cn(
-    'absolute bottom-9 tabular-nums',
-    '-translate-x-1/2 translate-y-2 scale-50 opacity-0 blur-lg',
-    'text-shadow-2xs text-shadow-(color:--media-current-shadow-color)',
-    'transition-[filter,opacity,scale,translate] duration-200 ease-out',
-    'group-data-pointing/preview:translate-y-0 group-data-pointing/preview:scale-100',
-    'group-data-pointing/preview:opacity-100 group-data-pointing/preview:blur-none'
-  ),
+  root,
+  track,
+  fillBase,
+  fill,
+  buffer,
+  thumbBase,
+  thumb,
+  thumbPersistent,
+  preview,
+  value,
 };
diff --git a/packages/skins/src/default/tailwind/components/tooltip.ts b/packages/skins/src/default/tailwind/components/tooltip.ts
new file mode 100644
index 00000000..3ce10f2d
--- /dev/null
+++ b/packages/skins/src/default/tailwind/components/tooltip.ts
@@ -0,0 +1,34 @@
+import { cn } from '@videojs/utils/style';
+
+const base = cn(
+  // Reset default popover styles
+  'm-0 border-0 text-inherit overflow-visible',
+  // Animation
+  'transition-[scale,opacity,filter_var(--popup-transition-property,)]',
+  'duration-[var(--media-popup-transition-duration),var(--media-popup-transition-duration),var(--media-popup-transition-duration)_var(--popup-transition-duration,)]',
+  'ease-(--media-popup-transition-timing-function)',
+  'data-starting-style:opacity-0 data-starting-style:scale-50 data-starting-style:blur-sm',
+  'data-ending-style:opacity-0 data-ending-style:scale-50 data-ending-style:blur-sm',
+  'data-ending-style:duration-[max(0ms,calc(var(--media-popup-transition-duration)-50ms))]',
+  // Ensure we animate from the correct origin based on the side the popover is on
+  'data-[side=top]:origin-bottom data-[side=bottom]:origin-top data-[side=left]:origin-right data-[side=right]:origin-left',
+  // Safe area between trigger and popup
+  'before:absolute before:[pointer-events:inherit]',
+  'data-[side=top]:before:left-0 data-[side=top]:before:right-0 data-[side=top]:before:top-full',
+  'data-[side=bottom]:before:left-0 data-[side=bottom]:before:right-0 data-[side=bottom]:before:bottom-full',
+  'data-[side=left]:before:top-0 data-[side=left]:before:bottom-0 data-[side=left]:before:left-full',
+  'data-[side=right]:before:top-0 data-[side=right]:before:bottom-0 data-[side=right]:before:right-full'
+);
+
+export const tooltip = cn(
+  base,
+  'py-1 px-2.5 rounded-full text-[0.75rem] whitespace-nowrap',
+  /* Flex only while open - unconditional `flex` overrides UA `[popover]` `display:none`. */
+  'data-[open]:flex data-[open]:items-center data-[open]:gap-1',
+  'data-[side=top]:before:h-(--media-tooltip-side-offset) data-[side=bottom]:before:h-(--media-tooltip-side-offset)',
+  'data-[side=left]:before:w-(--media-tooltip-side-offset) data-[side=right]:before:w-(--media-tooltip-side-offset)'
+);
+
+export const tooltipShortcut = cn(
+  'min-w-[1.5em] p-[0.1em] bg-current/30 text-[90%] font-semibold font-[inherit] leading-[1.25] text-center rounded'
+);
diff --git a/packages/skins/src/default/tailwind/video.tailwind.ts b/packages/skins/src/default/tailwind/video.tailwind.ts
index 25617115..54be3048 100644
--- a/packages/skins/src/default/tailwind/video.tailwind.ts
+++ b/packages/skins/src/default/tailwind/video.tailwind.ts
@@ -1,228 +1 @@
-import { cn } from '@videojs/utils/style';
-import { bufferingIndicator as baseBufferingIndicator } from './components/buffering';
-import { buttonGroup as baseButtonGroup } from './components/button-group';
-import { container as baseContainer } from './components/container';
-import { controls as baseControls } from './components/controls';
-import { error as baseError } from './components/error';
-import { inputFeedback as baseInputFeedback } from './components/input-feedback';
-import { menu as baseMenu } from './components/menu';
-import { popup as basePopup } from './components/popup';
-import { slider as baseSlider } from './components/slider';
-import { surface } from './components/surface';
-import { thumbnail as baseThumbnail } from './components/thumbnail';
-import { time as baseTime } from './components/time';
-
-/* ===========================================================================
-   Container
-   ========================================================================== */
-
-export const container = cn(
-  baseContainer,
-  'bg-black overflow-clip',
-  // Inner border ring
-  'after:absolute after:pointer-events-none after:rounded-[inherit] after:z-10',
-  'after:inset-0 after:ring-1 after:ring-inset after:ring-black/10 dark:after:ring-white/15',
-  // Video element
-  '[&_video]:block [&_video]:w-full [&_video]:h-full [&_video]:rounded-[inherit] [&_video]:[object-fit:var(--media-object-fit,contain)] [&_video]:[object-position:var(--media-object-position,center)]',
-  '[--media-spring-timing-function:linear(0,0.034_1.5%,0.763_9.7%,1.066_13.9%,1.198_19.9%,1.184_21.8%,0.963_37.5%,0.997_50.9%,1)]',
-  '[--media-video-border-radius:var(--media-border-radius,2rem)]',
-  '[--media-controls-transition-duration:100ms]',
-  '[--media-controls-transition-timing-function:ease-out]',
-  '[--media-error-dialog-transition-duration:350ms]',
-  '[--media-error-dialog-transition-delay:100ms]',
-  '[--media-error-dialog-transition-timing-function:var(--media-spring-timing-function)]',
-  '[--media-popup-transition-duration:100ms]',
-  '[--media-popup-transition-timing-function:ease-out]',
-  '[--media-surface-background-color:oklch(1_0_0/0.1)]',
-  '[--media-surface-inner-border-color:oklch(1_0_0/0.05)]',
-  '[--media-surface-outer-border-color:oklch(0_0_0/0.1)]',
-  '[--media-surface-shadow-color:oklch(0_0_0/0.15)]',
-  '[--media-surface-backdrop-filter:blur(16px)_saturate(1.5)]',
-  'motion-reduce:[--media-error-dialog-transition-duration:50ms]',
-  'motion-reduce:[--media-error-dialog-transition-delay:0ms]',
-  'motion-reduce:[--media-error-dialog-transition-timing-function:ease-out]',
-  '[--media-tooltip-side-offset:0.75rem]',
-  '[--media-tooltip-boundary-offset:0.5rem]',
-  '[--media-popover-side-offset:0.5rem]',
-  '[--media-popover-boundary-offset:0.5rem]',
-  'motion-reduce:[--media-popup-transition-duration:0ms]',
-  '[@media(prefers-reduced-transparency:reduce)]:[--media-surface-background-color:oklch(0_0_0)]',
-  'contrast-more:[--media-surface-background-color:oklch(0_0_0)]',
-  '[@media(prefers-reduced-transparency:reduce)]:[--media-surface-inner-border-color:oklch(1_0_0/0.25)]',
-  'contrast-more:[--media-surface-inner-border-color:oklch(1_0_0/0.25)]',
-  '[@media(prefers-reduced-transparency:reduce)]:[--media-surface-outer-border-color:transparent]',
-  'contrast-more:[--media-surface-outer-border-color:transparent]',
-  'pointer-fine:has-[[data-controls]:not([data-visible])]:[--media-controls-transition-duration:300ms]',
-  'pointer-coarse:has-[[data-controls]:not([data-visible])]:[--media-controls-transition-duration:150ms]',
-  'motion-reduce:has-[[data-controls]:not([data-visible])]:[--media-controls-transition-duration:50ms]',
-  // Caption track CSS variables (consumed by the native caption bridge in light DOM)
-  '[--media-caption-track-y:-0.5rem]',
-  '[--media-caption-track-delay:25ms]',
-  '[--media-caption-track-duration:var(--media-controls-transition-duration)]',
-  'has-[[data-controls][data-visible]]:[--media-caption-track-y:-5.5rem]',
-  '@2xl/media-root:has-[[data-controls][data-visible]]:*:[--media-caption-track-y:-3.5rem]',
-  // Native caption track container
-  '[&_video::-webkit-media-text-track-container]:transition-[translate]',
-  '[&_video::-webkit-media-text-track-container]:duration-(--media-caption-track-duration)',
-  '[&_video::-webkit-media-text-track-container]:ease-out',
-  '[&_video::-webkit-media-text-track-container]:delay-(--media-caption-track-delay)',
-  '[&_video::-webkit-media-text-track-container]:translate-y-(--media-caption-track-y)',
-  '[&_video::-webkit-media-text-track-container]:scale-98',
-  '[&_video::-webkit-media-text-track-container]:z-1',
-  '[&_video::-webkit-media-text-track-container]:font-[inherit]',
-  // Fullscreen
-  '[&:fullscreen]:[--media-border-radius:0]',
-  '[&:fullscreen_video]:object-contain'
-);
-
-/* ===========================================================================
-   Controls (hide/show behavior)
-   ========================================================================== */
-
-export const controls = cn(
-  baseControls,
-  surface,
-  // Position & wrapping layout (small)
-  'absolute bottom-2 inset-x-2 flex-wrap',
-  '[color:var(--media-color-primary,oklch(1_0_0))] z-10',
-  'peer-data-open/error:hidden',
-  'ease-(--media-controls-transition-timing-function) origin-bottom',
-  'duration-(--media-controls-transition-duration)',
-  'pointer-fine:will-change-[scale,filter,opacity]',
-  'pointer-fine:transition-[scale,filter,opacity]',
-  'pointer-coarse:will-change-[scale,opacity]',
-  'pointer-coarse:transition-[scale,opacity]',
-  // Hidden state
-  'not-data-visible:pointer-events-none not-data-visible:opacity-0',
-  'motion-safe:not-data-visible:scale-90',
-  'pointer-fine:motion-safe:not-data-visible:blur-sm',
-  // Single-row layout (large)
-  '@2xl/media-root:bottom-3 @2xl/media-root:inset-x-3 @2xl/media-root:flex-nowrap @2xl/media-root:gap-x-0.5 @2xl/media-root:p-1'
-);
-
-/* ===========================================================================
-   Button groups
-   ========================================================================== */
-
-export const buttonGroupStart = cn(baseButtonGroup, 'flex-1 @2xl/media-root:flex-none');
-export const buttonGroupEnd = cn(baseButtonGroup, 'flex-1 justify-end @2xl/media-root:flex-none');
-
-/* ===========================================================================
-   Time
-   ========================================================================== */
-
-export const time = {
-  ...baseTime,
-  group: cn(
-    baseTime.group,
-    'grow-0 shrink-0 basis-full order-[-1] px-2.5',
-    '@2xl/media-root:grow @2xl/media-root:shrink @2xl/media-root:basis-0 @2xl/media-root:order-[unset]'
-  ),
-};
-
-/* ===========================================================================
-   Thumbnail (with video surface)
-   ========================================================================== */
-
-export const thumbnail = {
-  ...baseThumbnail,
-  root: cn(
-    baseThumbnail.root,
-    surface,
-    '[--media-slider-thumbnail-max-width:11rem] [--media-slider-thumbnail-padding:-1.125rem] [--media-slider-thumbnail-inset:calc((100cqi-100%)/2)]',
-    'absolute [left:clamp(calc(var(--media-slider-thumbnail-max-width)/2+var(--media-slider-thumbnail-padding)-var(--media-slider-thumbnail-inset)),var(--media-slider-pointer),calc(100%-var(--media-slider-thumbnail-max-width)/2-var(--media-slider-thumbnail-padding)+var(--media-slider-thumbnail-inset)))] bottom-[calc(100%+1.2rem)] -translate-x-1/2',
-    'opacity-0 scale-80 blur-sm origin-bottom',
-    'transition-[scale,opacity,filter] duration-150',
-    'has-[[role=img]:not([data-hidden])]:group-data-pointing/slider:opacity-100',
-    'has-[[role=img]:not([data-hidden])]:group-data-pointing/slider:scale-100',
-    'has-[[role=img]:not([data-hidden])]:group-data-pointing/slider:blur-none',
-    'has-[[role=img][data-loading]]:max-h-24'
-  ),
-  image: cn(baseThumbnail.image, 'max-w-(--media-slider-thumbnail-max-width)'),
-};
-
-/* ===========================================================================
-   Sliders
-   ========================================================================== */
-
-export const slider = {
-  ...baseSlider,
-  track: cn(baseSlider.track, 'bg-white/20 ring-1 ring-black/5'),
-};
-
-/* ===========================================================================
-   Popup (with video surface)
-   ========================================================================== */
-
-export const popup = {
-  ...basePopup,
-  popover: cn(surface, basePopup.popover),
-  tooltip: cn(surface, basePopup.tooltip),
-};
-
-/* ===========================================================================
-   Menu
-   ========================================================================== */
-
-const menuOffsets = '[--media-popover-side-offset:0.5rem] [--media-popover-boundary-offset:0.5rem]';
-
-export const menu = {
-  ...baseMenu,
-  root: cn(baseMenu.root, menuOffsets),
-  settings: cn(baseMenu.settings, menuOffsets),
-};
-
-/* ===========================================================================
-   Buffering (with video surface)
-   ========================================================================== */
-
-export const bufferingIndicator = {
-  ...baseBufferingIndicator,
-  root: cn(baseBufferingIndicator.root, surface),
-};
-
-/* ===========================================================================
-   Error (with video surface)
-   ========================================================================== */
-
-export const error = {
-  ...baseError,
-  popup: cn(baseError.popup, surface, 'text-shadow-2xs text-shadow-black/25'),
-  dialog: cn(baseError.dialog, surface, 'text-shadow-2xs text-shadow-black/25'),
-  content: cn(baseError.content, 'text-shadow-inherit'),
-  title: cn(baseError.title, 'text-base'),
-};
-
-/* ===========================================================================
-   Input Feedback (islands use video surface)
-   ========================================================================== */
-
-export const inputFeedback = {
-  ...baseInputFeedback,
-  island: {
-    ...baseInputFeedback.island,
-    base: cn(baseInputFeedback.island.base, surface),
-  },
-};
-
-/* ===========================================================================
-   Shared components (no overrides)
-   ========================================================================== */
-
-export {
-  airplayIcon,
-  captionsIcon,
-  castIcon,
-  fullscreenIcon,
-  muteIcon,
-  pipIcon,
-  playIcon,
-} from '../../shared/tailwind/icon-state';
-export { badge } from './components/badge';
-export { button } from './components/button';
-export { buttonGroup } from './components/button-group';
-export { icon, iconContainer, iconFlipped, iconHidden } from './components/icon';
-export { overlay } from './components/overlay';
-export { playbackRate } from './components/playback-rate';
-export { poster } from './components/poster';
-export { seek } from './components/seek';
+export * from './video/index';
diff --git a/packages/skins/src/default/tailwind/video/base.ts b/packages/skins/src/default/tailwind/video/base.ts
new file mode 100644
index 00000000..d40bb0fc
--- /dev/null
+++ b/packages/skins/src/default/tailwind/video/base.ts
@@ -0,0 +1,47 @@
+import { cn } from '@videojs/utils/style';
+import { container as baseContainer } from '../components/container';
+import { controls as baseControls } from '../components/controls';
+import { surface } from '../components/surface';
+
+export const container = cn(
+  baseContainer,
+  'bg-black overflow-clip',
+  // Inner border ring
+  'after:absolute after:pointer-events-none after:rounded-[inherit] after:z-10',
+  'after:inset-0 after:ring-1 after:ring-inset after:ring-black/10 dark:after:ring-white/15',
+  // Video element
+  '[&_video]:block [&_video]:w-full [&_video]:h-full [&_video]:rounded-[inherit] [&_video]:[object-fit:var(--media-object-fit,contain)] [&_video]:[object-position:var(--media-object-position,center)]',
+  // Native caption track container
+  '[&_video::-webkit-media-text-track-container]:transition-[translate]',
+  '[&_video::-webkit-media-text-track-container]:duration-(--media-caption-track-duration)',
+  '[&_video::-webkit-media-text-track-container]:ease-out',
+  '[&_video::-webkit-media-text-track-container]:delay-(--media-caption-track-delay)',
+  '[&_video::-webkit-media-text-track-container]:translate-y-(--media-caption-track-y)',
+  '[&_video::-webkit-media-text-track-container]:scale-98',
+  '[&_video::-webkit-media-text-track-container]:z-1',
+  '[&_video::-webkit-media-text-track-container]:font-[inherit]',
+  // Fullscreen
+  '[&:fullscreen]:[--media-border-radius:0]',
+  '[&:fullscreen_video]:object-contain'
+);
+
+export const controls = cn(
+  baseControls,
+  surface,
+  // Position & wrapping layout (small)
+  'absolute bottom-2 inset-x-2 flex-wrap',
+  '[color:var(--media-color-primary,oklch(1_0_0))] z-10',
+  'peer-data-open/error:hidden',
+  'ease-(--media-controls-transition-timing-function) origin-bottom',
+  'duration-(--media-controls-transition-duration)',
+  'pointer-fine:will-change-[scale,filter,opacity]',
+  'pointer-fine:transition-[scale,filter,opacity]',
+  'pointer-coarse:will-change-[scale,opacity]',
+  'pointer-coarse:transition-[scale,opacity]',
+  // Hidden state
+  'not-data-visible:pointer-events-none not-data-visible:opacity-0',
+  'motion-safe:not-data-visible:scale-90',
+  'pointer-fine:motion-safe:not-data-visible:blur-sm',
+  // Single-row layout (large)
+  '@2xl/media-container:bottom-3 @2xl/media-container:inset-x-3 @2xl/media-container:flex-nowrap @2xl/media-container:gap-x-0.5 @2xl/media-container:p-1'
+);
diff --git a/packages/skins/src/default/tailwind/video/buffering.ts b/packages/skins/src/default/tailwind/video/buffering.ts
new file mode 100644
index 00000000..8cbc8a82
--- /dev/null
+++ b/packages/skins/src/default/tailwind/video/buffering.ts
@@ -0,0 +1,5 @@
+import { cn } from '@videojs/utils/style';
+import { bufferingIndicator as baseBufferingIndicator } from '../components/buffering';
+import { surface } from '../components/surface';
+
+export const root = cn(baseBufferingIndicator.root, surface);
diff --git a/packages/skins/src/default/tailwind/video/controls-group.ts b/packages/skins/src/default/tailwind/video/controls-group.ts
new file mode 100644
index 00000000..c207f3fd
--- /dev/null
+++ b/packages/skins/src/default/tailwind/video/controls-group.ts
@@ -0,0 +1,5 @@
+import { cn } from '@videojs/utils/style';
+import { buttonGroup as baseButtonGroup } from '../components/button-group';
+
+export const start = cn(baseButtonGroup, 'flex-1 @2xl/media-container:flex-none');
+export const end = cn(baseButtonGroup, 'flex-1 justify-end @2xl/media-container:flex-none');
diff --git a/packages/skins/src/default/tailwind/video/error.ts b/packages/skins/src/default/tailwind/video/error.ts
new file mode 100644
index 00000000..f359c131
--- /dev/null
+++ b/packages/skins/src/default/tailwind/video/error.ts
@@ -0,0 +1,12 @@
+import { cn } from '@videojs/utils/style';
+import { error as baseError } from '../components/error';
+import { surface } from '../components/surface';
+
+export const root = cn(baseError.popup, surface, 'text-shadow-2xs text-shadow-black/25');
+export const title = cn(baseError.title, 'text-base');
+export const description = baseError.description;
+export const close = baseError.close;
+
+export const dialog = cn(baseError.dialog, surface, 'text-shadow-2xs text-shadow-black/25');
+export const content = cn(baseError.content, 'text-shadow-inherit');
+export const actions = baseError.actions;
diff --git a/packages/skins/src/default/tailwind/video/index.ts b/packages/skins/src/default/tailwind/video/index.ts
new file mode 100644
index 00000000..3bb2489e
--- /dev/null
+++ b/packages/skins/src/default/tailwind/video/index.ts
@@ -0,0 +1,67 @@
+export { badge } from '../components/badge';
+export { button } from '../components/button';
+export { buttonGroup } from '../components/button-group';
+export * as icons from '../components/icon';
+export {
+  airplayButtonState,
+  airplayEnterIcon,
+  airplayExitIcon,
+  captionsButtonState,
+  captionsOffIcon,
+  captionsOnIcon,
+  castButtonState,
+  castEnterIcon,
+  castExitIcon,
+  container as iconContainer,
+  flipped as iconFlipped,
+  fullscreenButtonState,
+  fullscreenEnterIcon,
+  fullscreenExitIcon,
+  hidden as iconHidden,
+  muteButtonState,
+  pauseIcon,
+  pipButtonState,
+  pipEnterIcon,
+  pipExitIcon,
+  playButtonState,
+  restartIcon,
+  root as icon,
+  seekBackwardIcon,
+  volumeHighIcon,
+  volumeLowIcon,
+  volumeOffIcon,
+} from '../components/icon';
+export { menu } from '../components/menu';
+export { overlay } from '../components/overlay';
+export { playbackRate } from '../components/playback-rate';
+export { poster } from '../components/poster';
+export { seek } from '../components/seek';
+export { container, controls } from './base';
+export * as buffering from './buffering';
+export * as bufferingIndicator from './buffering';
+export * as controlsGroup from './controls-group';
+export {
+  end as buttonGroupEnd,
+  end as controlsGroupEnd,
+  start as buttonGroupStart,
+  start as controlsGroupStart,
+} from './controls-group';
+export * as error from './error';
+export * as indicator from './indicator';
+export * as popover from './popover';
+export * as popup from './popup';
+export * as seekIndicator from './seek-indicator';
+export * as slider from './slider';
+export {
+  root as sliderRoot,
+  thumbnail as sliderThumbnail,
+  thumbnailImage as sliderThumbnailImage,
+  thumbnailTime as sliderThumbnailTime,
+} from './slider';
+export * as spinner from './spinner';
+export * as statusIndicator from './status-indicator';
+export * as thumbnail from './thumbnail';
+export * as time from './time';
+export * as tooltip from './tooltip';
+export * as volumeIndicator from './volume-indicator';
+export * as volumePopover from './volume-popover';
diff --git a/packages/skins/src/default/tailwind/video/indicator.ts b/packages/skins/src/default/tailwind/video/indicator.ts
new file mode 100644
index 00000000..8783dff0
--- /dev/null
+++ b/packages/skins/src/default/tailwind/video/indicator.ts
@@ -0,0 +1 @@
+export { indicatorContent as content, indicatorValue as value } from '../components/indicators';
diff --git a/packages/skins/src/default/tailwind/video/popover.ts b/packages/skins/src/default/tailwind/video/popover.ts
new file mode 100644
index 00000000..d24fc138
--- /dev/null
+++ b/packages/skins/src/default/tailwind/video/popover.ts
@@ -0,0 +1,5 @@
+import { cn } from '@videojs/utils/style';
+import { popover as basePopover } from '../components/popover';
+import { surface } from '../components/surface';
+
+export const root = cn(surface, basePopover);
diff --git a/packages/skins/src/default/tailwind/video/popup.ts b/packages/skins/src/default/tailwind/video/popup.ts
new file mode 100644
index 00000000..956edfaa
--- /dev/null
+++ b/packages/skins/src/default/tailwind/video/popup.ts
@@ -0,0 +1,3 @@
+export { root as popover } from './popover';
+export { root as tooltip, shortcut as tooltipShortcut } from './tooltip';
+export { root as volume } from './volume-popover';
diff --git a/packages/skins/src/default/tailwind/video/seek-indicator.ts b/packages/skins/src/default/tailwind/video/seek-indicator.ts
new file mode 100644
index 00000000..c229fe4b
--- /dev/null
+++ b/packages/skins/src/default/tailwind/video/seek-indicator.ts
@@ -0,0 +1,5 @@
+export {
+  seekIndicator as root,
+  seekIndicatorIcon as icon,
+  seekIndicatorValue as value,
+} from '../components/indicators';
diff --git a/packages/skins/src/default/tailwind/video/slider.ts b/packages/skins/src/default/tailwind/video/slider.ts
new file mode 100644
index 00000000..aee1bb46
--- /dev/null
+++ b/packages/skins/src/default/tailwind/video/slider.ts
@@ -0,0 +1,24 @@
+import { cn } from '@videojs/utils/style';
+import { track as baseTrack } from '../components/slider';
+import { surface } from '../components/surface';
+import { thumbnail as baseThumbnail } from '../components/thumbnail';
+
+export * from '../components/slider';
+
+export const track = cn(baseTrack, 'bg-white/20 ring-1 ring-black/5');
+
+export const thumbnail = cn(
+  baseThumbnail.root,
+  surface,
+  '[--media-slider-thumbnail-max-width:11rem] [--media-slider-thumbnail-padding:-1.125rem] [--media-slider-thumbnail-inset:calc((100cqi-100%)/2)]',
+  'absolute [left:clamp(calc(var(--media-slider-thumbnail-max-width)/2+var(--media-slider-thumbnail-padding)-var(--media-slider-thumbnail-inset)),var(--media-slider-pointer),calc(100%-var(--media-slider-thumbnail-max-width)/2-var(--media-slider-thumbnail-padding)+var(--media-slider-thumbnail-inset)))] bottom-[calc(100%+1.2rem)] -translate-x-1/2',
+  'opacity-0 scale-80 blur-sm origin-bottom',
+  'transition-[scale,opacity,filter] duration-150',
+  'has-[[role=img]:not([data-hidden])]:group-data-pointing/slider:opacity-100',
+  'has-[[role=img]:not([data-hidden])]:group-data-pointing/slider:scale-100',
+  'has-[[role=img]:not([data-hidden])]:group-data-pointing/slider:blur-none',
+  'has-[[role=img][data-loading]]:max-h-24'
+);
+export const thumbnailImage = cn(baseThumbnail.image, 'max-w-(--media-slider-thumbnail-max-width)');
+export const thumbnailTime = baseThumbnail.time;
+export const spinner = baseThumbnail.spinner;
diff --git a/packages/skins/src/default/tailwind/video/spinner.ts b/packages/skins/src/default/tailwind/video/spinner.ts
new file mode 100644
index 00000000..50e1125a
--- /dev/null
+++ b/packages/skins/src/default/tailwind/video/spinner.ts
@@ -0,0 +1 @@
+export { spinner as root } from './slider';
diff --git a/packages/skins/src/default/tailwind/video/status-indicator.ts b/packages/skins/src/default/tailwind/video/status-indicator.ts
new file mode 100644
index 00000000..dfb8262f
--- /dev/null
+++ b/packages/skins/src/default/tailwind/video/status-indicator.ts
@@ -0,0 +1,29 @@
+import { cn } from '@videojs/utils/style';
+import {
+  statusIndicatorTop as baseStatusIndicatorTop,
+  statusIndicatorCaptionsOffIcon,
+  statusIndicatorCaptionsOnIcon,
+  statusIndicatorCenter,
+  statusIndicatorCenterIcon,
+  statusIndicatorFullscreenEnterIcon,
+  statusIndicatorFullscreenExitIcon,
+  statusIndicatorPauseIcon,
+  statusIndicatorPipEnterIcon,
+  statusIndicatorPipExitIcon,
+  statusIndicatorPlayIcon,
+  statusIndicatorTopIcon,
+} from '../components/indicators';
+import { surface } from '../components/surface';
+
+export const top = cn(baseStatusIndicatorTop, surface);
+export const center = statusIndicatorCenter;
+export const topIcon = statusIndicatorTopIcon;
+export const centerIcon = statusIndicatorCenterIcon;
+export const captionsOnIcon = statusIndicatorCaptionsOnIcon;
+export const captionsOffIcon = statusIndicatorCaptionsOffIcon;
+export const fullscreenEnterIcon = statusIndicatorFullscreenEnterIcon;
+export const fullscreenExitIcon = statusIndicatorFullscreenExitIcon;
+export const pipEnterIcon = statusIndicatorPipEnterIcon;
+export const pipExitIcon = statusIndicatorPipExitIcon;
+export const playIcon = statusIndicatorPlayIcon;
+export const pauseIcon = statusIndicatorPauseIcon;
diff --git a/packages/skins/src/default/tailwind/video/thumbnail.ts b/packages/skins/src/default/tailwind/video/thumbnail.ts
new file mode 100644
index 00000000..69013328
--- /dev/null
+++ b/packages/skins/src/default/tailwind/video/thumbnail.ts
@@ -0,0 +1 @@
+export { spinner, thumbnail as root, thumbnailImage as image, thumbnailTime as time } from './slider';
diff --git a/packages/skins/src/default/tailwind/video/time.ts b/packages/skins/src/default/tailwind/video/time.ts
new file mode 100644
index 00000000..b4e47e9b
--- /dev/null
+++ b/packages/skins/src/default/tailwind/video/time.ts
@@ -0,0 +1,10 @@
+import { cn } from '@videojs/utils/style';
+import { time as baseTime } from '../components/time';
+
+export const group = cn(
+  baseTime.group,
+  'grow-0 shrink-0 basis-full order-[-1] px-2.5',
+  '@2xl/media-container:grow @2xl/media-container:shrink @2xl/media-container:basis-0 @2xl/media-container:order-[unset]'
+);
+export const current = baseTime.current;
+export const duration = baseTime.duration;
diff --git a/packages/skins/src/default/tailwind/video/tooltip.ts b/packages/skins/src/default/tailwind/video/tooltip.ts
new file mode 100644
index 00000000..b23393bc
--- /dev/null
+++ b/packages/skins/src/default/tailwind/video/tooltip.ts
@@ -0,0 +1,6 @@
+import { cn } from '@videojs/utils/style';
+import { surface } from '../components/surface';
+import { tooltip as baseTooltip, tooltipShortcut as baseTooltipShortcut } from '../components/tooltip';
+
+export const root = cn(surface, baseTooltip);
+export const shortcut = baseTooltipShortcut;
diff --git a/packages/skins/src/default/tailwind/video/volume-indicator.ts b/packages/skins/src/default/tailwind/video/volume-indicator.ts
new file mode 100644
index 00000000..d2d5aeab
--- /dev/null
+++ b/packages/skins/src/default/tailwind/video/volume-indicator.ts
@@ -0,0 +1,15 @@
+import { cn } from '@videojs/utils/style';
+import {
+  volumeIndicator as baseVolumeIndicator,
+  volumeIndicatorHighIcon,
+  volumeIndicatorIcon,
+  volumeIndicatorLowIcon,
+  volumeIndicatorOffIcon,
+} from '../components/indicators';
+import { surface } from '../components/surface';
+
+export const root = cn(baseVolumeIndicator, surface);
+export const icon = volumeIndicatorIcon;
+export const highIcon = volumeIndicatorHighIcon;
+export const lowIcon = volumeIndicatorLowIcon;
+export const offIcon = volumeIndicatorOffIcon;
diff --git a/packages/skins/src/default/tailwind/video/volume-popover.ts b/packages/skins/src/default/tailwind/video/volume-popover.ts
new file mode 100644
index 00000000..abb265ff
--- /dev/null
+++ b/packages/skins/src/default/tailwind/video/volume-popover.ts
@@ -0,0 +1,3 @@
+import { volumePopover as baseVolumePopover } from '../components/popover';
+
+export const root = baseVolumePopover;
diff --git a/packages/skins/src/default/video.css b/packages/skins/src/default/video.css
new file mode 100644
index 00000000..cd43afb6
--- /dev/null
+++ b/packages/skins/src/default/video.css
@@ -0,0 +1,81 @@
+:where(.media-root) {
+  --media-caption-track-delay: 25ms;
+  --media-caption-track-duration: var(--media-controls-transition-duration);
+  --media-caption-track-y: -0.5rem;
+  --media-controls-transition-duration: 100ms;
+  --media-controls-transition-timing-function: ease-out;
+  --media-error-dialog-transition-delay: 100ms;
+  --media-error-dialog-transition-duration: 350ms;
+  --media-error-dialog-transition-timing-function: var(--media-spring-timing-function);
+  --media-popover-boundary-offset: 0.5rem;
+  --media-popover-side-offset: 0.5rem;
+  --media-popup-transition-duration: 100ms;
+  --media-popup-transition-timing-function: ease-out;
+  --media-spring-timing-function: linear(
+    0,
+    0.034 1.5%,
+    0.763 9.7%,
+    1.066 13.9%,
+    1.198 19.9%,
+    1.184 21.8%,
+    0.963 37.5%,
+    0.997 50.9%,
+    1
+  );
+  --media-surface-backdrop-filter: blur(16px) saturate(1.5);
+  --media-surface-background-color: oklch(1 0 0 / 0.1);
+  --media-surface-inner-border-color: oklch(1 0 0 / 0.05);
+  --media-surface-outer-border-color: oklch(0 0 0 / 0.1);
+  --media-surface-shadow-color: oklch(0 0 0 / 0.15);
+  --media-tooltip-boundary-offset: 0.5rem;
+  --media-tooltip-side-offset: 0.75rem;
+  --media-video-border-radius: var(--media-border-radius, 2rem);
+}
+
+:where(.media-root:has([data-controls][data-visible])) {
+  --media-caption-track-y: -5.5rem;
+}
+
+@container media-container (width >= 42rem) {
+  :where(.media-root > *) {
+    --media-caption-track-y: -3.5rem;
+  }
+}
+
+@media (pointer: coarse) {
+  :where(.media-root) {
+    --media-controls-transition-duration: 150ms;
+  }
+}
+
+@media (pointer: fine) {
+  :where(.media-root) {
+    --media-controls-transition-duration: 300ms;
+  }
+}
+
+@media (prefers-contrast: more) {
+  :where(.media-root) {
+    --media-surface-background-color: oklch(0 0 0);
+    --media-surface-inner-border-color: oklch(1 0 0 / 0.25);
+    --media-surface-outer-border-color: transparent;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where(.media-root) {
+    --media-controls-transition-duration: 50ms;
+    --media-error-dialog-transition-delay: 0ms;
+    --media-error-dialog-transition-duration: 50ms;
+    --media-error-dialog-transition-timing-function: ease-out;
+    --media-popup-transition-duration: 0ms;
+  }
+}
+
+@media (prefers-reduced-transparency: reduce) {
+  :where(.media-root) {
+    --media-surface-background-color: oklch(0 0 0);
+    --media-surface-inner-border-color: oklch(1 0 0 / 0.25);
+    --media-surface-outer-border-color: transparent;
+  }
+}
diff --git a/packages/skins/src/default/video.skin.tsx b/packages/skins/src/default/video.skin.tsx
index abbccce2..600c63a2 100644
--- a/packages/skins/src/default/video.skin.tsx
+++ b/packages/skins/src/default/video.skin.tsx
@@ -49,28 +49,25 @@ import {
   VolumeOffIcon,
 } from '@videojs/icons/components';
 import {
-  airplayIcon,
-  bufferingIndicator,
+  buffering,
   button,
-  buttonGroupEnd,
-  buttonGroupStart,
-  castIcon,
   container,
   controls,
+  controlsGroup,
   error,
-  fullscreenIcon,
-  icon,
-  iconFlipped,
-  inputFeedback,
-  muteIcon,
+  icons,
+  indicator,
   overlay,
-  pipIcon,
-  playIcon,
-  popup,
+  popover,
   seek,
+  seekIndicator,
   slider,
-  thumbnail,
+  spinner,
+  statusIndicator,
   time,
+  tooltip,
+  volumeIndicator,
+  volumePopover,
 } from './tailwind/video.tailwind';
 
 const SEEK_TIME = 10;
@@ -85,10 +82,10 @@ export interface DefaultVideoSkinProps {
 
 function MuteControl() {
   return (
-    <MuteButton className={[iconButton, muteIcon.button]}>
-      <VolumeOffIcon className={[icon, muteIcon.volumeOff]} />
-      <VolumeLowIcon className={[icon, muteIcon.volumeLow]} />
-      <VolumeHighIcon className={[icon, muteIcon.volumeHigh]} />
+    <MuteButton className={[iconButton, icons.muteButtonState]}>
+      <VolumeOffIcon className={[icons.root, icons.volumeOffIcon]} />
+      <VolumeLowIcon className={[icons.root, icons.volumeLowIcon]} />
+      <VolumeHighIcon className={[icons.root, icons.volumeHighIcon]} />
     </MuteButton>
   );
 }
@@ -100,12 +97,12 @@ export function DefaultVideoSkin({ className, children }: DefaultVideoSkinProps)
 
       <Poster />
 
-      <BufferingIndicator className={bufferingIndicator.root}>
-        <SpinnerIcon className={icon} />
+      <BufferingIndicator className={buffering.root}>
+        <SpinnerIcon className={icons.root} />
       </BufferingIndicator>
 
       <ErrorDialog.Root>
-        <ErrorDialog.Popup className={error.popup}>
+        <ErrorDialog.Popup className={error.root}>
           <ErrorDialog.Title className={error.title}>Something went wrong.</ErrorDialog.Title>
           <ErrorDialog.Description className={error.description} />
           <ErrorDialog.Close className={[button.base, button.primary, error.close]}>OK</ErrorDialog.Close>
@@ -114,44 +111,44 @@ export function DefaultVideoSkin({ className, children }: DefaultVideoSkinProps)
 
       <Controls.Root className={controls}>
         <Tooltip.Provider>
-          <Controls.Group className={buttonGroupStart}>
+          <Controls.Group className={controlsGroup.start}>
             <Tooltip.Root side="top">
               <Tooltip.Trigger>
-                <PlayButton className={[iconButton, playIcon.button]}>
-                  <RestartIcon className={[icon, playIcon.restart]} />
-                  <PlayIcon className={[icon, playIcon.play]} />
-                  <PauseIcon className={[icon, playIcon.pause]} />
+                <PlayButton className={[iconButton, icons.playButtonState]}>
+                  <RestartIcon className={[icons.root, icons.restartIcon]} />
+                  <PlayIcon className={[icons.root, icons.playIcon]} />
+                  <PauseIcon className={[icons.root, icons.pauseIcon]} />
                 </PlayButton>
               </Tooltip.Trigger>
-              <Tooltip.Popup className={popup.tooltip}>
+              <Tooltip.Popup className={tooltip.root}>
                 <Tooltip.Label />
-                <Tooltip.Shortcut className={popup.tooltipShortcut} />
+                <Tooltip.Shortcut className={tooltip.shortcut} />
               </Tooltip.Popup>
             </Tooltip.Root>
 
             <Tooltip.Root side="top">
               <Tooltip.Trigger>
                 <SeekButton seconds={-SEEK_TIME} className={[iconButton, seek.button]}>
-                  <SeekIcon className={[icon, iconFlipped]} />
+                  <SeekIcon className={[icons.root, icons.seekBackwardIcon]} />
                   <Text className={[seek.label, seek.labelBackward]}>{SEEK_TIME}</Text>
                 </SeekButton>
               </Tooltip.Trigger>
-              <Tooltip.Popup className={popup.tooltip}>
+              <Tooltip.Popup className={tooltip.root}>
                 <Tooltip.Label />
-                <Tooltip.Shortcut className={popup.tooltipShortcut} />
+                <Tooltip.Shortcut className={tooltip.shortcut} />
               </Tooltip.Popup>
             </Tooltip.Root>
 
             <Tooltip.Root side="top">
               <Tooltip.Trigger>
                 <SeekButton seconds={SEEK_TIME} className={[iconButton, seek.button]}>
-                  <SeekIcon className={icon} />
+                  <SeekIcon className={icons.root} />
                   <Text className={[seek.label, seek.labelForward]}>{SEEK_TIME}</Text>
                 </SeekButton>
               </Tooltip.Trigger>
-              <Tooltip.Popup className={popup.tooltip}>
+              <Tooltip.Popup className={tooltip.root}>
                 <Tooltip.Label />
-                <Tooltip.Shortcut className={popup.tooltipShortcut} />
+                <Tooltip.Shortcut className={tooltip.shortcut} />
               </Tooltip.Popup>
             </Tooltip.Root>
           </Controls.Group>
@@ -160,14 +157,14 @@ export function DefaultVideoSkin({ className, children }: DefaultVideoSkinProps)
             <Time.Value type="current" className={time.current} />
             <TimeSlider.Root className={slider.root}>
               <TimeSlider.Track className={slider.track}>
-                <TimeSlider.Fill className={[slider.fill.base, slider.fill.fill]} />
-                <TimeSlider.Buffer className={[slider.fill.base, slider.fill.buffer]} />
+                <TimeSlider.Fill className={[slider.fillBase, slider.fill]} />
+                <TimeSlider.Buffer className={[slider.fillBase, slider.buffer]} />
               </TimeSlider.Track>
-              <TimeSlider.Thumb className={[slider.thumb.base, slider.thumb.interactive]} />
-              <Slider.Thumbnail.Root className={thumbnail.root}>
-                <Slider.Thumbnail.Image className={thumbnail.image} />
-                <TimeSlider.Value type="pointer" className={thumbnail.time} />
-                <SpinnerIcon className={[icon, thumbnail.spinner]} />
+              <TimeSlider.Thumb className={[slider.thumbBase, slider.thumb]} />
+              <Slider.Thumbnail.Root className={slider.thumbnail}>
+                <Slider.Thumbnail.Image className={slider.thumbnailImage} />
+                <TimeSlider.Value type="pointer" className={slider.thumbnailTime} />
+                <SpinnerIcon className={[icons.root, spinner.root]} />
               </Slider.Thumbnail.Root>
               <TimeSlider.Preview className={slider.preview}>
                 <TimeSlider.Value type="pointer" className={slider.value} />
@@ -176,7 +173,7 @@ export function DefaultVideoSkin({ className, children }: DefaultVideoSkinProps)
             <Time.Value type="duration" className={time.duration} />
           </Time.Group>
 
-          <Controls.Group className={buttonGroupEnd}>
+          <Controls.Group className={controlsGroup.end}>
             <FeatureAvailability is="volume" when="unsupported">
               <MuteControl />
             </FeatureAvailability>
@@ -185,12 +182,12 @@ export function DefaultVideoSkin({ className, children }: DefaultVideoSkinProps)
                 <Popover.Trigger>
                   <MuteControl />
                 </Popover.Trigger>
-                <Popover.Popup className={[popup.popover, popup.volume]}>
+                <Popover.Popup className={[popover.root, volumePopover.root]}>
                   <VolumeSlider.Root orientation="vertical" thumbAlignment="edge" className={slider.root}>
                     <VolumeSlider.Track className={slider.track}>
-                      <VolumeSlider.Fill className={[slider.fill.base, slider.fill.fill]} />
+                      <VolumeSlider.Fill className={[slider.fillBase, slider.fill]} />
                     </VolumeSlider.Track>
-                    <VolumeSlider.Thumb className={[slider.thumb.base, slider.thumb.persistent]} />
+                    <VolumeSlider.Thumb className={[slider.thumbBase, slider.thumbPersistent]} />
                   </VolumeSlider.Root>
                 </Popover.Popup>
               </Popover.Root>
@@ -198,53 +195,53 @@ export function DefaultVideoSkin({ className, children }: DefaultVideoSkinProps)
 
             <Tooltip.Root side="top">
               <Tooltip.Trigger>
-                <CastButton className={[iconButton, castIcon.button]}>
-                  <CastEnterIcon className={[icon, castIcon.enter]} />
-                  <CastExitIcon className={[icon, castIcon.exit]} />
+                <CastButton className={[iconButton, icons.castButtonState]}>
+                  <CastEnterIcon className={[icons.root, icons.castEnterIcon]} />
+                  <CastExitIcon className={[icons.root, icons.castExitIcon]} />
                 </CastButton>
               </Tooltip.Trigger>
-              <Tooltip.Popup className={popup.tooltip}>
+              <Tooltip.Popup className={tooltip.root}>
                 <Tooltip.Label />
-                <Tooltip.Shortcut className={popup.tooltipShortcut} />
+                <Tooltip.Shortcut className={tooltip.shortcut} />
               </Tooltip.Popup>
             </Tooltip.Root>
 
             <Tooltip.Root side="top">
               <Tooltip.Trigger>
-                <AirPlayButton className={[iconButton, airplayIcon.button]}>
-                  <AirPlayEnterIcon className={[icon, airplayIcon.enter]} />
-                  <AirPlayExitIcon className={[icon, airplayIcon.exit]} />
+                <AirPlayButton className={[iconButton, icons.airplayButtonState]}>
+                  <AirPlayEnterIcon className={[icons.root, icons.airplayEnterIcon]} />
+                  <AirPlayExitIcon className={[icons.root, icons.airplayExitIcon]} />
                 </AirPlayButton>
               </Tooltip.Trigger>
-              <Tooltip.Popup className={popup.tooltip}>
+              <Tooltip.Popup className={tooltip.root}>
                 <Tooltip.Label />
-                <Tooltip.Shortcut className={popup.tooltipShortcut} />
+                <Tooltip.Shortcut className={tooltip.shortcut} />
               </Tooltip.Popup>
             </Tooltip.Root>
 
             <Tooltip.Root side="top">
               <Tooltip.Trigger>
-                <PiPButton className={[iconButton, pipIcon.button]}>
-                  <PipEnterIcon className={[icon, pipIcon.off]} />
-                  <PipExitIcon className={[icon, pipIcon.on]} />
+                <PiPButton className={[iconButton, icons.pipButtonState]}>
+                  <PipEnterIcon className={[icons.root, icons.pipEnterIcon]} />
+                  <PipExitIcon className={[icons.root, icons.pipExitIcon]} />
                 </PiPButton>
               </Tooltip.Trigger>
-              <Tooltip.Popup className={popup.tooltip}>
+              <Tooltip.Popup className={tooltip.root}>
                 <Tooltip.Label />
-                <Tooltip.Shortcut className={popup.tooltipShortcut} />
+                <Tooltip.Shortcut className={tooltip.shortcut} />
               </Tooltip.Popup>
             </Tooltip.Root>
 
             <Tooltip.Root side="top">
               <Tooltip.Trigger>
-                <FullscreenButton className={[iconButton, fullscreenIcon.button]}>
-                  <FullscreenEnterIcon className={[icon, fullscreenIcon.enter]} />
-                  <FullscreenExitIcon className={[icon, fullscreenIcon.exit]} />
+                <FullscreenButton className={[iconButton, icons.fullscreenButtonState]}>
+                  <FullscreenEnterIcon className={[icons.root, icons.fullscreenEnterIcon]} />
+                  <FullscreenExitIcon className={[icons.root, icons.fullscreenExitIcon]} />
                 </FullscreenButton>
               </Tooltip.Trigger>
-              <Tooltip.Popup className={popup.tooltip}>
+              <Tooltip.Popup className={tooltip.root}>
                 <Tooltip.Label />
-                <Tooltip.Shortcut className={popup.tooltipShortcut} />
+                <Tooltip.Shortcut className={tooltip.shortcut} />
               </Tooltip.Popup>
             </Tooltip.Root>
           </Controls.Group>
@@ -279,53 +276,33 @@ export function DefaultVideoSkin({ className, children }: DefaultVideoSkinProps)
 
       <StatusAnnouncer />
 
-      <VolumeIndicator.Root
-        className={[
-          inputFeedback.island.root,
-          inputFeedback.island.base,
-          inputFeedback.island.volume,
-          inputFeedback.island.shownVolume,
-        ]}
-      >
-        <VolumeIndicator.Fill className={inputFeedback.island.content}>
-          <VolumeHighIcon className={[inputFeedback.island.icon, inputFeedback.island.shownVolumeHigh]} />
-          <VolumeLowIcon className={[inputFeedback.island.icon, inputFeedback.island.shownVolumeLow]} />
-          <VolumeOffIcon className={[inputFeedback.island.icon, inputFeedback.island.shownVolumeOff]} />
-          <VolumeIndicator.Value className={inputFeedback.island.value} />
+      <VolumeIndicator.Root className={volumeIndicator.root}>
+        <VolumeIndicator.Fill className={indicator.content}>
+          <VolumeHighIcon className={[volumeIndicator.icon, volumeIndicator.highIcon]} />
+          <VolumeLowIcon className={[volumeIndicator.icon, volumeIndicator.lowIcon]} />
+          <VolumeOffIcon className={[volumeIndicator.icon, volumeIndicator.offIcon]} />
+          <VolumeIndicator.Value className={indicator.value} />
         </VolumeIndicator.Fill>
       </VolumeIndicator.Root>
 
-      <StatusIndicator.Root
-        actions={TOP_STATUS_ACTIONS}
-        className={[
-          inputFeedback.island.root,
-          inputFeedback.island.base,
-          inputFeedback.island.statusContent,
-          inputFeedback.island.shownStatus,
-        ]}
-      >
-        <CaptionsOnIcon className={[inputFeedback.island.icon, inputFeedback.island.shownCaptionsOn]} />
-        <CaptionsOffIcon className={[inputFeedback.island.icon, inputFeedback.island.shownCaptionsOff]} />
-        <FullscreenEnterIcon className={[inputFeedback.island.icon, inputFeedback.island.shownFullscreenEnter]} />
-        <FullscreenExitIcon className={[inputFeedback.island.icon, inputFeedback.island.shownFullscreenExit]} />
-        <PipEnterIcon className={[inputFeedback.island.icon, inputFeedback.island.shownPipEnter]} />
-        <PipExitIcon className={[inputFeedback.island.icon, inputFeedback.island.shownPipExit]} />
-        <StatusIndicator.Value className={inputFeedback.island.value} />
+      <StatusIndicator.Root actions={TOP_STATUS_ACTIONS} className={statusIndicator.top}>
+        <CaptionsOnIcon className={[statusIndicator.topIcon, statusIndicator.captionsOnIcon]} />
+        <CaptionsOffIcon className={[statusIndicator.topIcon, statusIndicator.captionsOffIcon]} />
+        <FullscreenEnterIcon className={[statusIndicator.topIcon, statusIndicator.fullscreenEnterIcon]} />
+        <FullscreenExitIcon className={[statusIndicator.topIcon, statusIndicator.fullscreenExitIcon]} />
+        <PipEnterIcon className={[statusIndicator.topIcon, statusIndicator.pipEnterIcon]} />
+        <PipExitIcon className={[statusIndicator.topIcon, statusIndicator.pipExitIcon]} />
+        <StatusIndicator.Value className={indicator.value} />
       </StatusIndicator.Root>
 
-      <SeekIndicator.Root
-        className={[inputFeedback.bubble.root, inputFeedback.bubble.seekRoot, inputFeedback.bubble.base]}
-      >
-        <ChevronIcon className={[inputFeedback.bubble.icon, inputFeedback.bubble.shownSeek]} />
-        <SeekIndicator.Value className={inputFeedback.bubble.time} />
+      <SeekIndicator.Root className={seekIndicator.root}>
+        <ChevronIcon className={seekIndicator.icon} />
+        <SeekIndicator.Value className={seekIndicator.value} />
       </SeekIndicator.Root>
 
-      <StatusIndicator.Root
-        actions={CENTER_STATUS_ACTIONS}
-        className={[inputFeedback.bubble.root, inputFeedback.bubble.centerRoot, inputFeedback.bubble.base]}
-      >
-        <PlayIcon className={[inputFeedback.bubble.icon, inputFeedback.bubble.shownPlay]} />
-        <PauseIcon className={[inputFeedback.bubble.icon, inputFeedback.bubble.shownPause]} />
+      <StatusIndicator.Root actions={CENTER_STATUS_ACTIONS} className={statusIndicator.center}>
+        <PlayIcon className={[statusIndicator.centerIcon, statusIndicator.playIcon]} />
+        <PauseIcon className={[statusIndicator.centerIcon, statusIndicator.pauseIcon]} />
       </StatusIndicator.Root>
     </Container>
   );
diff --git a/packages/skins/src/default/video.tailwind.css b/packages/skins/src/default/video.tailwind.css
new file mode 100644
index 00000000..d7edb95b
--- /dev/null
+++ b/packages/skins/src/default/video.tailwind.css
@@ -0,0 +1,3 @@
+@import "tailwindcss";
+@import "../shared/tailwind.css";
+@import "./video.css";
diff --git a/packages/skins/src/minimal/tailwind/components/button-group.ts b/packages/skins/src/minimal/tailwind/components/button-group.ts
index 143d2b02..f53d55ce 100644
--- a/packages/skins/src/minimal/tailwind/components/button-group.ts
+++ b/packages/skins/src/minimal/tailwind/components/button-group.ts
@@ -1,3 +1,3 @@
 import { cn } from '@videojs/utils/style';
 
-export const buttonGroup = cn('flex items-center gap-[0.075rem]', '@2xl/media-root:gap-0.5');
+export const buttonGroup = cn('flex items-center gap-[0.075rem]', '@2xl/media-container:gap-0.5');
diff --git a/packages/skins/src/minimal/tailwind/components/container.ts b/packages/skins/src/minimal/tailwind/components/container.ts
index 89271043..2085d4b7 100644
--- a/packages/skins/src/minimal/tailwind/components/container.ts
+++ b/packages/skins/src/minimal/tailwind/components/container.ts
@@ -4,7 +4,7 @@ import { reset } from './reset';
 export const container = cn(
   reset,
   // Layout & containment
-  'block relative isolate h-full w-full @container/media-root',
+  'block relative isolate h-full w-full @container/media-container',
   // Appearance
   'rounded-(--media-border-radius,0.75rem)',
   'font-[Inter_Variable,Inter,ui-sans-serif,system-ui,sans-serif] text-[0.8125rem] leading-normal subpixel-antialiased',
diff --git a/packages/skins/src/minimal/tailwind/components/input-feedback.ts b/packages/skins/src/minimal/tailwind/components/input-feedback.ts
index 4cb8627a..006d4634 100644
--- a/packages/skins/src/minimal/tailwind/components/input-feedback.ts
+++ b/packages/skins/src/minimal/tailwind/components/input-feedback.ts
@@ -12,7 +12,7 @@ export const inputFeedback = {
     'grid grid-cols-3 items-center justify-items-center overflow-hidden',
     'rounded-[inherit]',
     // Shift to full extent in larger containers
-    '@2xl/media-root:bottom-0',
+    '@2xl/media-container:bottom-0',
     // Color
     '[color:var(--media-color-primary,oklch(1_0_0))]'
   ),
@@ -112,7 +112,7 @@ export const inputFeedback = {
       'data-starting-style:ease-in',
       'data-ending-style:duration-200',
       'data-ending-style:ease-in',
-      '@2xl/media-root:p-8',
+      '@2xl/media-container:p-8',
       'not-data-direction:[transition-property:opacity,scale]',
       'not-data-direction:duration-600',
       'not-data-direction:[transition-timing-function:ease-out,linear(0,0.12_1.5%,1.35_9.7%,2.2_13.9%,3_19.9%,2.7_21.8%,0.62_37.5%,0.96_50.9%,1)]',
diff --git a/packages/skins/src/minimal/tailwind/components/popup.ts b/packages/skins/src/minimal/tailwind/components/popup.ts
index 784707bf..cce0c531 100644
--- a/packages/skins/src/minimal/tailwind/components/popup.ts
+++ b/packages/skins/src/minimal/tailwind/components/popup.ts
@@ -13,7 +13,7 @@ const base = cn(
   // Ensure we animate from the correct origin based on the side the popover is on
   'data-[side=top]:origin-bottom data-[side=bottom]:origin-top data-[side=left]:origin-right data-[side=right]:origin-left',
   // Safe area between trigger and popup
-  'before:absolute before:pointer-events-[inherit]',
+  'before:absolute before:[pointer-events:inherit]',
   'data-[side=top]:before:left-0 data-[side=top]:before:right-0 data-[side=top]:before:top-full',
   'data-[side=bottom]:before:left-0 data-[side=bottom]:before:right-0 data-[side=bottom]:before:bottom-full',
   'data-[side=left]:before:top-0 data-[side=left]:before:bottom-0 data-[side=left]:before:left-full',
diff --git a/packages/skins/src/minimal/tailwind/components/time.ts b/packages/skins/src/minimal/tailwind/components/time.ts
index d1af4fc6..41fc66dc 100644
--- a/packages/skins/src/minimal/tailwind/components/time.ts
+++ b/packages/skins/src/minimal/tailwind/components/time.ts
@@ -2,8 +2,8 @@ import { cn } from '@videojs/utils/style';
 
 export const time = {
   group: 'flex items-center gap-1',
-  current: cn('hidden tabular-nums', '@2xl/media-root:inline'),
-  separator: cn('hidden', '@2xl/media-root:inline @2xl/media-root:text-current/60'),
-  duration: cn('tabular-nums', '@2xl/media-root:text-current/60'),
-  controls: cn('@container flex flex-row-reverse items-center flex-1 gap-3', '@2xl/media-root:flex-row'),
+  current: cn('hidden tabular-nums', '@2xl/media-container:inline'),
+  separator: cn('hidden', '@2xl/media-container:inline @2xl/media-container:text-current/60'),
+  duration: cn('tabular-nums', '@2xl/media-container:text-current/60'),
+  controls: cn('@container flex flex-row-reverse items-center flex-1 gap-3', '@2xl/media-container:flex-row'),
 };
diff --git a/packages/skins/src/minimal/tailwind/video.tailwind.ts b/packages/skins/src/minimal/tailwind/video.tailwind.ts
index 12bff6e9..9cdb4cb3 100644
--- a/packages/skins/src/minimal/tailwind/video.tailwind.ts
+++ b/packages/skins/src/minimal/tailwind/video.tailwind.ts
@@ -48,7 +48,7 @@ export const container = cn(
   'contrast-more:[--media-controls-background-color:oklch(0_0_0)]',
   '[@media(prefers-reduced-transparency:reduce)]:[--media-tooltip-background-color:oklch(0_0_0)]',
   'contrast-more:[--media-tooltip-background-color:oklch(0_0_0)]',
-  '@2xl/media-root:*:[--media-popover-side-offset:0.5rem]',
+  '@2xl/media-container:*:[--media-popover-side-offset:0.5rem]',
   'pointer-fine:has-[[data-controls]:not([data-visible])]:[--media-controls-transition-duration:300ms]',
   'pointer-coarse:has-[[data-controls]:not([data-visible])]:[--media-controls-transition-duration:150ms]',
   'motion-reduce:has-[[data-controls]:not([data-visible])]:[--media-controls-transition-duration:50ms]',
@@ -57,7 +57,7 @@ export const container = cn(
   '[--media-caption-track-delay:25ms]',
   '[--media-caption-track-duration:var(--media-controls-transition-duration)]',
   'has-[[data-controls][data-visible]]:[--media-caption-track-y:-5rem]',
-  '@2xl/media-root:has-[[data-controls][data-visible]]:*:[--media-caption-track-y:-3rem]',
+  '@2xl/media-container:has-[[data-controls][data-visible]]:*:[--media-caption-track-y:-3rem]',
   // Native caption track container
   '[&_video::-webkit-media-text-track-container]:transition-[translate]',
   '[&_video::-webkit-media-text-track-container]:duration-(--media-caption-track-duration)',
@@ -94,16 +94,16 @@ export const controls = cn(
   'motion-safe:not-data-visible:translate-y-full',
   'pointer-fine:motion-safe:not-data-visible:blur-sm',
   // Single-row layout (large)
-  '@2xl/media-root:flex-nowrap @2xl/media-root:bottom-2 @2xl/media-root:inset-x-2',
-  '@2xl/media-root:*:[--media-popover-side-offset:0rem]'
+  '@2xl/media-container:flex-nowrap @2xl/media-container:bottom-2 @2xl/media-container:inset-x-2',
+  '@2xl/media-container:*:[--media-popover-side-offset:0rem]'
 );
 
 /* ===========================================================================
    Button groups
    ========================================================================== */
 
-export const buttonGroupStart = cn(baseButtonGroup, 'flex-1 @2xl/media-root:flex-none');
-export const buttonGroupEnd = cn(baseButtonGroup, 'flex-1 justify-end @2xl/media-root:flex-none');
+export const buttonGroupStart = cn(baseButtonGroup, 'flex-1 @2xl/media-container:flex-none');
+export const buttonGroupEnd = cn(baseButtonGroup, 'flex-1 justify-end @2xl/media-container:flex-none');
 
 /* ===========================================================================
    Time
@@ -114,7 +114,7 @@ export const time = {
   controls: cn(
     baseTime.controls,
     'grow-0 shrink-0 basis-full order-[-1] px-2.5',
-    '@2xl/media-root:grow @2xl/media-root:shrink @2xl/media-root:basis-0 @2xl/media-root:order-[unset]'
+    '@2xl/media-container:grow @2xl/media-container:shrink @2xl/media-container:basis-0 @2xl/media-container:order-[unset]'
   ),
 };
 
@@ -139,7 +139,7 @@ export const thumbnail = {
     baseThumbnail.root,
     '[--media-slider-thumbnail-max-width:11rem] [--media-slider-thumbnail-padding:-0.5rem] [--media-slider-thumbnail-inset:calc(100cqi-100%)]',
     'absolute [left:clamp(calc(var(--media-slider-thumbnail-max-width)/2+var(--media-slider-thumbnail-padding)),var(--media-slider-pointer),calc(100%-var(--media-slider-thumbnail-max-width)/2-var(--media-slider-thumbnail-padding)+var(--media-slider-thumbnail-inset)))] bottom-full -translate-x-1/2',
-    '@2xl/media-root:[left:var(--media-slider-pointer)]',
+    '@2xl/media-container:[left:var(--media-slider-pointer)]',
     'opacity-0 scale-80 blur-sm origin-bottom',
     'transition-[scale,opacity,filter] duration-150',
     'has-[[role=img]:not([data-hidden])]:group-data-pointing/slider:opacity-100',
@@ -184,7 +184,7 @@ export const popup = {
 
 const menuOffsets = cn(
   '[--media-popover-side-offset:1.5rem] [--media-popover-boundary-offset:0.5rem]',
-  '@2xl/media-root:[--media-popover-side-offset:0.5rem]'
+  '@2xl/media-container:[--media-popover-side-offset:0.5rem]'
 );
 
 export const menu = {
diff --git a/packages/skins/src/shared/animations.css b/packages/skins/src/shared/animations.css
new file mode 100644
index 00000000..626d4acf
--- /dev/null
+++ b/packages/skins/src/shared/animations.css
@@ -0,0 +1,43 @@
+@keyframes media-shake {
+  0%,
+  100% {
+    translate: 0 0;
+  }
+
+  20% {
+    translate: -6px 0;
+  }
+
+  40% {
+    translate: 4px 0;
+  }
+
+  60% {
+    translate: -2px 0;
+  }
+
+  80% {
+    translate: 1px 0;
+  }
+}
+
+@keyframes media-slide-in-forward {
+  from {
+    translate: -60% 0;
+    opacity: 0;
+  }
+}
+
+@keyframes media-slide-in-backward {
+  from {
+    translate: 60% 0;
+    opacity: 0;
+  }
+}
+
+@keyframes media-pop-in {
+  from {
+    scale: 0.8;
+    opacity: 0;
+  }
+}
diff --git a/packages/skins/src/shared/registered-properties.css b/packages/skins/src/shared/registered-properties.css
new file mode 100644
index 00000000..ffa54ee7
--- /dev/null
+++ b/packages/skins/src/shared/registered-properties.css
@@ -0,0 +1,5 @@
+@property --media-progress-fill {
+  syntax: "<percentage>";
+  inherits: true;
+  initial-value: 0%;
+}
diff --git a/packages/skins/src/shared/tailwind.css b/packages/skins/src/shared/tailwind.css
index f02ba81a..f7c6c309 100644
--- a/packages/skins/src/shared/tailwind.css
+++ b/packages/skins/src/shared/tailwind.css
@@ -1,52 +1,6 @@
-@keyframes media-shake {
-  0%,
-  100% {
-    translate: 0 0;
-  }
-
-  20% {
-    translate: -6px 0;
-  }
-
-  40% {
-    translate: 4px 0;
-  }
-
-  60% {
-    translate: -2px 0;
-  }
-
-  80% {
-    translate: 1px 0;
-  }
-}
-
-@keyframes media-slide-in-forward {
-  from {
-    translate: -60% 0;
-    opacity: 0;
-  }
-}
-
-@keyframes media-slide-in-backward {
-  from {
-    translate: 60% 0;
-    opacity: 0;
-  }
-}
-
-@keyframes media-pop-in {
-  from {
-    scale: 0.8;
-    opacity: 0;
-  }
-}
-
-@property --media-progress-fill {
-  syntax: "<percentage>";
-  inherits: true;
-  initial-value: 0%;
-}
+@import "./animations.css";
+@import "./registered-properties.css";
+@import "./variables.css";
 
 @theme {
   --animate-media-shake: media-shake 300ms ease-in-out;
diff --git a/packages/skins/src/shared/variables.css b/packages/skins/src/shared/variables.css
new file mode 100644
index 00000000..dc0c8550
--- /dev/null
+++ b/packages/skins/src/shared/variables.css
@@ -0,0 +1,5 @@
+:where(.media-root) {
+  --media-current-shadow-color: oklch(from currentColor 0 0 0 / clamp(0, calc((l - 0.5) * 0.5), 0.15));
+  --media-current-shadow-color-subtle: oklch(from var(--media-current-shadow-color) l c h / calc(alpha * 0.4));
+  --media-icon-size: 18px;
+}