tailwind-rn
v4.2.0
Use Tailwind CSS in React Native projects
0/weekUpdated 3 years agoMITUnpacked: 36.2 KB
Published by Vadim Demedes
npm install tailwind-rntailwind-rn !Status
> Use Tailwind in React Native projects
All styles are generated directly from Tailwind's output, so they're always up-to-date.
- JIT mode
- Responsive breakpoints (e.g. sm, md, lg)
- Dark mode
- Custom configuration
Install
``
$ npm install tailwind-rn
Getting Started
Run the following command to automatically add tailwind-rn to your React Native project:
`
$ npx setup-tailwind-rn
It will do most of the setup for you, but you'll have to follow a few more instructions from setup-tailwind-rn to finish the process.
Manual setup
1. Install tailwind-rn.
`
$ npm install tailwind-rn
2. Install Tailwind and concurrently.
`
$ npm install --save-dev tailwindcss postcss concurrently
3. Create Tailwind config and necessary files.
`
$ npx tailwindcss init
$ echo '@tailwind utilities;' > input.css
These commands will create the following files:
- tailwind.config.js - Tailwind configuration file.
- input.css - Entrypoint for Tailwind compiler. It's required to override the output of Tailwind, so that it doesn't generate CSS for resetting browser styles, which will cause tailwind-rn to fail.
Disable unsupported utilities by adding this line to your tailwind.config.js:
`diff`
module.exports = {
+ corePlugins: require('tailwind-rn/unsupported-core-plugins')
};
Make sure to configure content part of the config in tailwind.config.js to point to your JavaScript files to speed up compilation.
4. Add scripts to build Tailwind styles in package.json.
`diff`
{
"scripts": {
+ "build:tailwind": "tailwindcss --input input.css --output tailwind.css --no-autoprefixer && tailwind-rn",
+ "dev:tailwind": "concurrently \"tailwindcss --input input.css --output tailwind.css --no-autoprefixer --watch\" \"tailwind-rn --watch\""
}
}
5. Build Tailwind styles in watch mode.
`
$ npm run dev:tailwind
After styles are built, you'll see two more files:
- tailwind.css - CSS generated by Tailwind.
- tailwind.json - The same CSS, but converted into JSON, so that tailwind-rn can understand it.
6. Import TailwindProvider and tailwind.json in the root of your app and wrap the root of your app with it:
`jsx
import {TailwindProvider} from 'tailwind-rn';
import utilities from './tailwind.json';
const App = () => (
);
export default App;
`
7. Use Tailwind in React Native!
`jsx
import {useTailwind} from 'tailwind-rn';
const MyComponent = () => {
const tailwind = useTailwind();
return
};
`
Usage
Use useTailwind React hook and apply any of the supported utilities from Tailwind in your React Native views.
`jsx
import React from 'react';
import {SafeAreaView, View, Text} from 'react-native';
import {useTailwind} from 'tailwind-rn';
const Hello = () => {
const tailwind = useTailwind();
return (
Hello Tailwind
);
};
export default Hello;
`
tailwind function returns a simple object with styles, which can be used in any React Native view, such as , and others.
`js`
tailwind('pt-12 items-center');
//=> {
// paddingTop: 48,
// alignItems: 'center'
// }
CLI
`
$ tailwind-rn --help
Use Tailwind CSS in React Native projects
Usage
$ tailwind-rn [options]
Options
-i, --input Path to CSS file that Tailwind generates (default: tailwind.css)
-o, --output Output file (default: tailwind.json)
-w, --watch Watch for changes and rebuild as needed
`
Run tailwind-rn CLI to transform the CSS generated by Tailwind into a JSON file that can be consumed by TailwindProvider. Add --watch flag to watch for changes and build styles continuously, which is useful for development.
API
$3
#### utilities
Type: object
Parsed JSON object of styles generated by tailwind-rn CLI stored in tailwind.json by default.
`jsx
import {TailwindProvider} from 'tailwind-rn';
import utilities from './tailwind.json';
const App = () => (
);
`
#### colorScheme
Type: string
Override the default color scheme. Possible values are light or dark.
`jsx
import {TailwindProvider} from 'tailwind-rn';
import utilities from './tailwind.json';
const App = () => (
);
`
$3
React hook, which returns a tailwind function, that accepts a string with class names. This function returns an object of styles, which can be applied to a React Native view via style property.
Note: Add TailwindProvider above the component where you're using this hook.
`jsx
import {useTailwind} from 'tailwind-rn';
const MyComponent = () => {
const tailwind = useTailwind();
return
};
`
Supported Utilities
$3
- Responsive Breakpoints (all except multi-range breakpoints)
- Dark Mode
- Prefers Reduced Motion
- Viewport Orientation
$3
- Display (only hidden and flex)overflow-hidden
- Overflow (only , overflow-scroll and overflow-visible)relative
- Position (only and absolute)*-auto
- Top / Right / Bottom / Left (all except )z-auto
- Z-Index (all except )
$3
- Flex Direction
- Flex Wrap
- Align Items
- Align Content
- Align Self
- Justify Content
- Flex
- Flex Grow
- Flex Shrink
$3
$3
- Width (all except w-auto and w-screen)h-auto
- Min-Width
- Max-Width
- Height (all except and h-screen)min-h-screen
- Min-Height (all except )max-h-full
- Max-Height (only )
$3
- Font Family (only custom font families that you defined in tailwind.config.js)oldstyle-nums
- Font Size
- Font Style
- Font Weight
- Font Variant Numeric (only , lining-nums, tabular-nums and proportional-nums)text-lg
- Letter Spacing (must be used with font size utilities, e.g. )text-current
- Line Height
- Text Align
- Text Color (all except )decoration-wavy
- Text Decoration
- Text Decoration Color
- Text Decoration Style (all except )
- Text Transform
$3
$3
- Border Color
- Border Style (all except border-current`)
- Border Width
- Border Radius
$3
- Opacity