私は今までCSS、Tailwind CSSを勉強しました。
Tailwind CSSの関連記事
Tailwind v4の余白がわからない！mb-6の中身「calc(var(–spacing) * 6)」を調べた話
Tailwindの色「–color-ink-soft」って何色？VScodeの拡張機能「Color Highlight」が便利！
Tailwind CSS｜–color-〇〇 の「〇〇」がそのままクラス名になる
Tailwindの hover: や md: って何？状態プレフィックスのしくみを調べた
Webのほうでは、余白の数字の意味や色の変数のしくみまで調べて、記事にもしてきました。
それなのに、React Nativeのコードを開いたら className が1つも出てきませんでした。
CSSファイルを探しても見つかりません。
見た目を少し変えたいだけなのに、どこを書き換えればいいのかが分からないという状態でした。
今回は、スタイルがどこに書かれているのか、CSSと何が違うのか、そして勉強したTailwindは使えるのかを調べて整理しています。
CSSファイルは最初から存在しない
結論から書くと、見た目の指定は画面のファイルの中に一緒に書かれています。
別ファイルではありません。
画面のファイルを一番下までスクロールすると、だいたいここにあります。
const styles = StyleSheet.create({
container: { flex: 1 },
title: {
fontSize: 24,
fontWeight: '600',
},
});これがCSSにあたる部分でした。
私はファイルの上のほうばかり見ていたので、しばらく気づきませんでした。
スタイルを探すときは、ファイルの一番下を見るのが早いです。
画面が長くなってくると、styles. で検索して該当の名前まで飛ぶほうが確実だと思います。
classNameではなくstyleで指定する
作ったスタイルを当てるときは、こう書きます。
<Text style={styles.title}>サンプル</Text>ここで大事なのは、styles という名前は決まりごとではないという点です。
さっきの const styles = StyleSheet.create(...) で自分が付けた変数名を、そのまま呼び出しているだけです。
CSSのクラス名のように、どこか外側で共有されているわけではありません。
そのファイルの中でしか使えません。
他の画面で同じ見た目を使いたければ、別ファイルに切り出してimportする形になります。
ここはWebのCSSと考え方がかなり違うところでした。
CSSと似ているけれど、書き方が違う
プロパティ名がキャメルケースになる
CSSの font-size は fontSize になります。
background-color は backgroundColor、margin-bottom は marginBottom。
ハイフンをなくして、次の単語の頭を大文字にする形です。
これはJavaScriptのオブジェクトとして書いているからで、ハイフンがそのままだと引き算の記号と区別が付かなくなるためのようです。
単位を書かない
24px ではなく 24 と書きます。
fontSize: 24,
marginBottom: 16,数字だけです。
Tailwindの mb-6 が内部で 4px × 6 の計算をしていたのに対して、React Nativeは数字がそのまま入る形になります。
ここは逆に分かりやすいと思いました。
ちなみに、この数字は正確にはピクセルではなく、画面の密度に合わせて調整される単位のようです。ただ、書くときはピクセルの感覚で問題ないという理解でいます。
Tailwindの余白のしくみについては、Webのほうで別に書いています。
値の書き方が2種類ある
数字はそのまま、それ以外は文字列としてクォートで囲みます。
flex: 1,
fontSize: 24,
color: '#333333',
fontWeight: '600',
alignItems: 'center',fontWeight がクォート付きなのが少し引っかかりました。
数字に見えますが文字列として扱う決まりになっているようです。
セレクタという考え方がない
ここが、CSSに慣れているほど戸惑うところでした。
.card p のような子孫セレクタも、複数のクラスをまとめて指定する書き方も、React Nativeにはありません。
スタイルは、当てたい部品1つずつに直接書きます。
そして継承もほぼありません。
親の View に文字色を書いても、中の Text には効きません。
// これは効かない
<View style={{ color: 'red' }}>
<Text>赤くならない</Text>
</View>
// Textに直接書く
<View>
<Text style={{ color: 'red' }}>赤くなる</Text>
</View>調べた範囲では、Text の中に Text を入れた場合だけは文字の設定が引き継がれるようです。
それ以外は、ひとつずつ書く前提になっています。
コードにスタイルの指定がやたら多く見えるのは、この作りのせいだと分かりました。
hoverの代わり
指で操作するので :hover はありません。
押している間だけ見た目を変えたい場合は、Pressable の機能を使って書きます。
<Pressable
style={({ pressed }) => ({
opacity: pressed ? 0.6 : 1,
})}
>
<Text>押す</Text>
</Pressable>「押されているかどうか」を受け取って、その場で値を切り替える書き方です。
CSSの疑似クラスとは考え方が違いますが、やりたいことは同じでした。
スタイルは重ねて当てられる
複数のクラスを並べる書き方の代わりが、これでした。
<View style={[styles.card, styles.active]} />配列にすると、順番に適用されます。
同じプロパティが重なった場合は後ろに書いたほうが勝ちます。
条件によって切り替えたいときは、こう書けます。
<View style={[styles.card, isActive && styles.active]} />条件に合わないときは何も足されません。
Tailwindでクラスを付け外ししていたのと、やっていることは近いと思いました。
レイアウトはFlexboxだけ
グリッドもフロートもありません。
並べ方はすべてFlexboxで、しかも display: flex を書く必要がありません。
最初から全部Flexボックスとして扱われます。
そのうえで、Webと決定的に違う点がありました。
flexDirection の初期値が column です。
Webは row（横並び）が初期値なので、ここが逆になっています。
つまりReact Nativeでは、何も書かなければ縦に積まれます。
横に並べたいときだけ、明示的に書きます。
flexDirection: 'row',スマホの画面は縦に積むほうが多いので、その前提に合わせた初期値なのだと思います。
それから、コードでよく見かける flex: 1 は「余っている空間をめいっぱい使う」という指定です。
一番外側の枠に付いていることが多く、これがないと画面いっぱいに広がらないことがあります。
StyleSheet.createを使う理由
スタイルは、その場に直接書くこともできます。
<Text style={{ fontSize: 24 }}>サンプル</Text>波かっこが2重になっているのは、外側がJavaScriptを書く合図、内側がオブジェクトだからです。
これでも動きます。
ただ、この書き方だと画面が再描画されるたびに同じオブジェクトを作り直すことになります。
StyleSheet.create にまとめておくと、その無駄がなくなるとされています。
加えて、単純に読みやすさが違います。
画面の構造とスタイルが混ざらないので、直したい場所を探しやすくなりました。
Tailwindは使えるのか
本題です。
標準のReact Nativeでは、className は使えません。
ただ、NativeWindというライブラリを入れると使えるようになります。
これはTailwindのクラス名を読み取って、React Nativeのスタイルに変換してくれるものです。
<View className="flex-1 items-center justify-center">
<Text className="text-2xl font-semibold">サンプル</Text>
</View>見た目はWebのTailwindとほぼ同じです。
ただ、調べていていくつか注意点が見つかりました。
Tailwindのバージョンに注意
2026年8月時点で、安定版のNativeWind v4が対応しているのはTailwind v3です。（調べた情報）
Tailwind v4に合わせたNativeWind v5は、まだプレビュー段階という位置づけになっています。
私がWebで勉強したのはTailwind v4のほうだったので、ここは正直まったく想定していませんでした。
@theme で色変数を定義する書き方や、calc(var(--spacing) * 6) のしくみはv4のものです。
安定版で始めると、そのあたりの書き方が変わることになります。
Webのクラスが全部動くわけではない
React Nativeにはそもそもグリッドがないので、grid 系のクラスはアプリ側では効きません。
影やアニメーション、画面幅による切り替えも、Webとは挙動が違うとされています。
「Tailwindがそのまま動く」というより、Tailwindの書き方でReact Nativeのスタイルを書けると考えたほうが近そうです。
できないことにぶつかったときは、結局StyleSheetの知識が必要になります。
まとめ
CSSファイルが見つからなかったのは、探す場所が違っただけでした。
スタイルは画面のファイルの一番下にあって、StyleSheet.create の中にまとまっています。
プロパティ名はキャメルケース、単位は書かない、セレクタは無いので1つずつ指定する。
そして並べ方は全部Flexboxで、初期値が縦積み。
Tailwindについては、NativeWindを入れれば書けるものの、勉強したv4とは前提がずれることが分かりました。
コンポーネントそのものの書き方については、前の記事にまとめています。
ここまで読んでくださりありがとうございました。
この記事のカテゴリー
開発ブログ の記事をもっと見る →