{"id":15064926,"url":"https://github.com/arabold/react-native-whirlwind","last_synced_at":"2025-08-19T22:32:14.880Z","repository":{"id":37453561,"uuid":"394384910","full_name":"arabold/react-native-whirlwind","owner":"arabold","description":"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.","archived":false,"fork":false,"pushed_at":"2023-07-13T09:14:53.000Z","size":651,"stargazers_count":107,"open_issues_count":6,"forks_count":5,"subscribers_count":5,"default_branch":"main","last_synced_at":"2024-12-08T00:24:33.662Z","etag":null,"topics":["css","react-native","reactnative","styled-components","tachyons","tailwindcss"],"latest_commit_sha":null,"homepage":"https://arabold.github.io/react-native-whirlwind/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/arabold.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-08-09T17:39:30.000Z","updated_at":"2024-04-17T02:41:20.000Z","dependencies_parsed_at":"2024-06-19T00:23:43.376Z","dependency_job_id":"50d67b2d-54af-4b76-8618-ea1e8e5acf61","html_url":"https://github.com/arabold/react-native-whirlwind","commit_stats":{"total_commits":54,"total_committers":3,"mean_commits":18.0,"dds":0.2407407407407407,"last_synced_commit":"66d4431ebfd9b51becfd572c8b62678261b58e59"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arabold%2Freact-native-whirlwind","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arabold%2Freact-native-whirlwind/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arabold%2Freact-native-whirlwind/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arabold%2Freact-native-whirlwind/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/arabold","download_url":"https://codeload.github.com/arabold/react-native-whirlwind/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230048252,"owners_count":18164705,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","react-native","reactnative","styled-components","tachyons","tailwindcss"],"created_at":"2024-09-25T00:27:53.505Z","updated_at":"2024-12-19T04:06:54.962Z","avatar_url":"https://github.com/arabold.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Native Whirlwind 🌪️\n\nA utility-first CSS framework designed for React Native.\n\n[![license](https://img.shields.io/github/license/arabold/react-native-whirlwind.svg)](https://github.com/arabold/react-native-whirlwind/blob/master/LICENSE)\n[![react-native](https://img.shields.io/npm/dependency-version/react-native-whirlwind/peer/react-native.svg?style=flat-square)](https://sentry.io/)\n[![npm](https://img.shields.io/npm/v/react-native-whirlwind.svg)](https://www.npmjs.com/package/react-native-whirlwind)\n[![prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://prettier.io/)\n[![downloads](https://img.shields.io/npm/dt/react-native-whirlwind.svg)](https://www.npmjs.com/package/react-native-whirlwind)\n\n---\n\n**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.\n\n- **Readable** 👀 - All classes follow a simple, consistent naming convention\n- **Lightweight** 🪶 - No 3rd party dependencies\n- **Composable** 🧱 - Combinable classes for rapid prototyping\n- **Customizable** 💅 - Define your colors, typography, and spacing for your app in one place\n- **Performant** 🚀 - No unnecessary calculations, no unnecessary string parsing, just pure and fast static styles\n- **Reusable** ♻️ - Promote reusability in your team and reduce redundancies in your codebase\n- **React Native and TypeScript first** 🥇 - built for React Native and 100% written in TypeScript for a best-in-class developer experience\n\n## Getting Started\n\nReact 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.\n\n### 1. Install React Native Whirlwind\n\nInstall [react-native-whirlwind](https://www.npmjs.com/package/react-native-whirlwind) using `npm` or `yarn`:\n\n```sh\n# Using npm\nnpm install react-native-whirlwind\n\n# Using yarn\nyarn add react-native-whirlwind\n```\n\n### 2. Create Your Theme Definition\n\nCreate 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:\n\n```jsx\n// theme.jsx\nimport { createTheme } from 'react-native-whirlwind'\n\nconst t = createTheme({\n  colors: {\n    primary: 'orange',\n    secondary: 'blue'\n  }\n})\n\nexport default t\n```\n\nThis 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.\n\n### 3. Use Your Theme\n\nImport your `theme.jsx` in your app and components where needed:\n\n```jsx\n// App.jsx\nimport { View, Text } from 'react-native'\nimport t from './theme'\n\nexport default function App() {\n  return (\n    \u003cView style={[t.flex1, t.bgWhite, t.justifyCenter, t.itemsCenter]}\u003e\n      \u003cText style={[t.textPrimary]}\u003eWelcome to Whirlwind\u003c/Text\u003e\n    \u003c/View\u003e\n  )\n}\n```\n\n## Documentation\n\nFor full documentation, visit [https://arabold.github.io/react-native-whirlwind/](https://arabold.github.io/react-native-whirlwind/).\n\n## Live Example\n\nhttps://snack.expo.dev/@arabold/react-native-whirlwind\n\n## Platform Support\n\n[![supports Expo](https://img.shields.io/badge/Expo-4630EB.svg?style=for-the-badge\u0026logo=EXPO\u0026labelColor=000\u0026logoColor=fff)](https://expo.dev/)\n[![supports iOS](https://img.shields.io/badge/iOS-555555.svg?style=for-the-badge\u0026logo=APPLE\u0026labelColor=000\u0026logoColor=fff)](https://reactnative.dev/)\n[![supports Android](https://img.shields.io/badge/Android-A4C639.svg?style=for-the-badge\u0026logo=ANDROID\u0026labelColor=000\u0026logoColor=fff)](https://reactnative.dev/)\n[![supports web](https://img.shields.io/badge/Web-4285F4.svg?style=for-the-badge\u0026logo=GOOGLE-CHROME\u0026labelColor=000\u0026logoColor=fff)](https://necolas.github.io/react-native-web/)\n\n**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/).\n\nFor more details refer to the [Platform Support](https://arabold.github.io/react-native-whirlwind/getting-started/platform-support) section in the documentation.\n\n## Who Is Using Whirlwind?\n\nI'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.\n\nIf you're using it in your project and like to see it listed here, please let me know!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farabold%2Freact-native-whirlwind","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farabold%2Freact-native-whirlwind","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farabold%2Freact-native-whirlwind/lists"}