DOCSEARCHbyAlgolia
Submit Docs

react-native-tailwindcss

repository·master·Indexed 20 days ago

https://github.com/tvke/react-native-tailwindcss

A styling system for React Native that translates TailwindCSS utility classes into camelCase objects. It supports kebab-case to camelCase conversion, integration with styled-components/native, and platform-specific shadow handling for Android elevation. The library provides utility classes for background colors, border colors, border radius, and border styles, while supporting directional layout (start/end) for RTL/LTR compatibility.

Tokens
36K
Snippets
148
Records
166
Agent score
69%

What's inside react-native-tailwindcss

  2. Class conversion rules from Tailwind CSS to react-native-tailwindcss

    master

    Because react-native-tailwindcss uses a JavaScript object-based styling system rather than standard CSS strings, Tailwind CSS classes are translated into CamelCase properties. When using the library, you must use these translated property names instead of the standard Tailwind CSS hyphenated strings.

    Conversion Rules:

    1. Hyphens to CamelCase: Standard - separated classes become CamelCase.
      • Example: border-t-1 $\rightarrow$ t.borderT1
    2. Leading Hyphens: A - at the start of a class is converted to an underscore _.
      • Example: -mt-4 $\rightarrow$ t._mT4
    3. Directional Attributes: Directional attributes (like x, y, t, b, l, r) are capitalized for consistency.
      • Example: inset-x-0 $\rightarrow$ t.insetX0
      • Example: pb-2 $\rightarrow$ t.pB2
      • Example: mt-3 $\rightarrow$ t.mT3
    4. Fractions: The / character used in fractions is converted to an underscore _ to separate numbers.
      • Example: w-1/5 $\rightarrow$ t.w1_5

    These rules also apply to any custom items you add to your configuration file.

    // Tailwind CSS: border-t-1
// react-native-tailwindcss:
t.borderT1

// Tailwind CSS: -mt-4
// react-native-tailwindcss:
t._mT4

// Tailwind CSS: inset-x-0
// react-native-tailwindcss:
t.insetX0

// Tailwind CSS: w-1/5
// react-native-tailwindcss:
t.w1_5

  3. Round specific sides or corners

    master

    You can target specific sides or corners of an element by inserting a direction identifier between rounded and the size suffix.

    Rounding Sides

    Use rounded{Side}{Size?} where Side is:

    • T (Top)
    • R (Right)
    • B (Bottom)
    • L (Left)
    • S (Start - LTR: Left, RTL: Right)
    • E (End - LTR: Right, RTL: Left)

    Example: t.roundedTLg (Top Left Large)

    Rounding Corners

    Use rounded{Corner}{Size?} where Corner is:

    • Tl (Top Left)
    • Tr (Top Right)
    • Br (Bottom Right)
    • Bl (Bottom Left)
    • Ts (Top Start)
    • Te (Top End)
    • Bs (Bottom Start)
    • Be (Bottom End)

  5. Use directional layout (Start/End) instead of Left/Right

    master

    To support RTL (Right-to-Left) layouts effectively, React Native recommends using 'start' and 'end' instead of 'left' and 'right'.

    react-native-tailwindcss provides corresponding classes for this. For every class that uses L (Left) or R (Right), there is a matching S (Start) or E (End) class.

    Example mapping:

    • L (Left) $\rightarrow$ S (Start)
    • R (Right) $\rightarrow$ E (End)

  6. Understand the default spacing scale

    master

    By default, react-native-tailwindcss uses a proportional numeric spacing scale.

    • Base Unit: One spacing unit is equal to 0.25rem (which typically translates to 4px).
    • Proportionality: Values are relative; for example, a spacing value of 16 provides twice as much space as 8.
    • Shared Utilities: This scale is shared across padding, margin, width, and height utilities.

  7. Set border width using directional utilities

    master

    For layouts that need to support different text directions (LTR/RTL), use directional utilities. These map to logical start/end properties rather than fixed left/right properties.

    Directional Keys:

    • S (Start): Maps to borderStartWidth (Left in LTR, Right in RTL).
    • E (End): Maps to borderEndWidth (Right in LTR, Left in RTL).
    • X (Horizontal): Maps to both borderRightWidth and borderLeftWidth.
    • Y (Vertical): Maps to both borderTopWidth and borderBottomWidth.
    • T (Top): Maps to borderTopWidth.
    • R (Right): Maps to borderRightWidth.
    • B (Bottom): Maps to borderBottomWidth.
    • L (Left): Maps to borderLeftWidth.

    Behavior in LTR vs RTL:

    • In LTR: t.borderS2 sets borderLeftWidth: 2; t.borderE2 sets borderRightWidth: 2.
    • In RTL: t.borderS2 sets borderRightWidth: 2; t.borderE2 sets borderLeftWidth: 2.
    // Directional examples
t.borderS2 // borderStartWidth: 2
t.borderE2 // borderEndWidth: 2

  8. Use directional padding (Start/End)

    master

    For layouts that need to support both Left-to-Right (LTR) and Right-to-Left (RTL) directions, use directional padding tokens instead of fixed L (Left) or R (Right) tokens.

    • S (Start): Applies to the left in LTR and the right in RTL.
    • E (End): Applies to the right in LTR and the left in RTL.

    Example:

    • In LTR: t.pS8 applies paddingLeft: 32.
    • In RTL: t.pS8 applies paddingRight: 32.
    t.pS8 // padding start
t.pE2 // padding end

  9. Use directional positioning for LTR and RTL support

    master

    For layouts that need to support different text directions (Left-to-Right vs Right-to-Left), use t.start0 and t.end0 instead of left and right.

    • In LTR (Left-to-Right): t.start0 maps to left and t.end0 maps to right.
    • In RTL (Right-to-Left): t.start0 maps to right and t.end0 maps to left.
    // LTR behavior
<View className="absolute t.start0 t.top0" /> // Anchors to left
<View className="absolute t.end0 t.top0" />   // Anchors to right

// RTL behavior
<View className="absolute t.start0 t.top0" /> // Anchors to right
<View className="absolute t.end0 t.top0" />   // Anchors to left

  10. Configure core style plugins

    master

    You can configure specific core plugins by using keys that match the style name. The keys in your configuration determine the suffix for the generated classes, and the values determine the actual property value.

    Using a key named default creates a class with no suffix (e.g., rounded instead of rounded-sm).

    // tailwind.config.js
module.exports = {
  theme: {
    borderRadius: {
      'none': '0',
      'sm': '.125rem',
      default: '.25rem',
      'lg': '.5rem',
      'full': '9999px',
    },
  }
}
// This generates classes like:
// t.roundedNone { borderRadius: 0 }
// t.roundedSm   { borderRadius: 2 }
// t.rounded      { borderRadius: 4 }

  11. Define colors using nested object syntax

    master

    You can define colors as simple key-value pairs or use a nested object notation. In the nested notation, keys act as modifiers to the base color name.

    Special Key: default The default key is a special modifier that represents the base color with no modifier.

    Class Generation

    • indigo: '#5c6ac4' $\rightarrow$ .textIndigo, .bgIndigo, .borderIndigo
    • indigo: { lighter: '#b3bcf5', default: '#5c6ac4' } $\rightarrow$ .textIndigoLighter, .textIndigo

    Important: Using theme() with nested colors When accessing nested colors via the theme() function, you must use dot notation. Do not use dashes or camelCase.

    • ✅ theme('colors.blue.500')
    • ❌ theme('colors.blue-500')
    // tailwind.config.js
module.exports = {
  theme: {
    colors: {
      indigo: {
        lighter: '#b3bcf5',
        default: '#5c6ac4',
        dark: '#202e78',
      }
    }
  }
}

  12. Understand React Native layout defaults and limitations

    master

    Because React Native uses the Yoga engine, it follows specific Flexbox rules that differ from standard web CSS:

    • Default Display: Every element is display: flex.
    • Default Direction: The whole layout is flex-direction: column.

    Troubleshooting Tip: If a layout looks unexpected, try applying t.flex1 to the element to ensure it occupies the intended space.