JSPM

nativewind

3.0.0-5a825c0.0
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 219626
  • Score
    100M100P100Q162985F
  • License MIT

Use Tailwindcss in your cross-platform React Native applications

Package Exports

  • nativewind
  • nativewind/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (nativewind) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme


NativeWind is a complete tooling solution to use Tailwind CSS on all React Native platforms (ios/android/web/window/macos/etc). It can be used either as a utility styling library or for building your own component library.

On native devices, NativeWind pre-builts your styles and uses a minimal runtime for dynamic styles. While in your browser, it provides a compatibility layer between React Native and your CSS.

In addition to styling, NativeWind provides optional Babel plugins to create a consistent developer experience, such as supporting a className prop on any component.

In Action

Click the picture to go to a live example!

Highlights

  • Works on all RN platforms, uses the best style system for each platform.
  • Uses the Tailwind CSS compiler (always get up-to-date features)
  • Native styles are computed at build time
  • Babel plugin for simple setup and improving intellisense support
  • Respects all tailwind.config.js settings, including themes, custom values, plugins

Styling Features

  • Supports px/%/rem/vw/vh
  • Polyfills pseudo classes - hover / focus / active are available on compatible components
  • Supports arbitrary classes / media queries
  • Supports clamp()
  • Platform only variants eg. android:text-black
  • Group and named groups allow styling based upon parent state
  • Create simple layouts with gap/space/divide

Built your own multi-platform component library

  • Create complex components with the styled() helper
  • Supports dynamic theme values via CSS variables (which work on Native!)
  • Supports light / dark mode
  • Supports variants and compound-variants

Documentation

All documentation is on our website https://nativewind.dev