simple, expressive API for tailwindcss + react-native

Overview

Tailwind React Native Classnames πŸ„β€β™‚οΈ

A simple, expressive API for TailwindCSS + React Native, written in TypeScript

import { View, Text } from 'react-native';
import tw from 'twrnc';

const MyComponent = () => (
  <View style={tw`p-4 android:pt-2 bg-white dark:bg-black`}>
    <Text style={tw`text-md text-black dark:text-white`}>Hello World</Text>
  </View>
);

Features πŸš€

  • full support for all native RN styles with tailwind counterparts: (view, layout, image, shadow, and text).
  • compatible with Tailwind CSS v3 and v2
  • respects your tailwind.config.js for full configuration
  • platform prefixes: android:mt-4 ios:mt-2
  • dark mode support: bg-white dark:bg-black
  • media query support: w-48 lg:w-64 (also, arbitrary: min-w-[600px]:flex-wrap)
  • device orientation prefixes: portrait:flex-col landscape:flex-row
  • vw and vh unit support: h-screen, min-w-screen, w-[25vw], etc...
  • retina device pixel density prefix: w-4 retina:w-2
  • arbitrary, JIT-style classes: mt-[31px] bg-[#eaeaea] text-red-200/75, etc...
  • tagged template literal synax for most common usage
  • merges supplied RN style objects for unsupported utilities or complex use cases
  • supports custom utility creation via standard plugin config.
  • heavily optimized for performance - styles resolved once, then stored in in-memory cache
  • flexible, conditional styles based on classnames package api.
  • written 100% in Typescript, ships with types

Docs:

Installation

npm install twrnc

API

The default export is an ES6 Tagged template function which is nice and terse for the most common use case -- passing a bunch of space-separated Tailwind classes and getting back a react-native style object:

import tw from 'twrnc';

tw`pt-6 bg-blue-100`;
// -> { paddingTop: 24, backgroundColor: 'rgba(219, 234, 254, 1)' }

In the spirit of Tailwindcss's intuitive responsive prefix syntax, twrnc adds support for platform prefixes to conditionally apply styles based on the current platform:

// 😎 styles only added if platform matches
tw`ios:pt-4 android:pt-2`;

Media query-like breakpoint prefixes supported (see Breakpoints for configuration):

// 😎 faux media queries
tw`flex-col lg:flex-row`;

Dark mode support (see here for configuration);

// 😎 dark mode support
tw`bg-white dark:bg-black`;

You can also use tw.style() for handling more complex class name declarations. The api for this function is directly taken from the excellent classnames package.

// pass multiple args
tw.style('text-sm', 'bg-blue-100', 'flex-row mb-2');

// arrays of classnames work too
tw.style(['text-sm', 'bg-blue-100']);

// falsy stuff is ignored, so you can do conditionals like this
tw.style(isOpen && 'bg-blue-100');

// { [className]: boolean } style - key class only added if value is `true`
tw.style({
  'bg-blue-100': isActive,
  'text-red-500': invalid,
});

// or, combine tailwind classes with plain react-native style object:
tw.style('bg-blue-100', { resizeMode: `repeat` });

// mix and match input styles as much as you want
tw.style('bg-blue-100', ['flex-row'], { 'text-xs': true }, { fontSize: 9 });

If you need some styling that is not supported in a utility class, or just want to do some custom run-time logic, you can pass raw RN style objects to tw.style(), and they get merged in with the styles generated from any other utility classes:

tw.style(`mt-1`, {
  resizeMode: `repeat`,
  width: `${progress}%`,
});
// -> { marginTop: 4, resizeMode: 'repeat', width: '32%' }

The tw function also has a method color that can be used to get back a string value of a tailwind color. Especially useful if you're using a customized color pallette.

tw.color('blue-100'); // `bg|text|border-blue-100` also work
// -> "rgba(219, 234, 254, 1)"

You can import the main tw function and reach for tw.style only when you need it:

import tw from 'twrnc';

const MyComponent = () => (
  <View style={tw`bg-blue-100`}>
    <Text style={tw.style('text-md', invalid && 'text-red-500')}>Hello</Text>
  </View>
);

...or if the tagged template function isn't your cup of tea, just import tw.style as tw:

import { style as tw } from 'twrnc';

const MyComponent = () => (
  <View style={tw('bg-blue-100', invalid && 'text-red-500')}></View>
);

Customization

You can use twrnc right out of the box if you haven't customized your tailwind.config.js file at all. But more likely you've got some important app-specific tailwind customizations you'd like to use. For that reason, we expose the ability to create a custom configured version of the tw function object.

// lib/tailwind.js
import { create } from 'twrnc';

// create the customized version...
const tw = create(require(`../../tailwind.config.js`)); // <- your path may differ

// ... and then this becomes the main function your app uses
export default tw;

...and in your component files import your own customized version of the function instead:

// SomeComponent.js
import tw from './lib/tailwind';

⚠️ Make sure to use module.exports = {} instead of export default {} in your tailwind.config.js file, as the latter is not supported.

Enabling Device-Context Prefixes

To enable prefixes that require runtime device data, like dark mode, and screen size breakpoints, etc., you need to connect the tw function with a dynamic source of device context information. The library exports a React hook called useDeviceContext that takes care of this for you. It should be included one time, at the root of your component hierarchy, as shown below:

import tw from './lib/tailwind'; // or, if no custom config: `from 'twrnc'`
import { useDeviceContext } from 'twrnc';

export default function App() {
  useDeviceContext(tw); // <- πŸ‘‹
  return (
    <View style={tw`bg-white dark:bg-black`}>
      <Text style={tw`text-black dark:text-white`}>Hello</Text>
    </View>
  );
}

Taking Control of Dark Mode

By default, if you use useDeviceContext() as outlined above, your app will respond to ambient changes in the device's color scheme (set in system preferences). If you'd prefer to explicitly control the color scheme of your app with some in-app mechanism, you'll need to configure things slightly differently:

import { useDeviceContext, useAppColorScheme } from 'twrnc';

export default function App() {
  // 1️⃣  opt OUT of listening to DEVICE color scheme events
  useDeviceContext(tw, { withDeviceColorScheme: false });

  // 2️⃣  use the `useAppColorScheme` hook to get a reference to the current color
  // scheme, with some functions to modify it (triggering re-renders) when you need to
  const [colorScheme, toggleColorScheme, setColorScheme] = useAppColorScheme(tw);

  return (
    {/* 3️⃣ use one of the setter functions, like `toggleColorScheme` in your app */}
    <TouchableOpacity onPress={toggleColorScheme}>
      <Text style={tw`text-black dark:text-white`}>Switch Color Scheme</Text>
    </TouchableOpacity>
  );
}

useAppColorScheme() accepts an optional second argument of an initial value for the color scheme. If not supplied, it will be initialized to the current system setting at the time the function is called.

Customizing Breakpoints

You can customize the breakpoints in the same way as a tailwindcss web project, using tailwind.config.js. The defaults that ship with tailwindcss are geared towards the web, so you likely want to set your own for device sizes you're interested in, like this:

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      sm: '380px',
      md: '420px',
      lg: '680px',
      // or maybe name them after devices for `tablet:flex-row`
      tablet: '1024px',
    },
  },
};

Adding Custom Classes

To add custom utilities, use the plugin method described in the tailwind docs, instead of writing to a .css file. twrnc provides a plugin() function you can use, but it's also compatible with the stock tailwindcss function:

// tailwind.config.js
const { plugin } = require('twrnc');

// or, you can use tailwinds plugin function:
const plugin = require('tailwindcss/plugin');

module.exports = {
  plugins: [
    plugin(({ addUtilities }) => {
      addUtilities({
        btn: {
          padding: 3,
          borderRadius: 10,
          textTransform: `uppercase`,
          backgroundColor: `#333`,
        },
        'resize-repeat': {
          resizeMode: `repeat`,
        },
      });
    }),
  ],
};

Wil also allow you to supply a string of other utility classes (similar to @apply), instead of using CSS-in-JS style objects:

module.exports = {
  plugins: [
    plugin(({ addUtilities }) => {
      addUtilities({
        // 😎 similar to `@apply`
        btn: `px-4 py-1 rounded-full bg-red-800 text-white`,
        'body-text': `font-serif leading-relaxed tracking-wide text-gray-800`,
      });
    }),
  ],
};

Matching Conditional Prefixes

twrnc also exposes a tw.prefixMatch(...prefixes: string[]) => boolean function that allows you to test whether a given prefix (or combination of prefixes) would produce a style given the current device context. This can be useful when you need to pass some primitive value to a component, and wish you could leverage tw's knowledge of the current device, or really anywhere you just need to do some logic based on the device context. This could also be accomplished by importing Platform or a combination of other RN hooks, but chances are you've already imported your tw function, and this saves you re-implementing all that logic on your own:

const SomeComponent = () => (
  <View>
    <Thumbnail imageSize={tw.prefixMatch(`portrait`) ? 60 : 90} />;
    {tw.prefixMatch(`ios`, `dark`) ? <CustomIosDarkModeThing /> : <Thing />}
  </View>
);

Box Shadows

Box shadows in CSS differ substantially from shadow in RN, so this library doesn't attempt to parse CSS box-shadow strings and translate them into RN style objects. Instead, it offers a number of low-level utilities not present in tailwindcss, which map to the 4 shadow props in RN:

// RN `shadowColor`
tw`shadow-white`; // > { shadowColor: `#fff` }
tw`shadow-red-200`; // > { shadowColor: `#fff` }
tw`shadow-[#eaeaea]`; // > { shadowColor: `#eaeaea` }
tw`shadow-black shadow-opacity-50`; // > { shadowColor: `rgba(0,0,0,0.5)` }

// RN `shadowOffset`
tw`shadow-offset-1`; // > { shadowOffset: { width: 4, height: 4 } }
tw`shadow-offset-2/3`; // > { shadowOffset: { width: 8, height: 12 } }
tw`shadow-offset-[3px]`; // > { shadowOffset: { width: 3, height: 3 } }],
tw`shadow-offset-[4px]/[5px]`; // > { shadowOffset: { width: 4, height: 5 } }],

// RN `shadowOpacity`
tw`shadow-opacity-50`; // { shadowOpacity: 0.5 }

// RN `shadowRadius`
tw`shadow-radius-1`; // { shadowRadius: 4 }
tw`shadow-radius-[10px]`; // { shadowRadius: 10 }

We also provide a default implementation of the shadow-<X> utils provided by tailwindcss, so you can use:

tw`shadow-md`;
/*
-> {
  shadowOffset: { width: 1, height: 1 },
  shadowColor: `#000`,
  shadowRadius: 3,
  shadowOpacity: 0.125,
  elevation: 3,
}
*/

To override the default implementations of these named shadow classes, add your own custom utilties -- any custom utilities you provide with the same names will override the ones this library ships with.

RN-Only Additions

twrnc implements all of the tailwind utilities which overlap with supported RN (native, not web) style props. But it also adds a sprinkling of RN-only utilities which don't map to web-css, including:

  • low-level shadow utilities
  • elevation (android only), eg: elevation-1, elevation-4
  • small-caps -> {fontVariant: 'small-caps'}
  • number based font-weight utilities font-100, font-400, (100...900)
  • direction-(inherit|ltr|rtl)
  • align-self: baseline; via self-baseline
  • include-font-padding and remove-font-padding (android only: includeFontPadding)
  • image tint color control (tint-{color} e.g. tint-red-200)

JIT-Style Arbitrary Values

Many of the arbitrary-style utilities made possible by Tailwind JIT are implemented in twrnc, including:

  • arbitrary colors: bg-[#f0f], text-[rgb(33,45,55)]
  • negative values: -mt-4, -tracking-[2px]
  • shorthand color opacity: text-red-200/75 (red-200 at 75% opacity)
  • merging color/opacity: border-black border-opacity-75
  • arbitrary opacity amounts: opacity-73
  • custom spacing: mt-[4px], -pb-[3px], tracking-[2px]
  • arbitrary fractional insets: bottom-7/9, left-5/8
  • arbitrary min/max width/height: min-w-[40%], max-h-3/8, w-[25vw], h-[21px]
  • arbitrary breakpoints: min-w-[600px]:flex-row, max-h-[1200px]:p-4

Not every utility currently supports all variations of arbitrary values, so if you come across one you feel is missing, open an issue or a PR.

Migrating from V2

Color renames. In line with the upgrade guide, tailwind v3 has mapped green, yellow, and purple to their extended colors. Additionally, gray colors were renamed in the extended colors to be more specific. Both of these can be resolved by following tailwind's upgrade guide and optionally re-aliasing the colors in your tailwind.config.js.

Other than checking on any changes caused by color renames in tailwindcss, there are no breaking changes in V3 of this library, no further changes should be necessary.

New v3 prefixes and classes are being added as we identify use cases. If you do have a feature that would help your development, please open an issue and include any libraries / hooks that could help someone in the community put a PR together.

Migrating from V1

1. During the rewrite, the package name on npm was changed to twrnc. To remove the old library and install v2, run:

npm uninstall tailwind-react-native-classnames
npm install twrnc

2. Grep through your project replacing from 'tailwind-react-native-classnames' with from 'twrnc'.

3. If you were using a tailwind.config.js you can git rm your tw-rn-styles.json file, and switch to passing your config directly to create as shown below: (details here)

const tw = create(require(`../../tailwind.config.js`));

That's it! πŸŽ‰ The core API and functionality should work exactly the same from v1 to v2.

Prior Art

Comments
  • CommonJS Support

    CommonJS Support

    This PR builds on #91 and removes the react-native dependency from the create function. The create function now also requires passing in the device platform as second parameter. To stay backwards-compatible, we construct and export a new create function that injects the current platform and matches the previous function signature in index.ts, keeping the original function unaware of react-native. With these changes, we can now import a node-compatible version using import create from "twrnc/create".

    Closes #92.

    opened by finkef 25
  • setColorScheme don't change the theme

    setColorScheme don't change the theme

    Hi! I'm trying to change the app theme when the user changes it inside the app. But it's not working. The code example is below. Is there something wrong?

    useEffect(() => {
      tw.setColorScheme(darkTheme ? 'dark' : 'light')
    }, [darkTheme])
    
    <View style={tw`bg-white dark:bg-gray-900`}>
    
    opened by Bryant-Anjos 19
  • some warnings come from tailwind

    some warnings come from tailwind

    tailwind CSS version: 3.0.18 tailwind-react-native-classname version: 3.0.1 it seems a tailwind bug but has solved in https://github.com/tailwindlabs/tailwindcss/issues/7210 , but it still happens in tailwind-react-native-classname image

    opened by chinieer 13
  • Question regarding custom fontFamily

    Question regarding custom fontFamily

    Thanks for this great tool!

    Not sure if I did it right, my tailwind.config.js which has following custom fontFamily setting but it's not compiled to corresponding font utility like font-sans

    module.exports  = {
      theme: {
        fontFamily: {
          sans: ['NotoSansTC', 'sans-serif'],
        }
      }
    };
    opened by hugefunwoo 13
  • Customize default styles

    Customize default styles

    Hi @jaredh159,

    Thank you for your work.

    I wanted to know if you would be open to the possibility of customizing defaultStyles? For example, on our side we don't want to have the classes font-100, font-thin, ..., font-900, font-black.

    Because in our tailwind config, we decided to have fonts named medium, bold, ... and to directly use font-bold to define the font-family instead of defining the font-weight.

    Thank you in advance,

    opened by JamesHemery 9
  • Font size after 4xl has no effect

    Font size after 4xl has no effect

    According to the tailwind docs here https://tailwindcss.com/docs/font-size

    font size goes all the way to text-9xl But after text-4xl there seems to be no effect.

    opened by AshotN 9
  • reuse custom utilities in other custom utility classes

    reuse custom utilities in other custom utility classes

    What?

    I was unable to find anything in the documentation about how to add base and/or component styling.

    Why?

    I would like to organise my styling in a file like ITCss.

    How?

    Maybe declaring like the existing addUtilities

    module.exports = {
      plugins: [
        plugin(( { addBase, addComponents, addUtilities } ) => {
          addBase({
            btn: `px-4 py-1 rounded-full`,
            container: `flex content-justify  align-center`,
          }),
          addComponents({
            "btn-primary": `btn bg-teal-800 text-white`,
            "container-center": `container flex-col items-center justify-center`
          }),
          addUtilities({
            /**** you got the idea ****/
          })
        }) ],
    };
    

    Anything Else?

    I think it should be possible to put everything inside addUtilities without using inheritance, right?

    opened by oVerde 8
  • Tailwind intellisense support

    Tailwind intellisense support

    I'm trying to figure out the correct regex to use for intellisense support. Similar to tailwind-rn

    https://github.com/vadimdemedes/tailwind-rn/pull/101/commits/2f848b6e9dc653d44828ea7c783fe922fa1981a8

    What is the full regex pattern for tailwind-react-native-classnames to use with tailwindCSS.experimental.classRegex config?

    opened by nicwhitts 8
  • Context aware types

    Context aware types

    Hi, I am trying out the library.

    color function has following type. color: (color: string) => string | undefined;

    Can we get better types for default color values provided by tailwind.

    Its easier for me to use below object for getting color values.

    
    `export const colors = {
      // https://tailwindcss.com/docs/customizing-colors#default-color-palette
      slate: {
        50: "#F8FAFC",
        100: "#F1F5F9",
        200: "#E2E8F0",
        300: "#CBD5E1",
        400: "#94A3B8",
        500: "#64748B",
        600: "#475569",
        700: "#334155",
        800: "#1E293B",
        900: "#0F172A",
      },
      gray: {
        50: "#F9FAFB",
        100: "#F3F4F6",
        200: "#E5E7EB",
        300: "#D1D5DB",
        400: "#9CA3AF",
        500: "#6B7280",
        600: "#4B5563",
        700: "#374151",
        800: "#1F2937",
        900: "#111827",
      },
      zinc: {
        50: "#FAFAFA",
        100: "#F4F4F5",
        200: "#E4E4E7",
        300: "#D4D4D8",
        400: "#A1A1AA",
        500: "#71717A",
        600: "#52525B",
        700: "#3F3F46",
        800: "#27272A",
        900: "#18181B",
      },
      neutral: {
        50: "#FAFAFA",
        100: "#F5F5F5",
        200: "#E5E5E5",
        300: "#D4D4D4",
        400: "#A3A3A3",
        500: "#737373",
        600: "#525252",
        700: "#404040",
        800: "#262626",
        900: "#171717",
      },
      stone: {
        50: "#FAFAF9",
        100: "#F5F5F4",
        200: "#E7E5E4",
        300: "#D6D3D1",
        400: "#A8A29E",
        500: "#78716C",
        600: "#57534E",
        700: "#44403C",
        800: "#292524",
        900: "#1C1917",
      },
      red: {
        50: "#FEF2F2",
        100: "#FEE2E2",
        200: "#FECACA",
        300: "#FCA5A5",
        400: "#F87171",
        500: "#EF4444",
        600: "#DC2626",
        700: "#B91C1C",
        800: "#991B1B",
        900: "#7F1D1D",
      },
      orange: {
        50: "#FFF7ED",
        100: "#FFEDD5",
        200: "#FED7AA",
        300: "#FDBA74",
        400: "#FB923C",
        500: "#F97316",
        600: "#EA580C",
        700: "#C2410C",
        800: "#9A3412",
        900: "#7C2D12",
      },
      amber: {
        50: "#FFFBEB",
        100: "#FEF3C7",
        200: "#FDE68A",
        300: "#FCD34D",
        400: "#FBBF24",
        500: "#F59E0B",
        600: "#D97706",
        700: "#B45309",
        800: "#92400E",
        900: "#78350F",
      },
      yellow: {
        50: "#FEFCE8",
        100: "#FEF9C3",
        200: "#FEF08A",
        300: "#FDE047",
        400: "#FACC15",
        500: "#EAB308",
        600: "#CA8A04",
        700: "#A16207",
        800: "#854D0E",
        900: "#713F12",
      },
      lime: {
        50: "#F7FEE7",
        100: "#ECFCCB",
        200: "#D9F99D",
        300: "#BEF264",
        400: "#A3E635",
        500: "#84CC16",
        600: "#65A30D",
        700: "#4D7C0F",
        800: "#3F6212",
        900: "#365314",
      },
      green: {
        50: "#F0FDF4",
        100: "#DCFCE7",
        200: "#BBF7D0",
        300: "#86EFAC",
        400: "#4ADE80",
        500: "#22C55E",
        600: "#16A34A",
        700: "#15803D",
        800: "#166534",
        900: "#14532D",
      },
      emerald: {
        50: "#ECFDF5",
        100: "#D1FAE5",
        200: "#A7F3D0",
        300: "#6EE7B7",
        400: "#34D399",
        500: "#10B981",
        600: "#059669",
        700: "#047857",
        800: "#065F46",
        900: "#064E3B",
      },
      teal: {
        50: "#F0FDFA",
        100: "#CCFBF1",
        200: "#99F6E4",
        300: "#5EEAD4",
        400: "#2DD4BF",
        500: "#14B8A6",
        600: "#0D9488",
        700: "#0F766E",
        800: "#115E59",
        900: "#134E4A",
      },
      cyan: {
        50: "#ECFEFF",
        100: "#CFFAFE",
        200: "#A5F3FC",
        300: "#67E8F9",
        400: "#22D3EE",
        500: "#06B6D4",
        600: "#0891B2",
        700: "#0E7490",
        800: "#155E75",
        900: "#164E63",
      },
      sky: {
        50: "#F0F9FF",
        100: "#E0F2FE",
        200: "#BAE6FD",
        300: "#7DD3FC",
        400: "#38BDF8",
        500: "#0EA5E9",
        600: "#0284C7",
        700: "#0369A1",
        800: "#075985",
        900: "#0C4A6E",
      },
      blue: {
        50: "#EFF6FF",
        100: "#DBEAFE",
        200: "#BFDBFE",
        300: "#93C5FD",
        400: "#60A5FA",
        500: "#3B82F6",
        600: "#2563EB",
        700: "#1D4ED8",
        800: "#1E40AF",
        900: "#1E3A8A",
      },
      indigo: {
        50: "#EEF2FF",
        100: "#E0E7FF",
        200: "#C7D2FE",
        300: "#A5B4FC",
        400: "#818CF8",
        500: "#6366F1",
        600: "#4F46E5",
        700: "#4338CA",
        800: "#3730A3",
        900: "#312E81",
      },
      violet: {
        50: "#F5F3FF",
        100: "#EDE9FE",
        200: "#DDD6FE",
        300: "#C4B5FD",
        400: "#A78BFA",
        500: "#8B5CF6",
        600: "#7C3AED",
        700: "#6D28D9",
        800: "#5B21B6",
        900: "#4C1D95",
      },
      purple: {
        50: "#FAF5FF",
        100: "#F3E8FF",
        200: "#E9D5FF",
        300: "#D8B4FE",
        400: "#C084FC",
        500: "#A855F7",
        600: "#9333EA",
        700: "#7E22CE",
        800: "#6B21A8",
        900: "#581C87",
      },
      fuchsia: {
        50: "#FDF4FF",
        100: "#FAE8FF",
        200: "#F5D0FE",
        300: "#F0ABFC",
        400: "#E879F9",
        500: "#D946EF",
        600: "#C026D3",
        700: "#A21CAF",
        800: "#86198F",
        900: "#701A75",
      },
      pink: {
        50: "#FDF2F8",
        100: "#FCE7F3",
        200: "#FBCFE8",
        300: "#F9A8D4",
        400: "#F472B6",
        500: "#EC4899",
        600: "#DB2777",
        700: "#BE185D",
        800: "#9D174D",
        900: "#831843",
      },
      rose: {
        50: "#FFF1F2",
        100: "#FFE4E6",
        200: "#FECDD3",
        300: "#FDA4AF",
        400: "#FB7185",
        500: "#F43F5E",
        600: "#E11D48",
        700: "#BE123C",
        800: "#9F1239",
        900: "#881337",
      },
    };`
    
    opened by ghost 7
  • Support for web utilities

    Support for web utilities

    Since this package works with react-native-web (although not officially supported I think), I was wondering if there is any interest in also adding web-only tw utilities like "cursor-pointer". When building for the web, natively supported RN styles gets us 90% of the way there, but showing a pointer cursor for buttons is a must.

    My specific use case is that I want to support web utilities in react-native-tailwind.macro since it's trying to allow fully universal tailwind styles on both mobile and web. I think the best option is adding support for those utilities in this repo by adding the missing resolvers. Alternatively, I could add them through this lib's plugins downstream in react-native-tailwind.macro, but I think many more users could benefit off of them when implemented here.

    What do you think, @jaredh159?

    opened by finkef 7
  • Custom colors supported?

    Custom colors supported?

    "twrnc": "^3.0.2"

    First off thanks for all of your effort with this, I'm just getting started with React native and am already a fan of Tailwind!

    If I specify some custom colours in tailwind.config.js via the extend section should I be able to use them with twrnc for text colour? e.g. text-sp-purple

    The "Home Screen" text doesn't seem to get styled, however if I change

    <Text style={tw`text-sp-purple`}>Home Screen</Text>
    

    to

    <Text style={tw`text-red-500`}>Home Screen</Text>
    

    it displays as expected.

    tailwind.config.js

    export default {
        content: ["./**/*.{html,js}"],
        theme: {
            extend: {
                animation:{
                    'background-scroll': 'background-scroll 10s ease infinite', // ease
                },
                keyframes: {
                    'background-scroll': {
                        '0%, 100%': { backgroundPosition: '0% 50%', backgroundSize: '300% 200%'},
                        '50%': { backgroundPosition: '100% 50%;'}
                    }
                },
                colors: {
                    'sp-red': '#E5202F',
                    'sp-orange': '#F06424',
                    'sp-yellow': '#FAA51A',
                    'sp-purple': '#9E07AE',
                    'sp-black': '#000000',
                    'sp-white': '#FFFFFF',
                    'sp-dark-gray-75': '#444444',
                    'sp-dark-gray-50': '#5A5A5A',
                    'sp-dark-gray-25': '#6F6F6F',
                    'sp-mid-gray': '#9B9B9B',
                    'sp-light-gray-75': '#C6C6C6',
                    'sp-light-gray-50': '#E2E2E2',
                    'sp-light-gray-25': '#F2F2F2',
                },
            },
        },
      }
    

    lib/tailwind.js

    import { create } from 'twrnc';
    const tw = create(require(`../tailwind.config.js`));
    export default tw;
    

    screens/home.js

    import {Button, Text, View} from "react-native";
    import React from "react";
    import tw from '../lib/tailwind';
    
    function HomeScreen({navigation }) {
        return (
            <View style={tw`flex-1 items-center justify-center min-h-screen`}>
                <Text style={tw`text-sp-purple`}>Home Screen</Text>
                <Button
                    title="Go to Details"
                    onPress={() => navigation.navigate('Details')}
                />
            </View>
        );
    }
    
    export default HomeScreen;
    
    opened by sp-cmingay 6
  • basis (flexBasis) not implemented?

    basis (flexBasis) not implemented?

    Hey, first of all thanks a lot for this library, it is amazing πŸ™

    It looks to me that basis is not implemented, I need to do <View style={tw.style(grow-1 p-2 bg-cyan-100 h-10,{flexBasis:160})}></View> to work. Am I doing something wrong?

    Thank you πŸ€—

    opened by rborn 2
  • Custom value of grow is not implemented

    Custom value of grow is not implemented

    the flexGrow utility is stated to be implemented, however, twgrow-[2] gives nothing.

    On the other hand, twgrow-2 do give {"flewGrow" 2}. However, this is NOT documented on tailwind's web: https://tailwindcss.com/docs/flex-grow

    opened by introom 2
  • Argument of type 'StyleProp<ViewStyle>' is not assignable to parameter of type 'ClassInput'.

    Argument of type 'StyleProp' is not assignable to parameter of type 'ClassInput'.

    My twrnc package version: 3.0.1

    Here is my code:

    interface IBottomBoxRowProps extends ViewProps{}
    
    const BottomBoxRow: FC<IBottomBoxRowProps> = ({ style, children, ...rest }) => {
      return (
        <View style={tw.style('flex-row', style)} {...rest}>
          {children}
        </View>
      );
    };
    

    And I got this error:

    Argument of type 'StyleProp<ViewStyle>' is not assignable to parameter of type 'ClassInput'.
      Type 'RegisteredStyle<ViewStyle>' is not assignable to type 'ClassInput'.
        Type 'RegisteredStyle<ViewStyle>' is not assignable to type '{ [k: string]: string | number | boolean; }'.
          Index signature for type 'string' is missing in type 'Number & { __registeredStyleBrand: ViewStyle; }'
    

    How can I fix this issue?

    opened by mahdisalehian 2
  • How to properly toggle dark mode with useAppColorScheme() while using React Navigation

    How to properly toggle dark mode with useAppColorScheme() while using React Navigation

    Before posting this isuue, I already read the #97 and https://github.com/jaredh159/tailwind-react-native-classnames#taking-control-of-dark-mode thoroughly. From there I understand that, the theme change won't re-render components using memo.

    My question is, how can we useAppColorScheme() with React Navigation and get this to work ?

    I've created a minimal repo and also recorded the screen for the demo purpose.

    Repo Link Video Demo

    opened by chankruze 9
  • Add transform support

    Add transform support

    I can't find any reference to transform in the supported-utilites.md file.

    This does exist in RN, any plans to include it? My current usecase is to center an icon in a thumbnail, which i do with the following tailwind classes: absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2

    Thanks for this great lib!

    opened by walidvb 15
Owner
Jared Henderson
Jared Henderson
Test concept that contains a simple layout to try out a basic react component composition by using technologies such as Vite and Tailwindcss.

Football squad stats Comments This is a conceptual test aimed at trying out technologies such as: React (TypeScript). Vite Tailwindcss daisyUI Install

Christian JosΓ© Torrealba RondΓ³n 4 Nov 11, 2022
A simple tailwindcss & headlessui react application template

React Template includes pre-configured Tailwind CSS with JIT compilation and hot reloading. Commands: run these commands in the project directory: npm

DaDavinci 19 Aug 2, 2022
React-calculator - A calculator using React, TypeScript, Vite.js and TailwindCSS, inspired by iOS calculator UI

React Calculator A calculator inspired by iOS calculator UI. Live demo here. Tab

Fellipe Utaka 3 Nov 20, 2022
A React boilerplate with Typescript using Vite. Includes React-query, Zustand, Tailwindcss, EsLint + Prettier, Husky Commit Lint

A React boilerplate with Typescript using Vite. Includes React-query, Zustand, Tailwindcss, EsLint + Prettier, Husky Commit Lint

null 9 Nov 6, 2022
PDMLab 26 Oct 24, 2022
Portfolio website with React and Tailwindcss

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: ya

Ezekiel Adetoro 1 Oct 27, 2021
Vite templete for react typescript eslint jest tailwindcss

vite-react-ts-extended vite react-ts templete + eslint, jest, tailwindcss This is the official Vite template(npm init [email protected] myapp -- --template

Laststance.io 61 Nov 17, 2022
my-porfolio using react with tailwindcss :333

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: ya

Nam-Web-Dev 1 Dec 27, 2021
React - NextJs + Tailwindcss+ PWA: JSON Visualizer to turn raw and chunky JSON into Visual good-looking data groups

React - NextJs + Tailwindcss+ PWA: JSON Visualizer to turn raw and chunky JSON into Visual good-looking data groups

pascal de creator 11 Oct 21, 2022
πŸ”· My lovely portfolio built with React, NextJS, and TailwindCSS

Hey there! I'm Brayden and this is my lovely lovely portfolio built using React, NextJS, and TailwindCSS!

Brayden 152 Nov 22, 2022
Randomizer Brasil website made with React Remix TailwindCSS

Randomizer Brasil website - rbr.watch This is the open source project for RBR Website. Made by the community for the community. Our stack React Remix

Pedro Reis 3 Apr 21, 2022
Boilerplate - react + tailwindcss + ant-design + typescript

tw-antd-start-react-ts boilerplate - react + tailwindcss + ant-design + typescript Created with reactjs, tailwindcss, ant-design Screenshots Running l

Carlos Henrique 11 Sep 30, 2022
ReactJS + Vite boilerplate to be used with Tailwindcss.

React Tailwindcss Boilerplate build with Vite This is a ReactJS + Vite boilerplate to be used with Tailwindcss.

JoΓ£o Paulo Moraes 145 Nov 30, 2022
Use TypeScript, TailwindCSS & Sass to quick start your new Next.js app!!

Next.js TypeScript TailwindCSS & Sass Starter Use TypeScript, TailwindCSS & Sass to quick start your new Next.js app!! ⚑️ Quick Start ?? Getting Start

MikevPeeren 20 Nov 7, 2022
Completely static, built with Next.js, Preact, and TailwindCSS

Oxygen Updater website Completely static, built with Next.js, Preact, and TailwindCSS. Detailed setup instructions may follow in a later commit. Getti

Oxygen Updater 2 Mar 6, 2022
Blog app using different modern technology like Next.js, ReactJS, TailwindCSS, GraphQL, GraphCMS, JavaScript, TypeScript, ...

Tony Blog Blog app using different modern technology like Next.js, ReactJS, TailwindCSS, GraphQL, GraphCMS, JavaScript, TypeScript, ... Link Blog: htt

ThinhMe_MDT 4 May 14, 2022
NextJS/FiveM Boilerplate (Typescript, Tailwindcss, Redux Toolkit, DaisyUI)

NextJS/FiveM Boilerplate (Typescript, Tailwindcss, Redux Toolkit, DaisyUI)

null 2 Nov 7, 2022
😊 NextJS Template with Tailwindcss, Eslint, Prettier.

Next.js + Tailwind CSS Example By Pedromdsn Deploy your own Deploy the example using Vercel or preview live with StackBlitz How to use Execute create-

Pedro Nogueira 6 Sep 27, 2022
NextJS 13 + Storyblok CMS 🐸 TypeScript βœ… TailwindCSSπŸƒ Storybook πŸ“š

NextJS 13 - Storyblok Starter Front-end result StoryBlok CMS View Step by Step setup Tutorial [NEW] Here comes the Step-by-Step setup Storyblok starte

Liège Arthur 4 Nov 23, 2022