Use Tailwindcss in your cross platform React Native applications
source link: https://reactnativeexample.com/use-tailwindcss-in-your-cross-platform-react-native-applications/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
tailwindcss-react-native
Use Tailwindcss in your cross platform React Native applications.
This library is currently under active development.
- ✨ native support for multiple platforms
- ✨ respects tailwind.config.js
- ✨ fast refresh compatible
- ✨ supports dark mode / media queries / arbitrary classes
- ✨ compatible with existing styles
- ✨ Server Side Rendering (SSR) on Web (including responsive styles)
Already using another RN library for Tailwind? Find out why you should switch.
Getting started
Install the library
npm install tailwindcss-react-native
or yarn add tailwindcss-react-native
Add tailwindcss-react-native/babel
to your babel plugins
// babel.config.js module.exports = { plugins: [ 'tailwindcss-react-native/babel' ], }
Add the TailwindProvider
to your application
import { TailwindProvider } from 'tailwindcss-react-native' function MyAppsProviders ({ children }) { return ( <TailwindProvider>{children}</TailwindProvider> ) }
tailwindcss peerDependency
This package has a peerDependency of [email protected]
. You can install it with npm install tailwindcss
or yarn add tailwindcss
Typescript support
Create a file (eg. src/tailwindcss-react-native.d.ts
) and paste this line
import "tailwindcss-react-native/types.d"
Web only
web
requires[email protected]+
(currently in preview). Please see this PR for more info. If your are currently using<=0.17
you can still usenative
for rendering within a browser.
If using { platform: 'web' }
you will need to follow the follow the TailwindCSS installation steps to include it’s styles in the application.
Usage
Simply add a className
attribute to your existing react-native
components
<Text className="font-bold">
You can combine it with existing styles
<Text className="font-bold" style={styles.text}>
Or perform computed logic
export function Test({ isBold, isUnderline }) { const classNames = []; if (isBold) classNames.push("font-bold"); if (isUnderline) classNames.push("underline"); return ( <Text className={classNames.join(" ")}>Hello world!</Text> ); }
Options
Options can be provided via the babel config
// babel.config.js module.exports = { plugins: [ ['tailwindcss-react-native/babel', { platform: 'native' }] ], }
Prop Values Default Description
platform
native
, web
, native-inline
, native-context
native
Specifies how the className is transformed (see platforms
tailwindConfig
Path relative to cwd
tailwind.config.js
Provide a custom tailwind.config.js
. Useful for setting different settings per platform.
How it works
Under the hood, tailwindcss-react-native
performs these general steps
- Use
postcss
to compile the classes usingtailwindcss
and other plugins - Convert the CSS styles to the platform specific styles (eg using
StyleSheet.create
for native) - Remove the
className
attribute and replace/merge it with thestyle
attribute - Utilises a
react
hook for matching media queries.
See the platforms documentation for a more detailed explaination)
GitHub
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK