Nominally Patriotic Meathead

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

    4.2.0 • Public • Published

    React Native Style Tachyons

    npm version license semver build status total townloads


    React Native Style Tachyons brings functional styling to react-native. It is inspired by Tachyons and uses it's scales and naming convention. More about the advantages of this approach.

    Let's see how tachyons compares to traditional styling:

    1. Traditional react-native style:
    import {StyleSheet} from "react-native";
    const s = StyleSheet.create({
      view: {
        borderWidth: 1,
        justifyContent: "flex-start",
        padding: MAGIC_PIXEL_VALUE
      text: {
        color: "white",
        textAlign: "center"
    <View style={[s.view]}
       <Text style={[s.text]}>Something</Text>
    2. Improved with react-native-style-tachyons:
    import {styles as s} from "react-native-style-tachyons";
    <View style={[, s.jcfs, s.pa2]}>     /* 'ba' means border-all */
       <Text style={[s.white,]}>
    3. or even simpler:
    <View cls="ba jcfs pa2">                 /* string is checked for validity */
       <Text cls="white tc">

    Of course you can use your old styles along tachyons' classes.


    • Less code
    • No need to maintain a separate stylesheet
    • No need to find a proper name for every component you want to style
    • Looking at a component tells you exactly how it looks, it's all in one place.

    Tachyons' scale

    • Dimensions and typography build on a proven scale, which is relative to rem, the root font-size. Instead of having to find proper values for padding (or margin, width or height), you use a simple 7-step scale. pa2 gets you padding of 0.5rem.

    • The scale progresses with powers of two, so each step is twice as big as the last. This means everything will always line up, no more "off-by-one-pixel"-problems.

    • You can scale the entire design just by setting a different rem. This is a great advantage when building a responsive app.

      More about Tachyons' spacing

      More about Tachyons' typography

    • The optional fontRem parameter scales the font sizes independently of other styles.


    react-native-style-tachyons needs to know your rem upon start:

    1. In the entry point of your app include:

      import NativeTachyons from 'react-native-style-tachyons';
      import { StyleSheet } from 'react-native';
          /* REM parameter is optional, default is 16 */
          rem: screenWidth > 340 ? 18 : 16,
          /* fontRem parameter is optional to allow adjustment in font-scaling. default falls back to rem */
          fontRem: 20
      }, StyleSheet);

      ##### Sensible rem/fontRem values Experience with variously sized iPhone and Android phones from 4" to 6" displays showed, that for tablets, rem values in the range of 12 - 18, depending on device resolution, work well. For phones, the same rem can be used, but fontRem should be floored at 14, to keep everything readable.

    2. To use the styles

      import { styles as s } from "react-native-style-tachyons";

      To support javascript property syntax, all style names with hyphens have an equivalent with an underscore, e.g. s.bg_black instead of s["bg-black"].

    3. To use the cls='' syntax, you have to wrap your component:

      import NativeTachyons from "react-native-style-tachyons";
          class MyComponent extends React.Component {
      /* or if you use simple functions */
      NativeTachyons.wrap(() => <Text cls="b">Hi there!</Text>)

      If you prefer to use a different propName instead of cls, specify the name in the options:{
          clsPropName: "cls"
      }, StyleSheet);

    Reference / Supported Properties

    absolute               position: "absolute"                 /* default: "relative" */
    flx-i                  flex: 1
    flx-row                flexDirection: "row"                 /* default: "column" */
    flx-row-reverse        flexDirection: "row-reverse"
    flx-col-reverse        flexDirection: "column-reverse"
    flx-wrap               flexWrap: "wrap"                     /* default: "nowrap" */
    aifs                   alignItems: "flex-start"             /* default: "stretch" */
    aic                    alignItems: "center"
    aife                   alignItems: "flex-end"
    jcc                    justifyContent: "center"             /* default: "flex-start" */
    jcfe                   justifyContent: "flex-end"
    jcsb                   justifyContent: "space-between"
    jcsa                   justifyContent: "space-around"
    asfs                   alignSelf: "flex-start"
    asfe                   alignSelf: "flex-end"
    asc                    alignSelf: "center"
    ass                    alignSelf: "stretch"
    Margins & Paddings (Scale)
    ma0 ... ma8            margin: 0|0.25|0.5|1|2|4|8|16|32 rem
    ml|mr|mb|mt [0-8]      marginLeft, marginRight, marginBottom, marginTop
    mh [0-8]               marginHorizontal
    mv [0-8]               marginVertical
    /* Same with p for padding */
    Heights & Widths
    h1 ... h6              height: 1|2|4|8|16|32 rem
    w1 ... w6              width: 1|2|4|8|16|32 rem
    min-h1 ... min-h6      minHeight: 1|2|4|8|16|32 rem
    max-h1 ... max-h6      maxHeight: 1|2|4|8|16|32 rem
    absolute                     position: absolute
    top|right|bottom|left-0      top|right|bottom|left: 0 rem
                      ... 1                         ... 1 rem
                      ... 2                         ... 2 rem
    absolute-fill                position: absolute, top/left/right/bottom: 0
    ba                     borderWidth: 1
    bl|br|bt|bb            borderLeftWidth: 1 | borderRightWidth: 1...
    br0 ... br5            borderRadius: 0|0.125|0.25|0.5|1]2 rem
    br--bottom             bottom radius only
    br--top                top radius only
    br--right              right radius only
    br--left               left radius only
    Text & Fonts (Scale)
    f5                     fontSize: 1 rem
    f1 ... f6              fontSize: 3|2.25|1.5|1.25|1|0.875 rem
    f-headline             fontSize: 6 rem
    f-subheadline          fontSize: 5 rem
    normal                 fontWeight: normal
    b                      fontWeight: bold
    fw1 ... fw9            fontWeight: 100 ... fontWeight: 900
    i                      fontStyle: italic
    tl|tc|tr|tj            textAlign: left|center|right|justify
    lh-solid               lineHeight: 1 rem
    lh-title               lineHeight: 1.25 rem
    lh-copy                lineHeight: 1.5 rem
    /* Letter-spacing is only supported on iOS */
    tracked                letterSpacing:  0.1 rem
    tracked-tight          letterSpacing: -0.05 rem
    tracked-mega           letterSpacing:  0.25 rem
    no-underline           textDecorationLine: "none"
    strike                 textDecorationLine: "line-through"
    underline              textDecorationLine: "underline"
    strike-underline       textDecorationLine: "underline line-through"

    Specify the font-families you need in the configuration to use them:

    ff-iowan               fontFamily: "Iowan Old Style"
    /* setup: */{
        fonts: {
            iowan: 'Iowan Old Style'
    }, StyleSheet);

    Note: For weights on custom fonts to work correctly you have to name them like this (reference):

    rm-contain             resizeMode: "contain"
    rm-cover               resizeMode: "cover"
    rm-stretch             resizeMode: "stretch"
    tint-$color            tintColor: $color, see Colors section
    o-10|20|...|100        opacity: 0.1|0.2|...|1
    o-05                   opacity: 0.05
    o-025                  opacity: 0.025


    • When using the cls='' syntax, colors can be specified directly in the string. Every Color supported by react-native works. If the color is prefixed with bg- the backgroundColor will be set. A prefix of b-- sets the borderColor.

      bg-green                     green background
      #232323                      text color of #232323
      b--rgba(255,255,255,0.5)     border set to rgba(255,255,255,0.5)
      tint-blue                    tint-color set to blue
    • You can also specify a palette in the options and Tachyons will generate styles for you. It will also generate variants with different opacities.{
         colors: {
            palette: {
               green: "#00FF00",
      }, StyleSheet);

      The same syntax with bg- for background and b-- for borderColor applies.

      bg-green                green background
      b--green                green border        // Note: double hyphens signify a class that needs
      green                   green text          // another class to work in this case a border-setting
      /* alpha variants (same for bg- and b--) */
      green-10, green-20 ... green-90       green text with 10%, 20%, ... , 90% alpha


    • You can specify the typescale in the options and Tachyons will generate the font sizes for you.{
        typeScale: {
            f1: '1.625',
            f2: '1.375',
            f3: '1.125',
            f4: '0.9375',
            f5: '0.8125',
            f6: '0.75',
            f7: '0.625',
        rem: 16,
    }, StyleSheet);

    This will result in font sizes of:

        f1: 26,
        f2: 22,
        f3: 18,
        f4: 15,
        f5: 13,
        f6: 12,
        f7: 10,

    Custom Styles

    You can add custom styles you may need to the configuration at startup.

    /* setup: */{
        customStyles: {
            myCustomBW: {
            borderWidth: 2
    }, StyleSheet);

    Raw Values

    To access the actual computed sizes:

    import { sizes } from "react-native-style-tachyons"
    const s = sizes.ma2          /* sizes.w4, ... */


    See the ChangeLog


    npm i react-native-style-tachyons

    DownloadsWeekly Downloads






    Unpacked Size

    212 kB

    Total Files


    Last publish


    • fab1an