我如何使用 Tailwind CSS 设置我的 Frontend Mentor 项目

最近工作中任务有所调整，我无法像往常一样享受作为开发者的乐趣——也就是说，没有前端特性需要构建。为了弥补这一点，我重新开始在前端导师平台上进行项目开发，该平台提供精美UI模型，开发者可以将其转化为真实的项目。大约一年前我开始使用这个平台，并且印象深刻，不仅因为项目质量高，还因为其注重社区建设，尤其注重开发者对辅助功能最佳实践的教育。这是一个很棒的资源，我强烈推荐给任何希望在真实项目中磨练前端技能的开发者——难度各不相同，从只需要HTML和CSS就能完成的非常简单的项目开始，所以每个技能水平都能找到适合自己的项目！

该平台的一大优点是，它只提供设计和一些基本的入门代码，因此您可以自由选择任何您喜欢的技术组合来完成项目。就我个人而言，我正在努力减少框架的使用¹，并专注于编写语义化HTML，并添加一些纯JS来实现交互性，所以这就是我未来解决方案的主要构成。

话虽如此，我仍然非常喜欢将Tailwind作为我的侧边项目样式解决方案。我已经在专业领域使用它大约三年了，我发现它在有用的默认实用程序类和扩展其基本功能时的愉悦开发体验之间取得了很好的平衡（我们在下面详细介绍）。我并不是建议初学者应该立即使用Tailwind进行构建——一定要先学习CSS！但是，作为一个非常了解CSS工作原理的人，Tailwind对我来说是一个提高生产力的工具，因为我理解它的实用程序类在底层做了什么。

因此，在我完成前端导师的几个挑战后，我已经多次需要将Tailwind添加到提供的项目启动代码中。我认为，对于刚接触该平台但又希望在其项目中使用Tailwind的其他开发者来说，记录我在典型启动项目中安装和配置Tailwind的工作流程可能会有所帮助。正如依赖项管理中的许多事情一样，大约有数百万种不同的方法可以做到这一点。这仅仅是我的首选方法，因此您的实际效果可能会有所不同。

安装Tailwind

包安装

首先，您需要导航到从前端导师下载的启动代码的根目录，并运行以下命令来安装Tailwind及其依赖项：

npm install -D tailwindcss postcss autoprefixer

关于依赖项的一些说明：

• Tailwind CSS使用PostCSS来处理您的CSS。PostCSS是一个使用JavaScript插件转换CSS的工具，而Tailwind CSS本身就是一个PostCSS插件²。
• Autoprefixer是一个PostCSS插件，它使用Can I Use中的值向您的CSS规则添加供应商前缀。它确保您的CSS可以在不同的浏览器中工作。

从技术上讲，这些不是在项目中安装Tailwind所必需的，但我通常发现使用它们时运行会更流畅。

初始化TailwindCSS

接下来，我们要使用以下命令生成tailwind.config.js和postcss.config.js文件：

npx tailwindcss init -p

配置源路径

接下来，导航到tailwind.config.js并向content数组添加index.html——这将确保清除不必要的样式。您可以在Tailwind的Content Config文档中阅读更多关于其实际工作方式的信息。

请注意，如果您为项目创建了多个将使用Tailwind实用程序类进行样式设置的HTML文件，则还必须将其路径添加到此数组中。

<code>module.exports = {
  content: ["index.html"],
  theme: {},
  plugins: [],
};</code>

在您的CSS中包含Tailwind

在您的项目根目录中创建一个CSS文件（我通常将其命名为styles.css），并将以下内容添加到其中：

<code>@tailwind base;
@tailwind components;
@tailwind utilities;</code>

添加和运行构建脚本

在您的package.json文件中，添加一个脚本以构建您的CSS。这将创建一个包含已构建样式的output.css文件。--watch标志允许我们实时观察CSS更改，这意味着我们不必每次更新样式时都重新启动脚本。

请注意，您可以将此命令命名为您喜欢的任何名称——我只是在这里遵循约定。

<code>"scripts": {
  "build:css": "tailwindcss build styles.css -o output.css --watch"
}</code>

现在，您可以通过运行以下脚本编译您的CSS：

npm run build:css

链接样式表

最后，您需要在index.html文件（以及您希望样式应用于的任何其他HTML文件）的头部包含一个link标签：

<code><link href="output.css" rel="stylesheet"></link></code>

您现在应该能够测试Tailwind是否在此文件中工作。我通常添加类似的内容>

安装项目字体

当您从前端导师下载项目的启动代码时，它们包含用于您将构建的设计中的字体的字体文件。这通常包括可变字体文件和静态字体文件的组合。出于我们的目的，我们将使用./assets/fonts/static中提供的文件。

我建议您查看这些文件以及项目根目录中提供的style-guide.md文件，以了解使用了哪些字体以及需要哪些字体粗细。

添加@font-face规则

确定后，您需要在项目根目录中创建另一个新的CSS文件（我通常将其命名为fonts.css），然后为启动代码中提供的每个字体文件定义@font-face规则：

<code>@font-face {
  font-family: "Inter";
  font-weight: 400;
  src: url("assets/fonts/static/Inter-Regular.ttf") format("ttf");
}

@font-face {
  font-family: "Inter";
  font-weight: 600;
  src: url("assets/fonts/static/Inter-SemiBold.ttf") format("ttf");
}

@font-face {
  font-family: "Inter";
  font-weight: 700;
  src: url("assets/fonts/static/Inter-Bold.ttf") format("ttf");
}</code>

上面的示例来自我对社交链接配置文件挑战的解决方案，该解决方案使用三种不同粗细的Inter字体。

定义字体面后，需要像前面使用output.css一样在HTML文档中链接样式表：

<code>module.exports = {
  content: ["index.html"],
  theme: {},
  plugins: [],
};</code>

扩展Tailwind配置

现在，我们需要扩展tailwind.config.js中的主题以添加一些实用程序类，以便在需要的地方应用我们的项目字体：

<code>@tailwind base;
@tailwind components;
@tailwind utilities;</code>

请注意，如果您的项目有多个自定义字体，您可以在fontFamily对象中定义任意数量的属性。您可以将这些属性命名为您喜欢的任何名称，但我通常只是将字体的名称转换为短横线连接形式，以与大多数Tailwind实用程序开箱即用的写法保持一致，例如comic-sans。

现在，您应该能够将font-inter类添加到您的HTML中，并看到您的新字体应用于您的标记！您还可以使用我们设置的不同字体粗细，例如font-semibold，以600粗细应用字体。

<code>"scripts": {
  "build:css": "tailwindcss build styles.css -o output.css --watch"
}</code>

以上是我如何使用 Tailwind CSS 设置我的 Frontend Mentor 项目的详细内容。更多信息请关注PHP中文网其他相关文章！