Purge function will conflict with getColor

[Rynxiao]

Issue

When I use getColor in my code and have purge turned on

// tailwind.config.js
module.exports = {
    purge: {
        enabled: true,
        content: ['../../src/**/*.ts', '../../src/**/*.tsx']
    },
    // ...
}

Since tailwind does not support border colors by default, so I had to go the extra mile and use the method provided by RN.

At this point, I need to use getColor.

// PageA.styles.ts
const styles = StyleSheet.create({
    container: {
        ...tailwind('w-11 h-11 bg-black text-white'),
        borderTopColor: getColor("blue-500")
    }
})

But after I used purge, tailwind scans for CSS classes that are already in use by default, so blue-500 is not recognized and is not packed into styles.json.

That's the problem.

Solutions

getColor can be declared using tailwind's own

// PageA.styles.ts
const styles = StyleSheet.create({
    container: {
        ...tailwind('w-11 h-11 bg-black text-white'),
        borderTopColor: getColor("bg-blue-500 bg-opacity-50")
    }
})

So the getColor function will be like

// Pass the name of a color (e.g. "bg-blue-500") and receive a color value (e.g. "#4399e1"),
// or a color and opacity (e.g. "bg-black bg-opacity-50") and get a color with opacity (e.g. "rgba(0,0,0,0.5)")
const getColor = name => {
    const style = tailwind(name);
    return style.backgroundColor;
};

[christoph-kluge]

Just stumbled upon this issue. This becomes very quickly visible when enabling JIT mode and using getColor('gray-200') as the color is not recognized. Linking #71 to it.

[vadimdemedes]

@Rynxiao Thanks for reporting it and working on this PR! I actually already fixed it in v4 branch, where I'm working on a major new release. I'm aiming to release it this week.