Skip to content

Commit 0327860

Browse files
committed
fix: add missing border width to README example
Add 'border' class to example using border-blue-700 so the border actually renders. Without border width, border color has no effect.
1 parent 916f9bf commit 0327860

File tree

1 file changed

+12
-8
lines changed

1 file changed

+12
-8
lines changed

README.md

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -112,23 +112,27 @@ The Babel plugin transforms your code at compile time:
112112
**Input** (what you write):
113113

114114
```tsx
115-
<View className="m-4 p-2 bg-blue-500 rounded-lg" />
115+
<View className={`rounded-lg p-4 ${isSelected ? "bg-blue-500 border border-blue-700" : "bg-gray-200"}`} />
116116
```
117117

118118
**Output** (what Babel generates):
119119

120120
```tsx
121121
import { StyleSheet } from "react-native";
122122

123-
<View style={_twStyles._bg_blue_500_m_4_p_2_rounded_lg} />;
123+
<View
124+
style={[
125+
_twStyles._rounded_lg,
126+
_twStyles._p_4,
127+
isSelected ? _twStyles._bg_blue_500_border_border_blue_700 : _twStyles._bg_gray_200,
128+
]}
129+
/>;
124130

125131
const _twStyles = StyleSheet.create({
126-
_bg_blue_500_m_4_p_2_rounded_lg: {
127-
margin: 16,
128-
padding: 8,
129-
backgroundColor: "#3B82F6",
130-
borderRadius: 8,
131-
},
132+
_rounded_lg: { borderRadius: 8 },
133+
_p_4: { padding: 16 },
134+
_bg_blue_500_border_border_blue_700: { backgroundColor: "#3B82F6", borderWidth: 1, borderColor: "#1D4ED8" },
135+
_bg_gray_200: { backgroundColor: "#E5E7EB" },
132136
});
133137
```
134138

0 commit comments

Comments
 (0)