tailwind-rn Files

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

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

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

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

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

https://github.com/vadimdemedes/tailwind-rn/compare/v3.0.1...v4.0.0