ExpoにTailwind React Native Classnamesを導入

はじめに

ゆとり世代の中野です。

今回チャレンジした内容は【ExpoにTailwind React Native Classnamesを導入】です。

さっそくチャレンジについて書いていきます。

チャレンジする背景

ExpoでもTailwindを使いたい

チャレンジ内容

ExpoでもTailwindを動かす

やり方

packageを追加

yarn add twrnc

まとめ

packageを追加するだけです

さいごに

具体的な使い方は公式を見てください

Reference

twrnc

A simple, expressive API for TailwindCSS + React Native, written in TypeScript full support for all native RN styles with tailwind counterparts: (view,layout,image,shadow, andtext). compatible with Tailwind CSS v3 and v2 respects your tailwind.config.js for full configuration platform prefixes: android:mt-4 ios:mt-2 dark mode support: bg-white dark:bg-black media query support: w-48 lg:w-64 (also, arbitrary: min-w-[600px]:flex-wrap) device orientation prefixes: portrait:flex-col landscape:flex-row retina device pixel density prefix: w-4 retina:w-2 arbitrary, JIT-style classes: mt-[31px] bg-[#eaeaea] text-red-200/75, etc...

www.npmjs.com

yutanakano

WEBエンジニア

大阪生まれのゆとり世代です

趣味はバイクでツーリングに行くこと

愛車は Ninja ZX-25R SE KRT EDITION

Expoでプロダクトを作っています