How to setup Tailwind css to your Expo project

Subhraneel — Wed, 13 Aug 2025 10:58:53 +0000

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

After thats done, run these 2 commands

npm install nativewind
npm install -D tailwindcss

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

Now run this

npx tailwindcss init

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: [],
};

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",
    ],
  };
};

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" });

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"

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

How to add auth-flow between your webapp and extension

Subhraneel — Wed, 06 Aug 2025 05:44:23 +0000

Hey everyone! 👋

So I just wrapped up this really cool project and wanted to share what I learned. I got to work on a fullstack Chrome extension for a US company, and honestly, it was such a fun challenge!

The Challenge

They needed a Chrome extension with some pretty neat features:

Auto-apply to LinkedIn jobs
AI integration for those tricky application questions
Auto-fill for external job forms
Smart keyword matching
And a bunch of other cool stuff

We ended up going with Plasmo for the extension framework - honestly its the best out there to build chrome extensions: https://www.plasmo.com/

The Real Fun Part

Here's where things got interesting. After building the extension, they wanted it to sync seamlessly with their main website through JWT auth. The tricky part? How do we actually know if someone's logged in on the website from inside the extension?

My Solution (Pretty Simple Actually)

So Plasmo gives you these two main pieces to work with:

content.tsx
background.ts

Step 1: Capture the token in your webapp
In your React/Next.js app, find where you're handling the login POST request. If you're using Zustand or any global store, even better - just grab it from there.

Once you have the authToken, create a 'use client' component and add this:

window.postMessage(
  {
    source: "your-webapp-name",
    type: "AUTH_TOKEN",
    token: authToken // Your actual token here
  },
  "*"
)

This basically broadcasts the token from your webapp to the extension.

Step 2: Listen in the content script
In your extension's content.tsx, set up a listener:

const postMessageListener = (event: MessageEvent) => {
  if (
    event.source !== window ||
    !event.data ||
    event.data.source !== "your-webapp-name" ||
    event.data.type !== "AUTH_TOKEN"
  ) {
    return
  }

  const token = event.data.token
  chrome.runtime.sendMessage({
    type: "SAVE_AUTH_TOKEN",
    token
  })
}

Step 3: Store it in the background
Finally, in your background.ts:

if (message.type === "SAVE_AUTH_TOKEN") {
  console.log("Got the token!", message)
  chrome.storage.local.set({ authToken: message.token }, () => {
    console.log("Token safely stored:", message.token)
    sendResponse({ success: true })
  })
  return true // Keep the response channel open
}

And That's It! 🎉

Three simple steps and voila - your extension and webapp are synced seamlessly.
The cool part is you can extend this pattern for logout events, profile updates, or really anything you need to sync between the two.

I'm honestly still amazed at how clean this solution turned out. Sometimes the simplest approaches work the best!

If you have any suggestions or feedback, please comment below, would love to know and learn more about this!

Happy coding guys :)

btw this is me debugging the code ai generates🙂

DEV Community: Subhraneel