2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Expo React native tailwind-rn 導入

Posted at

tailwindscssを使ってみたい!

ということで、React-nativeにtailwind-rnを導入してみました。

まずはInstallから。
yarn add tailwind-rn

で、次に
npx tailwindcss init
これで、tailwind.config.jsが作成されます。
この中で、色々カスタマイズ出来る感じなんですかね。
tailwindの公式ドキュメントへのリンク

その次は、
npx create-tailwind-rn
このコマンドで、customした内容も含めて、適用されたstyles.jsonが作成されます。

導入自体は、これで終了。
あとは使用したいコンポーネントで、こうして
import tailwind from 'tailwind-rn';
こう
<Text style={tailwind('text-red-500')}>

tailwindを使用するファイルで初期化するのは、利便性が悪いから、tailwind.jsというのを作成して、どこからでもimportするだけで使えるように設定することをオススメしてくれてるので、おとなしくそうしときましょう。
その内容については、リンク先のドキュメント参照してみてください。
https://github.com/vadimdemedes/tailwind-rn

参照ドキュメント

https://github.com/vadimdemedes/tailwind-rn
https://tailwindcss.com/

2
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?