Releases: vadimdemedes/tailwind-rn
v4.2.0
Highlights
- Add
colorScheme
prop to override system color scheme (#129 by @catalinmiron) cbd5cd0
v4.1.0
v4.0.1
Highlights
- Ignore transforms 365af73
- Fix race condition during file watching (#136 by @timbastin) cdd2a82
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 newtailwind
function with a custom config - Remove
getColor
function - Remove default
tailwind
function export and replace it withTailwindProvider
+useTailwind
combo
v3.0.1
v3.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
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