How to use Tailwind (NativeWind) with Expo

I ❤️ using Tailwind with React. It's a great way to build UIs quickly and consistently.

To use it in our Expo project we are going to use NativeWind (opens in a new tab)

To install it, run:

yarn add nativewind
yarn add --dev tailwindcss@3.3.2


npx tailwindcss init

This generates your tailwind.config.js file.

Add this to your babel.config.js file:

// tailwind.config.js
module.exports = {
- content: [],
+ content: ["./app/**/*.{js,jsx,ts,tsx}", "./<custom directory>/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  plugins: [],

Add this babel plugin:

// babel.config.js
module.exports = function (api) {
  return {
    presets: ['babel-preset-expo'],
    plugins: [+'nativewind/babel'],

Now reset your Expo server and you should be good to go!