https://github.com/shervin-ghajar/react-native-stylewind
react-native-stylewind is a utility-first styling framework specifically designed for React Native.
https://github.com/shervin-ghajar/react-native-stylewind
css design-system react-native reactnative styled-components tailwindcss
Last synced: about 1 year ago
JSON representation
react-native-stylewind is a utility-first styling framework specifically designed for React Native.
- Host: GitHub
- URL: https://github.com/shervin-ghajar/react-native-stylewind
- Owner: shervin-ghajar
- License: mit
- Created: 2024-12-28T15:37:51.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-12T11:21:38.000Z (over 1 year ago)
- Last Synced: 2025-05-13T00:06:30.124Z (about 1 year ago)
- Topics: css, design-system, react-native, reactnative, styled-components, tailwindcss
- Language: TypeScript
- Homepage: https://shervin-ghajar.github.io/react-native-stylewind/
- Size: 10.2 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Native Stylewind
Ever wished you had the flexibility of utility-first styling in React Native, but with **better maintainability, type-safety**, and more developer freedom? Well, that's exactly what **React Native Stylewind** delivers! 🎉 With this library, you can enjoy dynamic style generation based on your custom theme, and still keep your styles clean, reusable, and highly maintainable.
Use **utility styles** for quick styling or leverage **createStyle** for more structured, theme-based styles. With full TypeScript support, you get the best of both worlds—**ease of use** and **robust, type-safe development**.
## ✨ Features
- **🎨 Dynamic Theming** – Utility styles are generated on the fly based on your `theme.config.ts`.
- **⚡ Tailwind-Like Styling** – Use familiar utility styles for a seamless styling experience.
- **🛠️ Highly Customizable** – Define your own colors, utilities, spacing, typography.
- **🔐 Type-Safe** – Full TypeScript support ensures your styles are always correct.
- **🚀 Real-Time Updates** – Styles regenerate automatically when your theme changes.
- **🛆 Tree-Shaking for Performance** – Unused styles get kicked out, keeping your bundle lean.
- **💡 Flexible Usage** – Use utility-first styles or `createStyle` with theme configurations.
## 👥 Installation
First, install the package via npm or yarn:
```bash
npm install rn-stylewind
# or
yarn add rn-stylewind
```
## 🛠️ Setup
Before diving in, wrap your **Metro bundler config** to enable dynamic style generation.
### 1️⃣ Add to `metro.config.js`
```javascript
const { getDefaultConfig } = require('expo/metro-config');
const withRNStylewind = require('rn-stylewind/metro');
const defaultConfig = getDefaultConfig(__dirname);
module.exports = withRNStylewind(defaultConfig);
```
### 2️⃣ Initialize Default Theme Configuration
To initialize and create the default `theme.config.mjs` file, run the following command:
```bash
npx init-rn-stylewind
```
This will generate a `theme.config.mjs` file in the root directory of your project as below. You can customize this file to define your theme colors, spacing, typography, utilities.
```javascript
// theme.config.mjs
import { createTheme } from 'rn-stylewind';
export default await createTheme({
mode:'light',
colors: {
primary: {
default: '#1D4ED8',
light: '#93C5FD',
dark: '#1E3A8A',
},
},
spacing: {
default: 8,
},
// Modify other theme settings if needed
});
```
## 🎯 Usage
Wrap your application with `ThemeProvider` to ensure your styles and theme configurations are accessible throughout the project:
```tsx
import { ThemeProvider } from 'rn-stylewind';
import MyComponent from './MyComponent';
function App() {
return (
);
}
```
Here’s how simple and powerful `stylewind` is:
```tsx
import { Text, Pressable } from 'react-native';
import { styles } from 'rn-stylewind';
// 🚀 Utility-first styling at its finest!
export const Button = ({ title, ...rest }) => {
return (
{title}
);
};
```
### Using `styles` Function
The `styles` function allows developers to apply utility styles easily. If a color-based utility class does not specify a Dark or Light mode variant, `styles` will automatically pick the appropriate color based on the current theme `mode`.
```tsx
// if mode is `light`, `bgPrimary` will return `bgPrimaryLight` color
Dynamic Themed Text
```
### Using `createStyle`
The `createStyle` function enables structured, reusable styles with full TypeScript support and theme-based values.
```tsx
import { createStyle, styles } from 'rn-stylewind';
const useMyStyles = createStyle({
container: (theme) => ({
padding: theme.spacing.md,
backgroundColor: theme.utilities.bgBackground.backgroundColor // using specific style of an utility,
...theme.utilities['p-1'] // using utility style
}),
text: {
padding: 4
},
});
function MyComponent() {
const myStyles = useMyStyles();
return (
Hello, world!
);
}
```
### Using `useTheme` Hook
To access the theme context, use the `useTheme` hook:
```tsx
import { useTheme,styles } from 'rn-stylewind';
export const MyComponent = () => {
const { theme, isDarkMode, toggleMode } = useTheme();
return (
Current Theme: {theme.mode}
);
}
```
Now, you can use `useTheme()` in your components to access the theme and utilities dynamically.
## 📚 Documentation
For full documentation, visit [React Native Stylewind](https://shervin-ghajar.github.io/react-native-stylewind/).
## Platform Support
[](https://expo.dev/)
[](https://reactnative.dev/)
[](https://reactnative.dev/)
[](https://necolas.github.io/react-native-web/)
**React Native Stylewind** is 100% compatible with the [Expo Framework](https://expo.io/) and works with both [Expo Go](https://expo.dev/client) and in the [bare workflow](https://docs.expo.dev/bare/exploring-bare-workflow/).
## 🔥 Why You'll Love It
✅ **No more inline styles cluttering your components**\
✅ **Faster development with utility-driven styling**\
✅ **Built for performance with tree-shaking**\
✅ **Theming that just makes sense**\
✅ **Flexibility to use utility styles or structured styles**
Now go forth and **style like a boss**! 🚀