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;"

[Gwonwoo-Nam]

This issue occurs due to changes introduced in tailwindcss PR #15003, which adds a fallback to CSS variables.
As a result, when using TailwindCSS version 3.4.15 or later, tailwind.css includes the fallback value, causing the parsing issue as mentioned above.

[cleversonhabiitech]

How solve this issue, guys?

[tero-paananen]

I solve this by patching and this is our latest patch

diff --git a/node_modules/tailwind-rn/dist/lib/evaluate-style.js b/node_modules/tailwind-rn/dist/lib/evaluate-style.js
index e354be9..4525631 100644
--- a/node_modules/tailwind-rn/dist/lib/evaluate-style.js
+++ b/node_modules/tailwind-rn/dist/lib/evaluate-style.js
@@ -6,16 +6,23 @@ const evaluateStyle = (object) => {
     for (const [key, value] of Object.entries(object)) {
         if (!key.startsWith('--')) {
             if (typeof value === 'string') {
-                let newValue = value.replace(/var\(([a-zA-Z-]+)\)/, (_, name) => {
-                    return object[name];
+                // https://github.com/vadimdemedes/tailwind-rn/issues/203
+                let newValue = value.replace(/var\((--?[a-zA-Z-]+)(?:,\s*([^)]+))?\)/g, (_, name, fallback) => {
+                  return object[name] !== undefined ? object[name] : fallback || '';
                 });
+
                 // Convert rgb(0 0 0 / 1) into rgba(0, 0, 0, 1), because
                 // React Native doesn't support the newer format
-                if (newValue !== 'transparent' && newValue.startsWith('rgb(')) {
+                if (newValue.startsWith('rgb(')) {
                     const color = colorString.get.rgb(newValue);
                     if (color) {
                         newValue = `rgba(${color[0]}, ${color[1]}, ${color[2]}, ${color[3]})`;
                     }
+                } else if (newValue.startsWith('rgba(')) {
+                    const color = colorString.get.rgba(newValue);
+                    if (color) {
+                        newValue = `rgba(${color[0]}, ${color[1]}, ${color[2]}, ${color[3]})`;
+                    }
                 }
                 newObject[key] = newValue;
             }