MERNスタック学習 45日目

フルスタック開発への道のりは45日目に入りました。

昨日は静的HTMLページ向けのExpressルーティングを学びました。今日はTailwind CSSに焦点を当てました。

巨大なCSSファイルを使うのをやめ、現在はユーティリティファーストのワークフローを採用しています。これにより、デザイン作業がスピードアップします。

Tailwindはユーティリティクラスを提供します。これらのクラスを使用して、HTML内で直接カスタムレイアウトを構築できます。

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

  • CDNの代わりにnpmパッケージを使用してTailwindをインストールしました。
  • npm install -D tailwindcss でコンパイラのコアをインストールしました。
  • npx tailwindcss init で設定を行いました。

また、Tailwindがどのようにファイルサイズを削減するかについても学びました。tree-shakingを使用して、使用されていないスタイルを削除します。

HTMLとJSファイルをスキャンするように、tailwind.config.js のcontentパスを設定しました：

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

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

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