react-native-tailwindcss
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.11 • Public • Published

    react-native-tailwindcss npm npm docs

    A react-native styling system, based on TailwindCSS

    Easily apply styles to react native components in a tailwindCSS-like fashion. The utility classes are transformed to valid object names and are all children of an object ( t, tw, theme or tailwind).

    import { t } from 'react-native-tailwindcss';
     
    <View style={[t.absolute, t.inset0, t.p4, t.bgBlue500]} />

    Use the tailwind.config.js file you know and love, to customize your styles or just use default tailwind styles.

    In react native, sometimes you only need a color value. We've got you covered. The color object contains all your defined colors.

    import { color } from 'react-native-tailwindcss';
     
    <StatusBar backgroundColor={color.blue500} />

    React native has no default css styling so there are some special cases. Some elements like breakpoints, plugins, corePlugin disabling, prefixes, separators, variation and the important toggle are not necessary and are ignored.

    You should also take a look at some special cases:

    Usage

    Install this package

    # Using npm
    npm install react-native-tailwindcss
    
    # Using Yarn
    yarn add react-native-tailwindcss
    

    Then initialize a new tailwindCSS config file

    npx RNtailwindcss
    

    or use an existing one.

    Usage with styled-components

    react-native-tailwindcss plays nicely with the popular styled-components library.

    Simply use the array syntax within the interpolated template literal:

    import { Text, View } from 'react-native';
    import { t } from 'react-native-tailwindcss';
    import styled from 'styled-components/native';
     
    const SView = styled(View)`
      ${[t.mB4, t.bgGray200, t.rounded, t.p3]}
    `;
     
    <SView>
      <Text>Some unstyled text in a styled view</Text>
    </SView>

    General Conventions

    Every 'class' uses the camelCase naming convention instead of tailwindCSS's kebab-case.

    border-t-2 => t.borderT2
    

    A - in the beginning of a 'class' becomes a _.

    -mt-2 => t._mT2
    

    A / also becomes a _ to separate the numbers.

    w-1/3 => t.w1_3
    

    Special cases

    Shadows

    • Android does not use the shadow props to cast shadows, just an elevation value.

      • The elevation value is by default the shadowRadius / 2
      • It can be changed by adding the elevation value after the shadow separated by a ,.
        (eg.: default: '0 1px 3px 0 rgba(0, 0, 0, .1), 5')
    • Text shadows use the same shadows as box shadows

    • Multiple shadows are not supported in React native. (the first shadow will be used)

    • inner and outline shadows are ignored

    Directional Layout

    When you need directional layout, React Native offers some variations to make life easier. Instead of using 'left' or 'right', 'start' and 'end' can be used.

    react-native-tailwindcss offers classes to embrace this way of directional layout. Every 'class' with L or R, also has a corresponding S and E 'class' for start and end.

    Testing

    npm run test
    

    Install

    npm i react-native-tailwindcss

    DownloadsWeekly Downloads

    824

    Version

    1.1.11

    License

    ISC

    Unpacked Size

    130 kB

    Total Files

    71

    Last publish

    Collaborators

    • tvke