color classes not being applied

[gixxy22]

I have followed several examples but I cant seem to get the colors to apply, any help appreciated.

I dont get any errors, but the colors/styles do not apply.

This code:

<Text style={tailwind("text-red-600")}>Hello world</Text>

converts to this in tailwind.css:

.text-red-600 { --tw-text-opacity: 1; color: rgb(220 38 38 / var(--tw-text-opacity, 1)) }

which does not output the text to red, if i manually change tailwind.css to this:

.text-red-600 { --tw-text-opacity: 1; color: #FF0000 }

it works and updates the text to red. all the examples seem to suggest that text colors are supported so im unsure what im doing wrong?

heres my files:

[tero-paananen]

What is your React Native version?

I seem to have this issue on React Native 0.76.6. Styles works on 0.74.6.

This does not anymore work on RN

    "style": {
      "--tw-border-opacity": 1,
      "borderTopColor": "rgb(29 59 209 / var(--tw-border-opacity, 1))",

This seems to work

    "style": {
      "borderTopColor": "rgb(29 59 209)",

[tero-paananen]

Maybe same issue mentioned here facebook/react-native#47235

[thomasviaud]

The problem is that in evaluate-style.js the regex to replace variable is not working anymore because default value has been introduced (by tailwind?).

The line to fix is here:

let newValue = value.replace(/var\(([a-zA-Z-]+)\)/, (_, name) => {
                    return object[name];
                });

We should also extract and handle default value.
Before : background-color: rgb(163 230 53 / var(--tw-bg-opacity))
Now : background-color: rgb(163 230 53 / var(--tw-bg-opacity, 1))

[tero-paananen]

I asked Chat GPT to fix fallback and result is

let newValue = value.replace(/var\((--?[a-zA-Z-]+)(?:,\s*([^)]+))?\)/g, (_, name, fallback) => {
    return object[name] !== undefined ? object[name] : fallback || '';
});

and looks good. App looks again quite valid.

This works for example

// tailwind.css
.border-error {
  --tw-border-opacity: 1;
  border-color: rgb(218 65 103 / var(--tw-border-opacity, 1))
}

// tailwind.json
  "border-error": {
    "style": {
      "--tw-border-opacity": 1,
      "borderColor": "rgb(218 65 103 / var(--tw-border-opacity, 1))"
    }
  },

[tero-paananen]

More from Chat GPT answer

• If the variable name exists in the object, it replaces it with the corresponding value.
• If the variable is not found, it falls back to the provided default value.
• If no fallback is provided and the variable is missing, it replaces it with an empty string.

const value = "color: var(--text-color, black); opacity: var(--tw-bg-opacity, 1); padding: var(--spacing);";
const object = {
  "--text-color": "#333",
  "--spacing": "10px"
};

let newValue = value.replace(/var\((--?[a-zA-Z-]+)(?:,\s*([^)]+))?\)/g, (_, name, fallback) => {
    return object[name] !== undefined ? object[name] : fallback || '';
});

console.log(newValue);
// Output: "color: #333; opacity: 1; padding: 10px;"