MERNスタック学習 45日目

MERNスタック学習 45日目

フルスタックエンジニアを目指す道のりに足を踏み入れて45日が経ちました。

昨日はExpressのルーティングを使用して静的なHTMLページを配信する方法を学びました。今日はTailwind CLIを使用してTailwind CSSをマスターしました。

巨大なCSSファイルから離れ、レイアウトをより迅速に構築するために、ユーティリティファーストのワークフローへと移行しています。

Tailwindは既製のコンポーネントを提供するのではなく、小さなユーティリティクラスを提供します。これらのクラスを使用することで、HTML内で直接カスタムデザインを構築できます。

私の技術的なプロセスは以下の通りです：

• CDNリンクを使用する代わりに、npmを使用してTailwindをインストールしました。
• npm install -D tailwindcss でコンパイラのコアをインストールしました。
• npx tailwindcss init で設定を初期化しました。

また、Tailwindがtree-shakingを通じてどのようにファイルサイズを削減するかについても学びました。このプロセスにより、使用されていないスタイルが削除されます。コンパイラが静的フォルダをスキャンできるように、contentパスを設定しました。

私の tailwind.config.js の設定：

module.exports = {
  content: ["./public/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

この設定により、最終的なCSSファイルが軽量かつ高速に保たれます。

出典: https://dev.to/ali_hamza_589ec7b3eb6688d/day-45-of-learning-mern-stack-ai3