🤷‍♀️
Nextにtailwind.configがなくなった話🥹　Part.1　めっちゃ好きだったのに編

2025/04/08に公開
こんにちは！あやにゃんです！大学生です！2024年11月からプログラミングを勉強し始めた超初心者です🔰
間違っているところ、解釈違いなどあれば教えてください‼️

 ✏️はじめに今回は、12月にめっちゃ感動して大好きになっていたtailwind.config.jsが、なんと2月には急になくなってしまったという、私の衝撃体験について喋りまくります‼️😡
突然、慣れ親しんだ設定ファイルが消えてしまうと「勉強したのに、なんで使えんの？！」と怒りが湧きます🌋
けどこれもさいつよエンジニアの登道、もしくは宿命ということなのか。。と受け入れて仕方がないのでNextについて行ってあげることにしましょう。🤷‍♀️
この記事では、かつてのtailwind.config.js がどんな魅力を持っていたのか、そして2月の変更でどのような点が改善されたのかを、初心者が解釈をつらつら述べます。

 ❓tailwind CSS コンフィグとは？tailwind.config.jsのめちゃクソ便利さをつらつら述べます！
Tailwind CSS には元々たくさんのクラスが用意されていますが簡単にいうとtailwind.config.jsでクラスを自分でカスタマイズできるということです。
例えば、
  theme: {
  	extend: {
  		colors: {
  			background: 'hsl(var(--background))',
  			foreground: 'hsl(var(--foreground))',
  			card: {
  				DEFAULT: 'hsl(var(--card))',
  				foreground: 'hsl(var(--card-foreground))'
  			},
  			popover: {
  				DEFAULT: 'hsl(var(--popover))',
  				foreground: 'hsl(var(--popover-foreground))'
  			},
デフォルトではこんな感じになっていて、
全くtailwind.config.jsをいじらないと
<div class='w-10 h-10 bg-red-600'></div>
とCSSを描かないといけないところをtailwind.config.jsを以下のように変えると、
  plugins: [
    function({ addUtilities, theme }) {
      const newUtilities = {
        '.box-red-10': {
          width: theme('spacing.10'),           
          height: theme('spacing.10'),         
          backgroundColor: theme('colors.red.600'),  
        },
      };
      addUtilities(newUtilities);
    }
  ],
三つつけないといけなかったクラスネームが一つでよくなるのです！
<div class="box-red-10"></div>
おっとここでつよつよエンジニアさんから

「それってstyles.css」でもできるくね？って声が聞こえてきた気がします😭

 💁🏻‍♀️実際の使用例でお伝えこれ作った時のやつなんですけど、このアニメーションテールウィンドウコンフィグでやってるんです！
https://youtube.com/shorts/ZdOQ8Dul8fQ?feature=share
そん時の
keyframes: {
			openLid: {
				"0%, 100%": { transform: "translateY(0) rotate(0)" },
				"25%": { transform: "translateY(-10px) rotate(-5deg)" },
				"50%": { transform: "translateY(-15px) rotate(-10deg)" },
				"75%": { transform: "translateY(-10px) rotate(-5deg)" },
			},
			spinPot: {
				"0%, 100%": { transform: "rotate(0)" },
				"25%": { transform: "rotate(8deg)" },
				"50%": { transform: "rotate(12deg)" },
				"75%": { transform: "rotate(8deg)" },
			},
			dots: {
				"0%": { content: '"."' },
				"25%": { content: '".."'},
				"50%": { content: '"..."' },
				"75%": { content: '""' }, 
			},
		},
		  animation: {
			openLid: "openLid 1.5s cubic-bezier(0.42, 0, 0.58, 1) infinite",
        	spinPot: "spinPot 1.5s cubic-bezier(0.42, 0, 0.58, 1) infinite",
			dots: "dots 1.2s steps(4) infinite",
		  },
		},

styles.cssでやれば、CSS と同じ方法でアニメーションを定義でき、直感的に扱えます！

けどけどけど、、プロジェクトが大規模になると、カスタムルールが分散しやすくなる可能性があります！！
だけど〜！tailwind.config.jsからやっちゃえば、次のようなメリットが得られるんです！
一元管理＆統一感

tailwind.config.jsにすべてのアニメーション定義を集約できるので、プロジェクト全体のスタイルが一貫して管理できます。

これにより、デザインの変更やテーマの統一がとても楽になり、後から「こんな感じに統一したい！」という調整も一箇所を変更するだけで済みます！
テーマ連携で柔軟なカスタマイズ

Tailwindのテーマ設定と連動しているため、例えばカラーやスペーシングの変更があった場合、アニメーションにもすぐ反映できるんです。

つまり、全体のデザインルールに合わせた調整がスムーズに行えるのは大きな強みですね！
最適化された最終CSS

Tailwindのビルドプロセスと統合されるおかげで、使われていないクラスは自動で削除され、最終的なCSSファイルが軽量に保たれます。

プロジェクトが大規模になったときでも、余計なスタイルが混ざらずパフォーマンスが向上するので安心です！
再利用性＆メンテナンスの向上

一度tailwind.config.jsに定義してしまえば、複数のコンポーネントで同じアニメーションを手軽に適用できます。

チーム開発の場合、他のメンバーも共通の設定に従って開発できるので、メンテナンス性がグッと高まります！
こんな感じで、styles.cssにバラバラに定義するのとは違い、tailwind.config.jsにアニメーションを集約することで、将来的なアップデートや大規模開発時の管理が非常に楽になるんです！
でもデメリットもあります😭
コンフィグファイルが肥大化する可能性

プロジェクトで多くのカスタムアニメーションやその他のカスタムユーティリティを追加すると、tailwind.config.js がかなり長くなってしまい、管理やメンテナンスが難しくなる可能性があります。
デバッグが複雑になりがち

アニメーションの定義やテーマとの連動による影響を受ける場合、問題が発生したときにどこが原因か特定するのが、直接CSSに書いている場合よりも難しい場合があります。
チームメンバー間での理解のズレ

Tailwind をメインに使っている場合は問題になりにくいですが、慣れていないメンバーがいると、tailwind.config.js 内の定義方法が分かりにくく、ルールの共有に苦労することも考えられます。
まぁこれはトレードオフってワケ

 🥱長くなってきて飽きてきたからまた今度描くちょっと長くなってきたし、もうバイト行かなきゃの時間だし、書くのに飽きてきたので、なくなったけど追加できるとか、なくなってなんで良くなったのかとかはまた今度書きます
あざした
✏️はじめに

❓tailwind CSS コンフィグとは？

💁🏻‍♀️実際の使用例でお伝え

🥱長くなってきて飽きてきたからまた今度描く

Discussion
