https://github.com/arabold/react-native-whirlwind
Whirlwind is a utility-first styling framework specifically designed for React Native. It is heavily inspired by Tachyons and Tailwind CSS and uses low-level building blocks for rapidly building custom designs.
https://github.com/arabold/react-native-whirlwind
css react-native reactnative styled-components tachyons tailwindcss
Last synced: 4 months ago
JSON representation
Whirlwind is a utility-first styling framework specifically designed for React Native. It is heavily inspired by Tachyons and Tailwind CSS and uses low-level building blocks for rapidly building custom designs.
- Host: GitHub
- URL: https://github.com/arabold/react-native-whirlwind
- Owner: arabold
- License: mit
- Created: 2021-08-09T17:39:30.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-07-13T09:14:53.000Z (almost 2 years ago)
- Last Synced: 2024-12-08T00:24:33.662Z (5 months ago)
- Topics: css, react-native, reactnative, styled-components, tachyons, tailwindcss
- Language: TypeScript
- Homepage: https://arabold.github.io/react-native-whirlwind/
- Size: 636 KB
- Stars: 107
- Watchers: 5
- Forks: 5
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# React Native Whirlwind ðŠïļ
A utility-first CSS framework designed for React Native.
[](https://github.com/arabold/react-native-whirlwind/blob/master/LICENSE)
[](https://sentry.io/)
[](https://www.npmjs.com/package/react-native-whirlwind)
[](https://prettier.io/)
[](https://www.npmjs.com/package/react-native-whirlwind)
---
**Whirlwind** is a utility-first CSS framework specifically designed for [React Native](https://reactnative.dev/). It is heavily inspired by both [Tachyons](https://tachyons.io/) and [Tailwind CSS](https://tailwindcss.com/) and uses low-level building blocks for rapidly building custom designs.
- **Readable** ð - All classes follow a simple, consistent naming convention
- **Lightweight** ðŠķ - No 3rd party dependencies
- **Composable** ð§ą - Combinable classes for rapid prototyping
- **Customizable** ð
- Define your colors, typography, and spacing for your app in one place
- **Performant** ð - No unnecessary calculations, no unnecessary string parsing, just pure and fast static styles
- **Reusable** âŧïļ - Promote reusability in your team and reduce redundancies in your codebase
- **React Native and TypeScript first** ðĨ - built for React Native and 100% written in TypeScript for a best-in-class developer experience
## Getting Started
React Native has a powerful feature that allows you to pass an _array of styles_ rather than just a single object to the `style` prop of a component. This can be used to inherit styles. **Whirlwind** relies on this mechanic to provide a simple, composable API for building custom designs.
### 1. Install React Native Whirlwind
Install [react-native-whirlwind](https://www.npmjs.com/package/react-native-whirlwind) using `npm` or `yarn`:
```sh
# Using npm
npm install react-native-whirlwind
# Using yarn
yarn add react-native-whirlwind
```
### 2. Create Your Theme Definition
Create a new file `theme.jsx` somewhere in your project source folder, e.g. next to your `App.jsx`, and call the `createTheme` function from `react-native-whirlwind`. To customize your theme, simply pass your desired colors and other properties as parameter:
```jsx
// theme.jsx
import { createTheme } from 'react-native-whirlwind'
const t = createTheme({
colors: {
primary: 'orange',
secondary: 'blue'
}
})
export default t
```
This will customize the primary and secondary colors of your app. The exported constant `t` acts as the entry point to the Whirlwind style system. You can use any variable name but I recommend using something short and memorable, as it will be heavily used throughout your application. `t` has proven to be a useful pattern and is recommended for consistency with the documentation and other apps based on Whirlwind.
### 3. Use Your Theme
Import your `theme.jsx` in your app and components where needed:
```jsx
// App.jsx
import { View, Text } from 'react-native'
import t from './theme'
export default function App() {
return (
Welcome to Whirlwind
)
}
```
## Documentation
For full documentation, visit [https://arabold.github.io/react-native-whirlwind/](https://arabold.github.io/react-native-whirlwind/).
## Live Example
https://snack.expo.dev/@arabold/react-native-whirlwind
## Platform Support
[](https://expo.dev/)
[](https://reactnative.dev/)
[](https://reactnative.dev/)
[](https://necolas.github.io/react-native-web/)
**Whirlwind** 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/).
For more details refer to the [Platform Support](https://arabold.github.io/react-native-whirlwind/getting-started/platform-support) section in the documentation.
## Who Is Using Whirlwind?
I'm using the predecessor and variants of **Whirlwind** for several years now and in many different commercial projects. Some of them have several 100,000s of installs across the App Store and Google Play. Finally, I decided to open source it and make it available to the community. This is how **Whirlwind** was born.
If you're using it in your project and like to see it listed here, please let me know!