How to use Tailwind (NativeWind) with Expo

Reilly,9/1/2023•react native typescript tailwind

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

To install it, run:


yarn add nativewind
yarn add --dev tailwindcss@3.3.2

Run:


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) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [+'nativewind/babel'],
  };
};

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