Tailwind CSS を使う時に一緒に入れたいライブラリが参考になった。 px-4とpy-6というクラスを持つコンポーネントにp-10というクラスを渡した場合、CSS カスケードにより、p-10というスタイルは無視される。 CSS カスケードというのは、 異なるソースから来るプロパティ値を組み合わせる方法を定義するアルゴリズム のこと。 で、今回は詳細度でp-10は無視される。 ただコンポーネントで上書きしようとしたスタイルが無視されるのは困る。 そこで必要となるのが、tailwind-merge。 tailwind-mergeはコンフリクトした Tailwind CSSのクラス名を取り除きつつ結合するライブラリで、上記では後から指定されたp-10により、px-4とpy-6というクラスが結果からとりの結果から取り除かれる。 結果、意図した挙動をするコンポーネントができあがる。
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!...
Vite（読み方はヴィート）とは？ 次世代フロントエンドツール 最先端をいく開発環境を構築しましょう と謳うように下記のような特徴を持つ。 瞬時にスタートするサーバ 超高速な HMR 豊富な機能 最適化されたビルド ユニバーサルなプラグイン 完全に型定義がされている API これを読んでもピンとこないと思うので、まずは環境構築をしてみてほしい。 そのスピードに驚くこと、間違いない。 React & TypeScrpt の環境構築 $ npm create vite@latest MyApp -- --template react-ts というコマンドを叩くだけで、 Need to install the following packages: create-vite@4.2.0 Ok to proceed? (y) y √ Package name: ... MyApp Scaffolding project in C:\Project\MyApp... Done. Now run: cd MyApp npm install npm run dev 環境が構築される。 この時点でもうReactの開発環境が構築されている。 Tailwindを導入する reactにおけるcssの取り扱いは少し癖があり悩むところがあるので、何も考えずにtailwindを導入する。 npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p 上記コマンドでTailwindのインストールと設定ファイルを作成する。...