DEV Community

Cover image for How to setup Tailwind css to your Expo project
Subhraneel
Subhraneel

Posted on

How to setup Tailwind css to your Expo project

Hello everynyan, here i come again!
So this time me and my friend were building a ticketing app with Expo and needed TailwindCSS. Turns out, Expo uses something called NativeWind which is basically tailwind for app dev.

The problem?
We noticed that there was no straight-forward docs for NativeWind setup in expo, so I decided why not make a simple straight-forward blog on this. Okay enough yapping

Lets start :)

If you haven't already, just setup an expo project by running

npx create-expo-app@latest
Enter fullscreen mode Exit fullscreen mode

After thats done, run these 2 commands

npm install nativewind
npm install -D tailwindcss
Enter fullscreen mode Exit fullscreen mode

this basically adds nativewind as a dependency and tailwindcss as a dev-dependecy in your project

Now run this

npx tailwindcss init
Enter fullscreen mode Exit fullscreen mode

this will generate a tailwind.config.js file in your project at the root level

Replace the content of your tailwind.config.js file with this:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./App.tsx", "./components/**/*.{js,jsx,ts,tsx}", "./app/**/*.{js,jsx,ts,tsx}"],
  presets: [require("nativewind/preset")],
  theme: { extend: {} },
  plugins: [],
};
Enter fullscreen mode Exit fullscreen mode

We are almost done :)

Now create a babel.config.js file (needed for nativewind to work properly)

and then add this in the babel file:

module.exports = function (api) {
  api.cache(true);
  return {
    presets: [
      ["babel-preset-expo", { jsxImportSource: "nativewind" }],
      "nativewind/babel",
    ],
  };
};
Enter fullscreen mode Exit fullscreen mode

Now for expo to get all the styles create this file : metro.config.js and add this code into the file:

const { getDefaultConfig } = require("expo/metro-config");
const { withNativeWind } = require("nativewind/metro");

const config = getDefaultConfig(__dirname);

module.exports = withNativeWind(config, { input: "./global.css" });
Enter fullscreen mode Exit fullscreen mode

And its done! Now you can simple do this and your styles will get updated instantly

className="flex-1 items-center justify-center bg-blue-500"
Enter fullscreen mode Exit fullscreen mode

I have create a Expo + Tailwind starter boilerplate, here's the repo if you want
subhraneel2005/Expo-Tailwind-Starter

If you found this helpful do connect. Would love to chat :)
Heres my twitter acc: x.com/subhraneeltwt

Top comments (1)

Collapse
 
agent_69 profile image
Subhraneel •

feedbacks are appreciated :)