React Native（Expo）でTailwind CSSを使う方法

プログラミング

tailwind-rnではshadow utilityが対応していなかったりと不便でしたので、現在はTailwind React Native Classnamesというパッケージを使用しています。

参照：https://www.npmjs.com/package/tailwind-react-native-classnames

インストール方法

Tailwind CSSをインストール

//yarn
yarn add tailwind-rn
//npm
npm install tailwind-rn

//create-tailwind-rn時にエラーが出てしまったのでtailwindcssを追加（入れなくてもTailwind CSS自体は使えます）
yarn add tailwindcss
//または
npm install tailwindcss

//Tailwind CSSの設定ファイル（tailwind.config.js）を追加
npx tailwindcss init
//tialwind-rnの設定ファイル（styles.json）を追加
npx create-tailwind-rn

react-native-tailwindcssというパッケージもありますが、tailwind-rnは素の記述方法で進められそうでした。ここではtailwind-rnを使うことにします。お好みで選んでください。

Tailwind CSSをインポート

import tailwind from 'tailwind-rn';

これだけです。

利用例

import React from 'react';
import {SafeAreaView, View, Text} from 'react-native';
import tailwind from 'tailwind-rn';

const App = () => (
	<SafeAreaView style={tailwind('h-full')}>
		<View style={tailwind('pt-12 items-center')}>
			<View style={tailwind('bg-blue-200 px-3 py-1 rounded-full')}>
				<Text style={tailwind('text-blue-800 font-semibold')}>
					Hello Tailwind
				</Text>
			</View>
		</View>
	</SafeAreaView>
);

export default App;

引用元：https://www.npmjs.com/package/tailwind-rn

Tailiwind CSSのクラスを改行して管理したい場合は、シングルクオーテーションではなくバッククオーテーションで囲う必要があります。class=""で指定するわけではないからか、prettierが機能してくれないのが悩みどころです。

まとめ

純粋にTailwind CSSのパッケージを読み込む方法でもいけるかもですが、この方法は楽で良いですね。

参考

ー　この記事をシェアする？　ー

この記事にコメントする

このサイトはreCAPTCHAとGoogleによって保護されています。プライバシーポリシーと利用規約が適用されます。

Related / 関連記事