react-strict-dom

name	react-strict-dom
description	Set up react-strict-dom with Babel, PostCSS, and CSS-wrapped HTML components for universal Expo apps

React Strict DOM Setup for Expo

This guide covers setting up react-strict-dom in an Expo project with Tailwind CSS v4 and react-native-css for universal app development.

Overview

react-strict-dom provides a subset of HTML/CSS that works identically across web and native platforms. This setup includes:

• Babel preset - Transforms react-strict-dom components for each platform
• PostCSS plugin - Processes styles for web builds
• CSS directive - Enables react-strict-dom styles in global CSS
• HTML wrapper components - CSS-wrapped primitives with Tailwind className support

Installation

Install react-strict-dom using bun:

bun install react-strict-dom@0.0.54

Note: Version 0.0.55 has a broken dependency (postcss-react-strict-dom@0.0.55 doesn't exist). Use 0.0.54 until this is resolved.

Babel Configuration

Create or update babel.config.js in the project root:

const reactStrictPreset = require("react-strict-dom/babel-preset");

function getPlatform(caller) {
  return caller && caller.platform;
}

function getIsDev(caller) {
   (caller?. != )  caller.;
  
   (
    process.. ===  ||
    process.. === 
  );
}

. =  () {
  
   platform = api.(getPlatform);
   dev = api.(getIsDev);

   {
    : [
      ,
      [reactStrictPreset, { : , dev, platform }],
    ],
  };
};