毎回、かつて正しく感じたテクノロジースタックの決定は、スクリュードライバーがパワードリルを使用した後にどれほど効率が低いかを認識するように、その限界を示し始めます。 HackerNoon が Styled Components を使用したことでそうでした。何年もの間、それは私たちにうまく役立ち、スケールされたスタイル、ダイナミックなテーマ化、そして React コンポーネント内の完全なコントロールを提供しました。しかし、私たちのコードベースが進化し、 Tailwind CSS のようなツールが成熟したにつれて、 変更が遅れてしまいました。スタイリングコンポーネントタイルウィンド CSS変更が遅れました。 This post is a breakdown of our shift from Styled Components to Tailwind CSS, why we made the move, how I approached the transition, and what the process has looked like so far. If you are working with legacy styles or considering Tailwind for your own projects, hopefully this gives you something useful (or at least relatable) to walk away with. Styled Components が最初に CSS を扱うために選択されたとき、私はチームの一員ではなかったが、当時、Tailwind CSS はまだリリースされていなかったし、Styled Components は HackerNoon のフロントエンドアーキテクチャに多くの意味を持ちました。Tailwind CSS はまだリリースされていません これは、開発者がJavaScript内で直接CSSを書くことを可能にし、コンポーネントを完全に自己コンテンツにします。このアプローチは、自然に非常に「React-native」と感じた――encapsulated、reusable、そして、当時、成長するコードベースとチームでより維持しやすくなると考えられました。ダイナミックなスタイリング機能、内蔵のテーマサポート、およびスタイルにプロプションを直接転送する能力は、私たちが構築していた幅広いページやレイアウトのために特によく機能しました。encapsulated, reusable, and, at the time, thought to be easier to maintain encapsulated, reusable, and, at the time, thought to be easier to maintainStyled Components served HackerNoon well 時間の経過とともに、コードベースは増加し、管理スタイルの複雑さも増加した。 Styled Components は私たちに柔軟性を提供しましたが、これはコストがかかりました: より大きなバンドサイズ、 ランタイムパフォーマンスヒット、および より長いスタイリングブロックで満たされた コンポーネント構造。より大きなバンドサイズruntime performance hitscluttered コンポーネント構造 We also noticed many of our styles were repeating across components. That's when Tailwind CSS began to make a lot of sense. ユーティリティーファーストアプローチは、レイアウトから反応性まで、すべてを簡素化する方法のように感じた。タイルウィンド CSS But let's be real: for a small developer team like HackerNoon's, the idea of refactoring a massive codebase line by line felt like a huge undertaking. Yet, we couldn't ignore how widely Tailwind was being adopted in the developer community. We wanted in. このスイッチの最も難しい部分は? Setup. Tailwindのインストールは簡単でしたが、アクティブになったら、PreflightのおかげでTailwindのグローバルなスタイルは既存のコンポーネントと衝突し始めました。 A lifesaver here was setting そこから、私たちはグローバルなスタイルをどのように取り扱い、クラスを再利用し、Tailwindでテーマを意識するコンポーネントを構築するかという新しい条約を強く確立しなければなりませんでした。establish new conventions 新しい条約を確立する And here's the part I'm still amazed by: AI made this process actually enjoyable. 数千行のコードソロを再現することは狂気だったが、チャットGPTを使用してスタイリングされたコンポーネントをタイムウィンドに1つずつ変換した。 Now, let me be honest: AI didn't get everything right. More complex, themed components still required manual coding and plenty of hours. But having a solid base to start from made things so much easier. Tailwind's documentation also helped fill the gaps, and once I fully embraced the utility class mindset, things started to click. I'm happy to say Tailwind is now live on HackerNoon! 🎉 As of now, the HackerNoon Homepage is fully converted to Tailwind CSS, with Styled Components completely removed. Most of the other pages still rely on Styled Components, and they’ll be converted gradually—one component, one page at a time. この遅いアプローチは実際には祝福でした。各コンポーネントを再構成することで、ページのデザインと構造を 見直し、 を改善することができました。Tailwind 変換に加えて、私たちは より近代的な UI、より良いレイアウトの使用、新しいコンポーネント、そして私たちの古いテーマシステムを恥じさせる トピックピッカーを追加しました。revisit and improve more modern UI Custom-built theme picker HackerNoonで4年以上働いた後、私はreignitedが再び私たちのコードベースに潜入していると感じています。 Tailwindは再びビルディングを楽しませてきました。それはクリーンで、一貫性があり、強力です - そして私は変換を前進させ続けることに興奮しています。誰が知っているでしょうか? もしかしたら、近いうちに私たちは Tailwind CSSへの移行はスタイリングライブラリの交換だけではなく、フロントエンドのワークフローを近代化し、一貫性を採用し、開発を簡素化することでした。柔軟性、スピード、および維持性 それはまだ進行中の仕事です - 私たちのアプリにはまだ多くのスタイリングコンポーネントがあります - しかし、私たちのホームページと新しく改装されたコンポーネントでTailwindをライブで見ることは信じられないほど有益です。 HackerNoonは進化しており、私たちのスタイルはそれとともに進化しています。
Why HackerNoon Originally Used Styled Components
What Made Us Consider Switching to Tailwind?
How I Made the Switch
preflight: false in the tailwind.config.js file. That move disabled most of Tailwind's base resets, which brought back some order. もちろん、まだ小さなスタイリングの問題が修正されていたが、物事は戦争ゾーンのように見えなかった。preflight: falsetailwind.config.jsタイルウィンドのベースリセットのほとんどを無効にした
What the Migration Looks Like So Far
package.jsonからstyled-componentsを削除します。reignited トップページstyled-componentspackage.json
Final Tailwinding Thoughts
