学习 MERN Stack 第 45 天

我成为全栈工程师的旅程已经进行了 45 天。

昨天，我学习了如何使用 Express 路由来提供静态 HTML 页面。今天，我掌握了使用 Tailwind CLI 的 Tailwind CSS。

我正在摆脱庞大的 CSS 文件。我正在转向“实用优先”（utility-first）的工作流，以更快地构建布局。

Tailwind 不提供预制的组件。它提供的是小的工具类（utility classes）。这些类让你能够直接在 HTML 中构建自定义设计。

以下是我的技术流程：

  • 我使用 npm 安装了 Tailwind，而不是使用 CDN 链接。
  • 我使用 npm install -D tailwindcss 安装了编译器核心。
  • 我使用 npx tailwindcss init 初始化了配置。

我还学习了 Tailwind 如何通过 tree-shaking 来减小文件体积。这个过程会移除未使用的样式。我配置了内容路径，以便编译器扫描我的静态文件夹。

我的 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