v4.2.0

Highlights

• Add colorScheme prop to override system color scheme (#129 by @catalinmiron) cbd5cd0

v4.1.0...v4.2.0

v4.1.0

Highlights

• Allow easy disabling of unsupported utilities (#144) 29f4461

v4.0.1...v4.1.0

v4.0.1

Highlights

• Ignore transforms 365af73
• Fix race condition during file watching (#136 by @timbastin) cdd2a82

v4.0.0...v4.0.1

v4.0.0

✨ After a long break, tailwind-rn is back with a major new release!

Start in one command

If you can't wait to try it out, you don't have to keep reading, just run the following command inside your React Native project:

$ npx setup-tailwind-rn

It will set up tailwind-rn and print the remaining few instructions to finish the process.

What's new

This tool now supports:

• Tailwind 3.0
• JIT compiler
• Responsive design
• Dark mode
• Dynamic utilities
• Custom configuration, including breakpoints, modifiers and utilities

Tailwind 3.0

This release brings full support for Tailwind 3.x releases. All you have to do is install or update tailwindcss dependency:

$ npm install --save-dev tailwindcss@latest

JIT compiler

There's a revamped CLI with --watch flag, which continuously watches for changes to the Tailwind's CSS output file and transforms it into JSON for tailwind-rn to consume. Run it alongside tailwindcss --watch and you're good to go!

Responsive design

Thanks to the new useTailwind React hook, responsive design and other modifiers are supported out of the box. You can now apply styles based on the screen width or height:

const tailwind = useTailwind();
return <View style={tailwind('justify-center sm:justify-start')}/>;

There are also portrait and landscape modifiers to change your UI based on device orientation:

const tailwind = useTailwind();
return <View style={tailwind('flex-col landscape:flex-row')}/>;

Dark mode

Turn the lights off with support for Tailwind's dark modifier:

const tailwind = useTailwind();
return <View style={tailwind('bg-white dark:bg-black')}/>;

Dynamic utilities

Thanks to the new on-by-default JIT compiler in Tailwind 3.0, you no longer have to customize your config when you need some one-off utilities. You can use the new syntax to customize utility's value:

const tailwind = useTailwind();
return <View style={tailwind('opacity-[0.67]')}/>;

Custom configuration

Now here are some really great news! You don't have to use a different API to generate the styles when you need to customize your Tailwind config. With this release of tailwind-rn, update your tailwind.config.js and tailwind-rn will automatically pick up your changes.

Migration from v3.x

There's a migration guide available for those upgrading from the previous versions of tailwind-rn → https://github.com/vadimdemedes/tailwind-rn/blob/master/migrate.md.

Changes

This release has an entirely new API, so it's best to check out the migration guide above if you're interested in the differences between this and the last major version.

• Remove create function to create a new tailwind function with a custom config
• Remove getColor function
• Remove default tailwind function export and replace it with TailwindProvider + useTailwind combo

v3.0.1...v4.0.0

v3.0.1

Highlights

• Support classes with dots in them, like h-0.5 06259ec

v3.0.0...v3.0.1

v3.0.0

Highlights

• Support full customization (#43) 0e8c925
• Support Tailwind 2
• Adds opacity support to getColor (#34) 6c21ebd

Credits

Thanks to @eduludi and @chewyiscrunchy for contributing to this release!

v2.0.1...v3.0.0

v2.0.1

Highlights

• Support custom max-height and min-height utilities (#41) b22d82c

v2.0.0...v2.0.1

v2.0.0

Highlights

• Update to Tailwind CSS v1.8.10
• Add support for letter spacing (breaking)
• Add support for font variant numeric

Letter spacing

This release of tailwind-rn fixes support for letter spacing utilities, but it's a breaking change.
Tailwind CSS defines tracking-* utilities using em units, which means value needs to be calculated relatively to the font size.
Since React Native doesn't expose the default font size, tailwind-rn requires you to set font size using text-* utilities if you want to set letter spacing via tracking-* utilities.

// Throws because font size isn't set
tailwind('tracking-normal');

// Returns the correct letter spacing relative to the font size
tailwind('font-xl tracking-normal');

Font variant numeric

There's now support for new font variant numeric utilities.

tailwind('lining-nums tabular-nums');

v1.1.1...v2.0.0

v1.1.1

Highlights

• Skip extra spaces (thanks @jericopulvera) 83f8eeb

v1.1.0...v1.1.1

v1.1.0

Highlights

• Support custom configuration d1abefb
• Update to Tailwind CSS v1.4.6
• Add text, background and border opacity 210951b cda704d
• Exclude text-current and border-current utilities 6126ffe

v1.0.2...v1.1.0