tailwind.config.jsが見つからない人へ

久しぶりにnext.jsでtailwind cssを使おうとするとtailwind.config.jsが生成されない、そんなお悩みにサクッと回答

結論

v4.2以降ではtailwind.config.jsは自動生成されない.

なぜ消えたのか？

公式ドキュメント曰く、「We've removed this in v4 in hopes that people can use the CSS variables we generate directly instead, which is much simpler and will significantly reduce your bundle size.」
要するに「生成されたCSS変数を直接使えるからもういらないよ」ということらしい

何が変わったのか？

これまではサイト全体の色やフォントサイズ(いわゆるthemeの部分)をJavascriptで管理していました。
それがv4.2では直接CSSで設定を行うことができるようになりました。

分かりやすい部分を見ていきましょう。
アニメーションライブラリを読み込むときに、いままではtailwnd.config.jsに

app.js

import resolveConfig from 'tailwindcss/resolveConfig'
import tailwindConfig from './tailwind.config.js'

const fullConfig = resolveConfig(tailwindConfig)

<motion.div 
  animate={{ backgroundColor: fullConfig.theme.colors.sky[500] }} 
/>

と書いていた部分を

app.js

// resolveConfigなどのインポートは一切不要！
<motion.div animate={{ backgroundColor: "var(--color-brand)" }} />

だけでよくなったということ。

最後に

tailwind.config.jsを探し回っていると、同じような人がredditで質問し、そこでドキュメントをよく読めとぼこぼこにされているところに遭遇、僕にも思いっきり刺さりました...
今後はドキュメントをしっかり見に行くようにします