chainedcss-rn

ChainedCSS-RN

Minimalistic Method Chaining CSS - TailwindStyle for React Native
github npm

Installation

Install these packages:

// for npm
npm i chainedcss-rn

// for yarn
yarn add chainedcss-rn

// for pnpm
pnpm add chainedcss-rn

Usage for React and Next (up to Next.js 12)

At the top of every component

import _ from 'chainedcss-rn';

Rationale

✨ You already know how to use it - for the majority of basic styles ChainedCSS uses identical styling to Tailwind, to make sure users don't have to relearn everything again.

✨ The power of objects and methods - utilise the full power of js using objects and methods. Flexibility and Programability, far beyond css.

✨ Clean minimalistic look - ChainedCSS avoids all uneccesary symbols and extra code to bring css in js as close as possible to Tailwind css. CSS is too long, we've come to realise this after Tailwind became so popular. JSS, CSS in JS is even worse. ChainedCSS fixes this.

✨ Custom functions - Tailwind only has pre-determined classes. Is that a bug or a feature? If you thinks that is a feature then use ChainedCSS styles which are basically the same, however if the user wants to, she can customize many of them, because they are functions and can receive an input.

Get Started

✨ Use Tailwind-ish styles - for the majority of basic styles ChainedCSS uses identical styling to Tailwind, to make sure users don't have to relearn everything again.

import _ from 'chainedcss-rn';

const Component = () => {
  return (
    <View style={_.h(10).s}>Hello</View>
    <View 
      style={_.h(10).bg('red').justify('center').s} 
    >
      Hello
    </View>
  );
};

export default Component;

✨ Use numbers and variables in the styles functions or just add the value to the name like in tailwind

const heightX = 4;
return (
  <View style={_.h(heightX).s}>Hello</View>
);