Style not applied flashing on web on initial rendering

[theoribbi]

What happened?

When refreshing the page on web using uniwind style, there is a sort of "flash" that not apply style on the first render.

localhost.8082.2026-01-05.14.34.34.mp4

Steps to Reproduce

1. Using the npx create-expo-app -e with-router-uniwind
2. Launch web

Snack or Repository Link

https://github.com/theoribbi/uniwind-issue-web-flash

Uniwind version

1.2.2

React Native Version

0.81.5

Platforms

Web

Expo

Yes

Additional information

• I've searched for similar issues in this repository and found none

[Brentlok]

This is because RNW styles overrides tailwind styles. Tailwind styles are inside @layers which have lower priority than global css styles. Currently we're fixing that by moving all RNW styles to separated layer at runtime https://github.com/uni-stack/uniwind/blob/main/packages/uniwind/src/components/web/rnw.ts but like you've reported it can lead to flashing when rendering page on the server. I'll try to find a better solution but it may be complicated

[theoribbi]

Hey @Brentlok,

Just to share an update: I tried exporting the app with web.output = "static" and serving the built files, but the flash still happens on initial load.

It looks like the issue isn’t related to SSR vs static output, but rather to runtime style mutations on the client

Happy to help investigate or test a fix if needed 👍

[Brentlok]

It looks like the issue isn’t related to SSR vs static output, but rather to runtime style mutations on the client

Yeah, it's about that. I think that we need to patch RNW so it returns CSS under @layer, instead of doing it at runtime

[a16n-dev]

I've written a fix for RNW to handle this, published as react-native-web-tailwind-compat. It's a tricky issue to work around, and there is probably a better solution out there, but it might at least be useful as a reference point for how this can work.

[Brentlok]

Screen.Recording.2026-01-06.at.14.15.56.mov

I still need to perform some more testing but it looks promising

[a16n-dev]

After some further testing, the solution I posted above unfortunately seems to fail in some cases. I've given it a bit more thought and a potential solution could be patching react-native-web, (specifically react-native-web/dist/exports/StyleSheet/dom/createOrderedCSSStyleSheet) through module aliasing in the vite/metro plugin to provide a custom implementation that uses CSS layers.

Here's my stab at it - the reset/base styles from react native web get put into a @layer rnw-base {} while all other styles get put into a @layer rnw-utilities {}.

Patched createOrderedCSSStyleSheet.ts

type Groups = {
  [key: number]: { rules: Array<string> };
};
type Selectors = { [key: string]: boolean };

export type OrderedCSSStyleSheet = {
  getTextContent: () => string;
  insert: (cssText: string, groupValue: number) => void;
};

export default function createOrderedCSSStyleSheet(
  sheet?: CSSStyleSheet,
): OrderedCSSStyleSheet {
  const groups: Groups = {};
  const selectors: Selectors = {};

  /**
   * Hydrate approximate record from any existing rules in the sheet.
   * Assume that the sheet contains only layer rules at the top level
   */
  if (sheet != null) {
    [...sheet.cssRules].forEach((cssLayer) => {
      if (!(cssLayer instanceof CSSLayerBlockRule)) return;
      const rules = [...cssLayer.cssRules];
      const firstRule = rules.shift();
      if (
        !firstRule ||
        firstRule.cssText.indexOf("stylesheet-group") === -1 ||
        !(firstRule instanceof CSSStyleRule)
      ) {
        return;
      }
      const group = decodeGroupRule(firstRule);
      groups[group] = { rules: [firstRule.cssText] };

      rules.forEach((rule) => {
        const cssText = rule.cssText;
        const selectorText = getSelectorText(cssText);
        if (selectorText != null) {
          selectors[selectorText] = true;
          groups[group].rules.push(cssText);
        }
      });
    });
  }

  function sheetInsert(sheet: CSSStyleSheet, group: number, text: string) {
    const orderedGroups = getOrderedGroups(groups);
    const index = orderedGroups.indexOf(group);
    return insertRuleIntoLayer(sheet, text, index);
  }

  return {
    /**
     * The textContent of the style sheet.
     */
    getTextContent(): string {
      return getOrderedGroups(groups)
        .map((group) => {
          const rules = groups[group].rules;
          // Sorting provides deterministic order of styles in group for
          // build-time extraction of the style sheet.
          const marker = rules.shift()!;
          rules.sort();
          rules.unshift(marker);
          return encodeLayerRule(group, rules.join("\n"));
        })
        .join("\n");
    },

    /**
     * Insert a rule into the style sheet
     */
    insert(cssText: string, groupValue: number) {
      const group = Number(groupValue);

      // Create a new group.
      if (groups[group] == null) {
        const markerRule = encodeGroupRule(group);
        // Create the internal record.
        groups[group] = {
          rules: [markerRule],
        };
        // Update CSSOM.
        if (sheet != null) {
          const index = getOrderedGroups(groups).indexOf(group);
          insertLayerRule(sheet, encodeLayerRule(group), index);

          // insert the marker into the layer
          sheetInsert(sheet, group, markerRule);
        }
      }

      // selectorText is more reliable than cssText for insertion checks. The
      // browser excludes vendor-prefixed properties and rewrites certain values
      // making cssText more likely to be different from what was inserted.
      const selectorText = getSelectorText(cssText);
      if (selectorText != null && selectors[selectorText] == null) {
        // Update the internal records.
        selectors[selectorText] = true;
        groups[group].rules.push(cssText);
        // Update CSSOM.
        if (sheet != null) {
          const isInserted = sheetInsert(sheet, group, cssText);
          if (!isInserted) {
            // Revert internal record change if a rule was rejected (e.g.,
            // unrecognized pseudo-selector)
            groups[group].rules.pop();
          }
        }
      }
    },
  };
}

/**
 * Helper functions
 */

function encodeGroupRule(group: number) {
  return `[stylesheet-group="${group}"]{}`;
}

const groupPattern = /["']/g;
function decodeGroupRule(cssRule: CSSStyleRule) {
  return Number(cssRule.selectorText.split(groupPattern)[1]);
}

function encodeLayerRule(group: number, content: string = "") {
  if (group < 2) return `@layer rnw-base {\n${content}\n}`;
  return `@layer rnw-utilities {\n${content}\n}`;
}

function getOrderedGroups(obj: { [key: number]: any }) {
  return Object.keys(obj)
    .map(Number)
    .sort((a, b) => (a > b ? 1 : -1));
}

const selectorPattern = /\s*([,])\s*/g;
function getSelectorText(cssText: string) {
  const selector = cssText.split("{")[0].trim();
  return selector !== "" ? selector.replace(selectorPattern, "$1") : null;
}

function insertLayerRule(
  root: CSSStyleSheet,
  cssText: string,
  position: number,
): boolean {
  try {
    root.insertRule(cssText, position);
    return true;
  } catch (e) {
    // JSDOM doesn't support `CSSStyleSheet#insertRule`.
    // Also ignore errors that occur from attempting to insert vendor-prefixed selectors.
    return false;
  }
}

function insertRuleIntoLayer(
  root: CSSStyleSheet,
  cssText: string,
  index: number,
): boolean {
  try {
    const layerRule = root.cssRules.item(index);
    if (layerRule instanceof CSSLayerBlockRule) {
      layerRule.insertRule(cssText, layerRule.cssRules.length);
      return true;
    }

    return false;
  } catch (e) {
    // JSDOM doesn't support `CSSSMediaRule#insertRule`.
    // Also ignore errors that occur from attempting to insert vendor-prefixed selectors.
    return false;
  }
}

Original react-native-web code for reference

This would also mean that you'll need to declare an explicit layer ordering in globals.css to specify how the rnw layers should merge with the tailwind layers:

@layer theme, base, rnw-base, components, utilities, rnw-utilities;
@import "tailwindcss";
@import 'uniwind';

[Brentlok]

b9eab8f

As I said I need to perform some more testing but I've found solution by resolving custom createOrderedCSSStyleSheet cc @a16n-dev

[theoribbi]

would be happy to help testing.
my app is currently in testing mode for my users so it would be great even if there is some issue.

can you create a release for that @Brentlok ?

[Brentlok]

can you create a release for that @Brentlok ?

I will, most likely tomorrow

[a16n-dev]

@Brentlok thanks for looking into this, happy to help test.

Just testing out the fix linked above, and noticed a few things:

1. RNW also applies some base-level resets targetting body,html. I think these rules might also need be wrapped in the @layer?
2. The original implementation of createOrderedCSSStyleSheet() attempts to parse the styles of any existing stylesheet first (ie if we're injecting the RNW stylesheet for SSR). It gets tripped up when it encounters @layer rnw {...}, because the getSelectorText function will always incorrectly return "@layer rnw". This causes it to skip insertion of any rule wrapped in the layer as it thinks a rule with that selector has already been inserted.

[Brentlok]

1. RNW also applies some base-level resets targetting body,html. I think these rules might also need be wrapped in the @layer?

The problem is in default RNW styles for RN components (View, Text, etc.) because they're overriding tailwind classes because global classes have higher priority than layered one

2. It gets tripped up when it encounters @layer rnw {...}, because the getSelectorText function will always incorrectly return "@layer rnw". This causes it to skip insertion of any rule wrapped in the layer as it thinks a rule with that selector has already been inserted.

Can you share some simple reproduction for that?