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.

Last update: May 6, 2022

React Native Whirlwind 🌪️

A utility-first CSS framework designed for React Native.

Total Downloads Latest Release License


Whirlwind is a utility-first CSS framework specifically designed for React Native. It is heavily inspired by both Tachyons and Tailwind CSS 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 using npm or yarn:

# 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:

// 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:

// App.jsx
import { View, Text } from 'react-native'
import t from './theme'

export default function App() {
  return (
    <View style={[t.flex1, t.bgWhite, t.justifyCenter, t.itemsCenter]}>
      <Text style={[t.textPrimary]}>Welcome to Whirlwind</Text>
    </View>
  )
}

Documentation

For full documentation, visit https://arabold.github.io/react-native-whirlwind/.

Live Example

https://snack.expo.dev/@arabold/react-native-whirlwind

Platform Support

supports Expo supports iOS supports Android supports web

Whirlwind is 100% compatible with the Expo Framework and works with both Expo Go and in the bare workflow.

For more details refer to the 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!

GitHub

https://github.com/arabold/react-native-whirlwind
Comments
  • 1. TS complains on setting height to Image with t.h

    Screenshot 2021-10-06 at 6 33 14 PM

    I want to use t.h to set my image height which works fine but TS complains.

    Type 'ViewStyle | TextStyle | ImageStyle' is not assignable to type 'Falsy | ImageStyle | RegisteredStyle<ImageStyle> | RecursiveArray<Falsy | ImageStyle | RegisteredStyle<ImageStyle>> 
    
    Reviewed by Saad-Bashar at 2021-10-06 10:34
  • 2. Clarify Expo support in documentation

    From what I'm seeing browsing through the code this seems like it should be perfectly compatible with Expo (managed workflow) projects. However, it would certainly be nice to have this explicitly stated in the documentation as this is the kind of library many newcomers to React Native (who are quite likely to be using Expo) would be looking for.

    Reviewed by jackpordi at 2021-09-09 20:42
  • 3. Potential issue with configuration workflow on web

    Noticed a potential issue where the recommended pattern of exporting within a StyleSheet.create wasn't working on web.

    When I export just the raw style object the styles apply as expected.

    But when I export the config within StyleSheet.create the same style class doesn't apply. Seems like reference ID isn't computing back to the actual styles for some reason.

    Might be a quirk of the RNW implementation or something but wanted to share in case it was relevant here.

    You can see at the bottom of the theme file in this demo, I have the StyleSheet version of the export commented out: Codesandbox Demo

    Thanks!

    Reviewed by leggomuhgreggo at 2021-10-14 04:42
  • 4. Integration with React Navigation

    What is the recommended approach to integrating whirlwind with react navigation?

    React navigation supplies its own theming solution:

    <NavigationContainer
      theme={colorScheme === 'dark' ? darkTheme : lightTheme}
    >
      {children}
    </NavigationContainer>
    

    and a useTheme hook.

    Reviewed by josmithua at 2021-10-05 18:49
  • 5. Should this be a good way for multiple theming?

    Need some review on using multiple themes. So I have followed the doc and added light, dark themes separately. Let’s say I have to configure some other values like fontFamily and spacing, in that case, I have to duplicate them both inside light and dark. So I did create 3 themes like so

    export const light = createTheme({
        colors: {
          // Define your theme colors for light mode
          primary: "#7C5DFA",
          primaryLight: "#9277FF",
          paper: "#F8F8F8",
    
        }
      })
      
    export const dark = createTheme({
        colors: {
          // Define your theme colors for dark mode
          primary: '#000'
        }
    })
    
    
    const t = createTheme({
        fontFamilies: {
            'sans': 'Spartan-Medium' ,
            'sansBold': 'Spartan-Bold',
        },
    })
    
    export default t
    

    So I am using the default theme everywhere and for colors, I am using the light or dark based on the theme appearance which is being passed to the app through a context. Even though I am using the color theme just for colors, they do have all other properties just like a normal theme object. Do you think its okay to do so or any other approach I should follow?

    Reviewed by Saad-Bashar at 2021-10-04 15:49
  • 6. How to add custom font name and use it?

    First of all thanks for this amazing library. I am trying to add a custom font and use it in my app. I followed the docs https://arabold.github.io/react-native-whirlwind/customization/fonts and have been able to add custom fonts. My question is, in my theme, do I need to add my custom font name within the specific fonts that the library provides? For example, this works -

    const t = createTheme({
        fontFamilies: {
            'sans': 'Spartan-Medium' ,
            'sansBold': 'Spartan-Bold'
        },
    })
    

    is it possible to do it like this -

    const t = createTheme({
        fontFamilies: {
            'spartanMedium': 'Spartan-Medium' ,
            'spartanBold': 'Spartan-Bold'
        },
    })
    

    Or do I need to specify my fonts within the provided names like 'sans' 'mono' 'serif' etc?

    Reviewed by Saad-Bashar at 2021-10-04 06:15
  • 7. "Leading" (lineHeight) depends on font base size

    The definition of the leading property in the theme follows (Tailwind's responsive "leading" class definition](https://tailwindcss.com/docs/line-height#class-reference). However, as React Native doesn't know the rem unit or anything similar, Whirlwind simply multiplies the value defined in the theme by the font base size. That works for floating text and text using the base size but results in unexpected rendering issues when using a non-default font size.

    To improve this, the following updates are proposed:

    1. Keep the responsive definitions for the time being, but document the shortcomings more clearly.
    2. Include new definitions leading1, leading2, leading3, etc. that match the current padding and margin sizes. I.e. leading4 would match exactly the base font size, while leading8 would equal double the base font size, etc.
    Reviewed by arabold at 2021-09-13 18:28
Court.css - A naive CSS Utility framework based on JSX and css custom properties

court.css ?? A (work in progress) JSX-based, CSS utility framework with a predic

Mar 14, 2022
CSS Maid 🧹 A tool made for React.js to clean up CSS default styling! Give your CSS a nice reset and style with less hassle!
CSS Maid 🧹 A tool made for React.js to clean up CSS default styling! Give your CSS a nice reset and style with less hassle!

CSS Maid ?? What is it? CSS Maid is a tool for React.js that helps clean up & reset default css! It resets default padding, remove text-decoration on

Sep 1, 2021
Incredible fast template toolkit for making new or re-styling existing components with Tailwind CSS.

Stail Incredible fast template toolkit for making new or re-styling existing components with Tailwind CSS. Why it's needed? First of all, I'm tired fr

Jan 25, 2022
CSS-in-JS solution with style-to-state bindings, SSR, and a next-level developer experience.

A set of modules is for CSS-in-JS solution that includes state-to-style bindings, SRR and next-level developer experience. It includes a framework-agnostic implementation

Mar 23, 2022
Material-tailwind - An easy-to-use components library for Tailwind CSS and Material Design
Material-tailwind - An easy-to-use components library for Tailwind CSS and Material Design

Material-tailwind - An easy-to-use components library for Tailwind CSS and Material Design

May 10, 2022
Encapsulated styling for your javascript components with all the power of javascript and CSS combined.

Stilr Encapsulated styling for your javascript components with all the power of javascript and CSS combined. Unique class names (Content Hash Based) U

May 7, 2021
JSS is an authoring tool for CSS which uses JavaScript as a host language.

JSS A lib for generating Style Sheets with JavaScript. For documentation see our docs. Backers Support us with a monthly donation and help us continue

May 13, 2022
Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation

Aphrodite Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation. Support for colocating y

May 10, 2022
👩‍🎤 CSS-in-JS library designed for high performance style composition
👩‍🎤 CSS-in-JS library designed for high performance style composition

emotion The Next Generation of CSS-in-JS Emotion 11 has been released ?? See the blog post Emotion is a performant and flexible CSS-in-JS library. Bui

May 14, 2022
A toolchain for React component styling.

Radium yarn add radium # or npm install --save radium Radium is a set of tools to manage inline styles on React elements. It gives you powerful stylin

May 10, 2022
TailwindCSS plugin that helps styling radix state

TailwindCSS Radix TailwindCSS plugin that helps styling radix state. Installation yarn yarn add tailwindcss-radix npm npm i tailwindcss-radix Usage Yo

May 14, 2022
🏠 Airbnb website using React, Next.js and Tailwind CSS
🏠 Airbnb website using React, Next.js and Tailwind CSS

This example shows how to use Tailwind CSS (v2.2) with Next.js. It follows the steps outlined in the official Tailwind docs.

May 2, 2022
Create tailwind css react components like styled components with classes name on multiple lines

Create Tailwind CSS React components like styled components with class names on multiple lines and conditional class rendering

May 11, 2022
Starter template for NextJs with TypeScript. Supports Tailwind with CSS-Modules
Starter template for NextJs with TypeScript. Supports Tailwind with CSS-Modules

Starter template for NextJs with TypeScript. Supports Tailwind with CSS-Modules. Jest and @react/testing-library configured and ready to go. Also ESLint, Prettier, Husky, Commit-lint and Atomic Design for components.

May 8, 2022
React visual primitives with first-class TypeScript support and a tiny footprint.

tsstyled React visual primitives with first-class TypeScript support and a tiny footprint. TL;DR: This library is a styled-components rewrite that is

Apr 7, 2022
♞ JavaScript mobile-first chess.

♞ JavaScript mobile-first chess client. Play Documentation Changelog How does it work? The game state and the game view are separated. The view re-ren

Aug 27, 2021
A simple javascript utility for conditionally joining classNames together

Classnames A simple JavaScript utility for conditionally joining classNames together. Install with npm, Bower, or Yarn: # via npm npm install classnam

May 15, 2022
Imersão React.js 3º edição. Project using ReactJS, Next JS, and Styled Components for the week challenge by Alura. We created a social network inspired by Orkut.

Example app with styled-components This example features how you use a different styling solution than styled-jsx that also supports universal styles.

Jul 19, 2021
CSS media queries in react - for responsive design, and more.

react-responsive Information Package react-responsive Description Media queries in react for responsive design Browser Version >= IE6* Demo The best s

May 12, 2022