tailwind-react-native-classnames

Tailwind React Native 类名 ‍♂️

一个简单、表达力强的 API，用于 TailwindCSS + React Native，编写于 TypeScript 中

import { View, Text } from 'react-native';
import tw from 'twrnc';

const MyComponent = () => (
  <View style={tw`p-4 android:pt-2 bg-white dark:bg-black`}>
    <Text style={tw`text-md text-black dark:text-white`}>Hello World</Text>
  </View>
);

特性

• 全面支持所有原生 RN 样式与 Tailwind 相对应的样式: view、layout、image、shadow 和 text。
• 运行速度极快: 根据 此基准测试 来看,是所有 RN 样式库中性能最佳的。
• 与 Tailwind CSS v3 和 v2 兼容
• 尊重您的 tailwind.config.js 以实现全面配置
• 平台前缀: android:mt-4 ios:mt-2
• 支持深色模式: bg-white dark:bg-black
• 支持媒体查询: w-48 lg:w-64 (此外,还支持任意的: min-w-[600px]:flex-wrap)
• 设备方向前缀: portrait:flex-col landscape:flex-row
• 支持 vw 和 vh 单位: h-screen、min-w-screen、w-[25vw] 等…
• 支持 retina 设备像素密度前缀: w-4 retina:w-2
• 支持任意的 JIT 样式: mt-[31px] bg-[#eaeaea] text-red-200/75 等…
• 为最常见的用法提供标记模板字面量语法
• 合并提供的 RN 样式对象,以支持不受支持的实用程序或复杂的使用案例
• 支持通过标准 插件配置 创建自定义实用程序。
• 基于 classnames 包 API 的灵活、条件性的样式。
• 100% 使用 TypeScript 编写,并附带类型。

文档: