https://github.com/evanbacon/expo-router-tailwind-demo
Demo of using Expo Router with Tailwind in a website bundled using Metro
https://github.com/evanbacon/expo-router-tailwind-demo
expo-router metro react-native tailwind
Last synced: 3 months ago
JSON representation
Demo of using Expo Router with Tailwind in a website bundled using Metro
- Host: GitHub
- URL: https://github.com/evanbacon/expo-router-tailwind-demo
- Owner: EvanBacon
- Created: 2023-05-10T14:37:48.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-07-12T10:14:16.000Z (almost 2 years ago)
- Last Synced: 2025-03-19T07:32:39.635Z (3 months ago)
- Topics: expo-router, metro, react-native, tailwind
- Language: JavaScript
- Homepage: https://expo-tailwind.netlify.app/
- Size: 608 KB
- Stars: 53
- Watchers: 3
- Forks: 2
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Expo Router Tailwind web Example
Use [`expo-router`](https://expo.github.io/router) with [`tailwind`](https://tailwindcss.com) in Metro web apps.
This approach does nothing on native as native does not currently support CSS.
## How it works
> This project is Expo SDK +49
1. The Tailwind CLI is started in the `metro.config.js` file, this is where file watching and updating happens.
2. The `index.js` optionally imports the evaluated CSS file from tailwind CLI. This ensures that HMR updates are applied, and the CSS is bundled.
3. A `global.css` file adds the requisite utility classes for Tailwind to work.
4. The `metro.config.js` has experimental Expo CSS enabled.
5. The `app.json` has `web.bundler` set to `metro`.
## 📝 Notes
- [Expo Router: Docs](https://expo.github.io/router)
- [Expo Router: Repo](https://github.com/expo/router)
- [Request for Comments](https://github.com/expo/router/discussions/1)