css

nth-child 親要素内のすべての子要素に対して適用され、その中から条件に一致する要素が選択される。 そのため要素の種類に関係なく、すべての子要素が考慮される。 nth-of-type 親要素内の特定の要素タイプ（タグ名）に対して適用され、その中から条件に一致する要素が選択される。 そのため要素の種類に基づいて選択がされる。 具体例 例えば以下のコードがあった時、 <div class="example"> <div>Item 1</div> <p>Item 2</p> <div>Item 3</div> <p>Item 4</p> <div>Item 5</div> </div> nth-child .example div:nth-child(3) { color: red; } この場合、.example内の直下のdiv要素の中から、3番目の要素（“Item 3”）が赤くなる。 nth-of-type .example div:nth-of-type(3) { color: blue; } この場合、.example内の直下のdiv要素の中から、同じ種類の要素の中で3番目の要素（“Item 5”）が青くなる。

React NativeでTailwind CSSを使用したいということで調べてみると下記２つが該当した。 tailwind-rnとnativewindの比較 tailwind-rn ☆4.1k nativewind ☆3k スターはtailwind-rnが上回っているけど、活動の多さではnativewindが上回っているようなので、nativewindを採用した。 nativewindの導入 ドキュメントも丁寧なのでなぞって行っていく。 npm i nativewind npm i --dev tailwindcss 上記コマンドで該当パッケージをインストールする。 npx tailwindcss init 次に上記コマンドでtailwind.config.jsを作成し、下記のように記載する。 // tailwind.config.js module.exports = { - content: [], + content: ["./App.{js,jsx,ts,tsx}", "./<custom directory>/**/*.{js,jsx,ts,tsx}"], theme: { extend: {}, }, plugins: [], } <custom directory>は自身のディレクトリに編集する。 次にbabel.config.jsを下記のように編集していく。 // babel.config.js module.exports = function (api) { api.cache(true); return { presets: ["babel-preset-expo"], + plugins: ["nativewind/babel"], }; }; 以上とのことなので、起動してみる。 無事に開発環境は動いている。 次にnativewindの記述を反映することができるか確認してみる。 <View style={styles.container}> <Text>Hello World!...