如何在 Svelte 网站上使用 Tailwind

让我们创建一个基本的 Svelte 网站，并将 Tailwind 集成到其中以进行样式设置。使用 Tailwind 的一个优势是，由于您直接在 HTML 上将样式应用为类，因此无需在 HTML 和 CSS 之间来回切换上下文。在 Svelte 中，所有内容都在 同一个文件中，但即使这样，您也不需要在 <style> 文件中使用 .svelte 部分。

如果您是 Svelte 开发人员或爱好者，并且希望在您的 Svelte 应用程序中使用 Tailwind CSS，本文将介绍在您的应用程序中安装 Tailwind 的最简单、最直接的方法，并开始创建独特的现代 UI 为您的应用程序。

如果您只想查看一个可用的示例，这里有一个可用的 GitHub 存储库.

步骤 1：搭建新的 Svelte 网站

Svelte 为我们提供了一个入门模板，我们可以使用它。您可以通过克隆 Svelte GitHub 存储库 或使用 degit 来获取它。使用 degit 为我们提供了一些优势，例如帮助我们复制入门模板存储库，而不会下载其完整的 Git 历史记录（与 git clone 不同）。这使得该过程更快。请注意，degit 需要 Node 8 及更高版本。

运行以下命令以使用 degit 克隆入门应用程序模板

npx degit sveltejs/template project-name

导航到入门项目的目录，以便我们可以开始对其进行更改

cd project-name

模板目前几乎是空的，因此我们需要安装一些必需的 npm 包

npm install

现在您的 Svelte 应用程序已准备就绪，您可以继续将其与 Tailwind CSS 相结合，以创建一个快速、轻巧、独特的 Web 应用程序。

步骤 2：添加 Tailwind CSS

让我们继续将 Tailwind CSS 添加到我们的 Svelte 应用程序中，以及一些有助于设置的开发依赖项。

npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

 # or

yarn add tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

我们使用上述命令下载的三个工具

1. Tailwind
2. PostCSS
3. Autoprefixer

PostCSS 是一种使用 JavaScript 转换和改进 CSS 的工具。它带有一堆插件，可以执行不同的功能，例如填充未来 CSS 功能、突出显示 CSS 代码中的错误、控制 CSS 类名的范围等。

Autoprefixer 是一个 PostCSS 插件，它会遍历您的代码，使用 caniuse 作为参考，为您的 CSS 规则添加供应商前缀（Tailwind 不会自动执行此操作）。虽然浏览器 选择不在 CSS 属性上使用前缀，就像他们在过去几年中所做的那样，但一些较旧的浏览器仍然依赖于它们。Autoprefixer 有助于向后兼容，同时还支持未来兼容性，以便在将属性变为标准之前可能对属性应用前缀的浏览器。

目前，Svelte 使用的是旧版本的 PostCSS。其最新版本 PostCSS 8 于 2020 年 9 月 发布。因此，为了避免出现任何与版本相关的错误，我们上面的命令指定了 PostCSS 7 而不是 8。Tailwind 的 PostCSS 7 兼容版本在 npm 的兼容通道下提供。

步骤 3：配置 Tailwind

现在我们已经安装了 Tailwind，让我们创建必要的配置文件并进行必要的设置。在项目的根目录中，运行此命令以创建一个 tailwind.config.js 文件

npx tailwindcss init  tailwind.config.js

作为高度可定制的框架，Tailwind 允许我们轻松地使用 tailwind.config.js 文件中的自定义配置覆盖其默认配置。在这里，我们可以轻松地自定义间距、颜色、字体等。

提供 tailwind.config.js 文件是为了防止“与框架作斗争”，这是其他 CSS 库的常见问题。您无需费力地扭转某些类的效果，而是可以在这里指定您的需求。在这个文件中，我们还定义了项目中使用的 PostCSS 插件。

该文件包含一些默认代码。在文本编辑器中打开它，并将此兼容代码添加到其中

future: {
  purgeLayersByDefault: true,
  removeDeprecatedGapUtilities: true,
},

Tailwind 2.0（最新版本）默认情况下会清除所有层（例如，基础层、组件层和实用程序层）。但在以前的版本中，只清除实用程序层。我们可以通过将 purgeLayersByDefault 标志设置为 true 来手动配置 Tailwind 以清除所有层。

Tailwind 2.0 还删除了一些间隙实用程序，并用新的实用程序替换了它们。我们可以通过将 removeDeprecatedGapUtilities 设置为 true 来手动从代码中删除它们。

这些将帮助您处理未来的更新中的弃用和重大更改。

PurgeCSS

默认情况下，Tailwind 附带的数千个实用程序类会被添加到您的项目中。因此，即使您在 HTML 中没有使用任何 Tailwind 类，您的项目仍然会包含整个库，这使得它相当庞大。我们希望在生产中尽可能地减小文件大小，因此我们可以使用 purge 在将代码推送到生产环境之前从项目中删除所有未使用的实用程序类。

由于这主要是一个生产问题，我们规定 purge 应该只在生产环境中启用。

purge: {
  content: [
    "./src/**/*.svelte",
  ],
  enabled: production // disable purge in dev
},

现在，你的 tailwind.config.js 应该像这样

const production = !process.env.ROLLUP_WATCH;
module.exports = {
  future: {
    purgeLayersByDefault: true,
    removeDeprecatedGapUtilities: true,
  },
  plugins: [

  ],
  purge: {
    content: [
     "./src/**/*.svelte",

    ],
    enabled: production // disable purge in dev
  },
};

Rollup.js

我们的 Svelte 应用使用 Rollup.js，这是一个由 Svelte 创建者 Rich Harris 开发的 JavaScript 模块捆绑器，用于将多个源文件编译成一个单一的捆绑包（类似于 webpack）。在我们的应用程序中，Rollup 在名为 rollup.config.js 的配置文件中执行其功能。

使用 Rollup，我们可以自由地将我们的项目分解成小的独立文件，从而使开发更容易。Rollup 还在捆绑过程中帮助我们进行代码整理、格式化和语法检查。

步骤 4：使 Tailwind 与 Svelte 兼容

导航到 rollup.config.js 并导入 sveltePreprocess 包。此包帮助我们处理使用 PostCSS 和 Tailwind 所需的所有 CSS 处理。

import sveltePreprocess from "svelte-preprocess";

在插件中，添加 sveltePreprocess 并需要 Tailwind 和 Autoprefixer，因为 Autoprefixer 将处理这些工具生成的 CSS。

preprocess: sveltePreprocess({
  sourceMap: !production,
  postcss: {
    plugins: [
     require("tailwindcss"), 
     require("autoprefixer"),
    ],
  },
}),

由于 PostCSS 是一个外部工具，其语法不同于 Svelte 的框架，因此我们需要一个预处理器来处理它并使其与我们的 Svelte 代码兼容。这就是 sveltePreprocess 包的作用。它提供对 PostCSS 及其插件的支持。我们向 sveltePreprocess 包指定我们将从 PostCSS 中需要两个外部插件，Tailwind 和 Autoprefixer。sveltePreprocess 通过 Babel 运行来自这两个插件的外部代码，并将它们转换为 Svelte 编译器（ES6+）支持的代码。Rollup 最终将所有代码捆绑在一起。

下一步是使用 @tailwind 指令将 Tailwind 的样式注入到我们的应用程序中。你可以将 @tailwind 松散地看作一个函数，它有助于导入和访问包含 Tailwind 样式的文件。我们需要导入三组样式。

第一组样式是 @tailwind base。 这将 Tailwind 的基本样式（大部分直接从 Normalize.css 获取）注入到我们的 CSS 中。想想你在样式表顶部经常看到的样式。Tailwind 将其称为 Preflight 样式。它们被提供来帮助解决跨浏览器的不一致性。换句话说，它们删除了来自不同浏览器的所有样式，确保只渲染你使用的样式。Preflight 有助于删除默认边距，使标题和列表在默认情况下不带样式，以及许多其他事情。这里是对所有 Preflight 样式的完整参考。

第二组样式是 @tailwind components。 虽然 Tailwind 是一个实用优先的库，旨在防止通用设计，但在处理大型项目时，几乎不可能不重复使用某些设计（或组件）。想想看。你想要一个独特外观的网站，并不意味着页面上的所有按钮都应该设计得彼此不同。你可能要在整个应用程序中使用按钮样式。

遵循这个思路。我们避免使用 Bootstrap 这样的框架，以防止使用与其他人相同的按钮。相反，我们使用 Tailwind 来创建我们自己的独特按钮。很好！但是我们可能想在不同的页面上使用我们刚刚创建的这个漂亮的按钮。在这种情况下，它应该成为一个组件。表单、卡片、徽章等等也是如此。

你创建的所有组件最终都会被注入到 @tailwind components 所占据的位置。与其他框架不同，Tailwind 没有提供许多预定义的组件，但有一些。如果你没有创建组件，并且计划只使用实用程序样式，那么就没有必要添加这个指令。

最后，还有 @tailwind utilities。 Tailwind 的实用程序类被注入到这里，以及你创建的那些。

步骤 5：将 Tailwind 样式注入到你的网站

最好将所有这些都注入到一个高级组件中，以便它们在每个页面上都可以访问。你可以在 App.svelte 文件中注入它们

<style global lang="postcss">
  @tailwind base;
  @tailwind components;
  @tailwind utilities;
</style>

现在我们已经将 Tailwind 设置好了，让我们创建一个网站标题，看看 tailwind 如何与 Svelte 协同工作。我们将在 App.svelte 中的 main 标签内创建它。

步骤 6：创建一个网站标题

从一些基本的标记开始

<nav>
  <div>
    <div>
      <a href="#">APP LOGO</a>

      <!-- Menus -->
      <div>
        <ul>
          <li>
            <a href="#">About</a>
          </li>
          <li>
            <a href="#">Services</a>
          </li>
          <li>
            <a href="#">Blog</a>
          </li>
          <li>
            <a href="#">Contact</a>
          </li>
        </ul>
      </div>

    </div>
  </div>
</nav>

这是没有任何 Tailwind CSS 样式的标题 HTML。非常标准的东西。我们最终会将“APP LOGO”移到左侧，将四个导航链接移到其右侧。

现在让我们添加一些 Tailwind CSS

<nav class="bg-blue-900 shadow-lg">
  <div class="container mx-auto">
    <div class="sm:flex">
      <a href="#" class="text-white text-3xl font-bold p-3">APP LOGO</a>
      
      <!-- Menus -->
      <div class="ml-55 mt-4">
        <ul class="text-white sm:self-center text-xl">
          <li class="sm:inline-block">
            <a href="#" class="p-3 hover:text-red-900">About</a>
          </li>
          <li class="sm:inline-block">
            <a href="#" class="p-3 hover:text-red-900">Services</a>
          </li>
          <li class="sm:inline-block">
            <a href="#" class="p-3 hover:text-red-900">Blog</a>
          </li>
          <li class="sm:inline-block">
            <a href="#" class="p-3 hover:text-red-900">Contact</a>
          </li>
        </ul>
      </div>

    </div>
  </div>
</nav>

好的，让我们分解我们刚刚添加到 HTML 中的所有这些类。首先，让我们看看 <nav> 元素

<nav class="bg-blue-900 shadow-lg">

我们应用了类 bg-blue-900 为我们的标题提供蓝色背景，阴影为 900，很暗。类 shadow-lg 类应用了一个大的外部框阴影。此类创建的阴影效果将在顶部为 0px，在右侧为 10px，在底部为 15px，在左侧为 -3px。

接下来是第一个 div，用于 logo 和导航链接的容器

<div class="container mx-auto">

为了将其和我们的导航链接居中，我们使用 mx-auto 类。它等效于 margin: auto，将元素在其容器内水平居中。

进入下一个 div

<div class="sm:flex">

默认情况下，div 是一个块级元素。我们使用 sm:flex 类使我们的标题成为一个块级弹性容器，以便使其子元素具有响应性（使其能够轻松缩小和扩展）。我们使用 sm 前缀来确保样式应用于所有屏幕尺寸（小型及以上）。

好的，logo

<a href="#" class="text-white text-3xl font-bold p-3">APP LOGO</a>

text-white 类，顾名思义，使 logo 的文字变成白色。text-3xl 类设置了我们 logo 的字体大小（配置为 1.875rem）及其行高（配置为 2.25rem）。从那里，p-3 在 logo 的所有侧边设置了 0.75rem 的填充。

这让我们到了

<div class="ml-55 mt-4">

我们正在为导航链接提供 55% 的左边距，以将其移到右侧。但是，没有针对此操作的 Tailwind 类，因此我们创建了一个名为 ml-55 的自定义样式，这个名字完全是杜撰的，但代表“margin-left 55%”。

为自定义类命名是一回事。我们还必须将其添加到我们的样式标签中

.ml-55 {
  margin-left: 55%;
}

这里还有一个类：mt-4。你能猜到它做什么吗？如果你猜到它设置了上边距，那么你是正确的！在这种情况下，它被配置为 1rem，用于我们的导航链接。

接下来，导航链接被包装在一个无序列表标签中，其中包含一些类

<ul class="text-white sm:self-center text-xl">

我们再次使用 text-white 类，然后使用 sm:self-center 将列表居中 - 同样，我们使用 sm 前缀来确保样式应用于所有屏幕尺寸（小型及以上）。然后是 text-xl，它是配置的超大字体大小。

对于每个列表项

<li class="sm:inline-block">

sm:inline-block 类将每个列表项设置为内联块级元素，将它们并排放置。

最后，每个列表项中的链接

<a href="#" class="p-3 hover:text-red-900">

我们使用实用程序类 hover:text-red-900 使每个链接在悬停时变为红色。

让我们在命令行中运行我们的应用程序

npm run dev 

这是我们应该得到的

就是这样我们在六个小步骤中将 Tailwind CSS 与 Svelte 结合使用！

结论

我希望你现在已经知道如何将 Tailwind CSS 集成到我们的 Svelte 应用程序中并进行配置。我们介绍了一些非常基本的样式，但总有更多的东西需要学习！以下是一个想法：尝试通过在页面中添加注册表单和页脚来改进我们正在处理的项目。Tailwind 为其所有实用程序类提供了全面的 文档。仔细阅读并熟悉这些类。

你更喜欢通过视频学习吗？以下是一些优秀的视频，它们也介绍了将 Tailwind CSS 与 Svelte 集成的过程。