やるぶろ

なんでもやる。垂れ流す。汚いです。

ReactアプリにTailwind CSSを適用する

23:50
こんな時間だけどやる気が出たのでReduxのセレクタを理解していきたい。

お題はTodoアプリ。

idとtitleを持つTaskの配列をstateで管理し、
指定したidのTaskのtitleをセレクタで取得するような処理を書きたい。

まずはざっくり画面を作る。

componentの構成はこんな感じ
Index
└App
 ┝Header
 └TaskList
  └TaskItem

一旦ルーティングやサーバー側の実装はなし。
stateの初期値と変更後の値でごちゃごちゃしてみよう。

Tailwind CSSを入れる

公式さん
Tailwindが入らない〜

$ npx tailwindcss-cli@latest init
npx: installed 141 in 21.035s
Invalid or unexpected token
(node:1648) ExperimentalWarning: The fs.promises API is experimental

nodeのバージョンが古いかも?
参考

アップデートしました。
参考 - Option2

お次は@tailwindが解決しない
f:id:momoshima:20211014004838p:plain

craco.config.jsがroot直下にないだけだった。
srcの下に作っちゃってた。

スタイルが適用されるようになった!