Theme

Nativewind uses the same theme values as as Tailwind CSS. You can read more about how to configure your project through the Tailwind CSS documentation.

Fully dynamic React Native applications often make use of helper functions such as Platform.select and PixelRatio. Nativewind exports helpers allowing you to embed these functions into your theme.

platformSelect

platformSelect is the equivalent to Platform.select().

// tailwind.config.js
 
const { platformSelect } = require("nativewind/theme");
 
module.exports = {
  theme: {
    extend: {
      colors: {
        error: platformSelect({
          ios: "red",
          android: "blue",
          default: "green",
        }),
      },
    },
  },
};

platformColor()

Equivalent of PlatformColor. Typically used with platformSelect.

const { platformColor } = require("nativewind/theme");
 
module.exports = {
  theme: {
    extend: {
      colors: {
        platformRed: platformSelect({
          android: platformColor("systemRed"),
          web: "red",
        }),
      },
    },
  },
};

hairlineWidth()

Equivalent of StyleSheet.hairlineWidth

const { hairlineWidth } = require("nativewind/theme");
 
module.exports = {
  theme: {
    extend: {
      borderWidth: {
        hairline: hairlineWidth(),
      },
    },
  },
};

pixelRatio()

Equivalent of PixelRatio.get(). If a number is provided it returns PixelRatio.get() * <value>, otherwise it returns the PixelRatio value.

const { pixelRatio } = require("nativewind/theme");
 
module.exports = {
  theme: {
    extend: {
      borderWidth: {
        number: pixelRatio(2),
      },
    },
  },
};

pixelRatioSelect()

A helper function to use PixelRatio.get() in a conditional statement, similar to Platform.select.

const { pixelRatio, hairlineWidth } = require("nativewind/theme");
 
module.exports = {
  theme: {
    extend: {
      borderWidth: pixelRatioSelect({
        2: 1,
        default: hairlineWidth(),
      }),
    },
  },
};

fontScale()

Equivalent of PixelRatio.getFontScale(). If a number is provided it returns PixelRatio.getFontScale() * <value>, otherwise it returns the PixelRatio.getFontScale() value.

const { fontScale } = require("nativewind/theme");
 
module.exports = {
  theme: {
    extend: {
      fontSize: {
        custom: fontScale(2),
      },
    },
  },
};

fontScaleSelect()

A helper function to use PixelRatio.getFontScale() in a conditional statement, similar to Platform.select.

const { fontScaleSelect, hairlineWidth } = require("nativewind/theme");
 
module.exports = {
  theme: {
    extend: {
      fontSize: {
        custom: fontScaleSelect({
          2: 14,
          default: 16,
        }),
      },
    },
  },
};

getPixelSizeForLayoutSize()

Equivalent of PixelRatio.getPixelSizeForLayoutSize()

const { getPixelSizeForLayoutSize } = require("nativewind");
 
module.exports = {
  theme: {
    extend: {
      size: {
        custom: getPixelSizeForLayoutSize(2),
      },
    },
  },
};

roundToNearestPixel()

Equivalent of PixelRatio.roundToNearestPixel()

const { roundToNearestPixel } = require("nativewind/theme");
 
module.exports = {
  theme: {
    extend: {
      size: {
        custom: roundToNearestPixel(8.4)
      },
    },
  },
});

Theme

On this page