【更新】将 Svelte 与 Tailwind CSS 结合使用——一种更好的方法

svelte-tailwindcss-template

工兵模板

已于 2020 年 1 月 27 日更新，Sapper 模板的 GitHub 链接已添加在下方 🎉

我从 Tailwind 早期就开始使用它，它彻底改变了我的开发方式。因此，我尝试将其应用到一个使用 Svelte 编写的项目中。然而，现有的将两者结合起来的方法在开发者体验方面无法与它们提供的体验相媲美。所以，我尝试寻找一种更好的方法。希望您阅读愉快！

太长不看

我结合了 Svelte 的预处理功能和 PostCSSsvelte-preprocess来处理 Tailwind 框架。您可以跳过教程，直接使用我发布在 GitHub 上的模板：

npx degit sarioglu/svelte-tailwindcss-template svelte-app
 cd svelte-app

cd svelte-app
npm 安装

npm run dev

现有方法

还有其他一些将 Tailwind 集成到 Svelte 中的工作。你甚至可以在 Tailwind 的 GitHub 账户下找到一些示例。

• setup-examples/examples/svelte at master · tailwindcss/setup-examples · GitHub
• setup-examples/examples/sapper at master · tailwindcss/setup-examples · GitHub

然而，这些方法存在一些结构性缺陷：

• 他们除了 Svelte 之外，还创建了另一个管道来处理外部 CSS。Tailwind 将由 PostCSS 处理，而组件样式则由 Svelte 处理。这就是为什么开发者需要重新考虑从转译到压缩等所有环节的原因。
• 它们使得在组件样式中使用 Tailwind 指令（例如 `<style>`@apply或 ` <style> @screen`）成为不可能。
• 它们会在代码库中创建一个自动生成的 CSS 文件。

因此，我提出了一种新的方法来使这种集成更加顺畅。那么，让我们开始吧：

1. 创建一个 Svelte 应用

首先，我们需要使用以下命令初始化一个 Svelte 应用。如果您已经有一个现成的应用，则可以跳过此部分。

npx degit sveltejs/template [my-svelte-project]
cd [my-svelte-project]

npm install

这些命令会克隆官方的 Svelte 应用模板并安装所需的依赖项。

2-初始化 Tailwind

完成上一步后，使用以下命令安装 Tailwind 集成所需的依赖项：

npm i -D @fullhuman/postcss-purgecss postcss postcss-load-config svelte-preprocess tailwindcss

然后，运行以下命令初始化 Tailwind：

npx tailwind init

这将tailwind.config.js在您的代码库中创建一个名为 `.tailwind.config` 的文件。您可以编辑或替换此文件以扩展您的 Tailwind 配置。

3-进行整合

为了实现集成，我们需要以下两个文件。我们将使用它们postcss.config.js来配置 PostCSS，使其能够使用 Tailwind 处理样式。请注意，PostCSS 使用 Purgecss 在生产模式下清除未使用的样式。我们还需要将 Svelte 自身生成的 CSS 类添加到白名单中，因为 Svelte 本身会使用其中的一部分。

postcss.config.js

const purgecss = require('@fullhuman/postcss-purgecss')({
  content: [
    './src/**/*.html',
    './src/**/*.svelte'
  ],

  whitelistPatterns: [/svelte-/],

  defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
});

const production = !process.env.ROLLUP_WATCH

module.exports = {
  plugins: [
    require('tailwindcss'),
    ...(production ? [purgecss] : [])
  ]
};

Tailwindcss.svelte该文件包含一个 Svelte 组件，该组件仅定义了样式。我们将使用它来将我们的实用类注入到应用程序中。global这里的指令表示该组件的样式将全局可用。

src/Tailwindcss.svelte

<style global>
  @tailwind base;
  @tailwind components;
  @tailwind utilities;
</style>

我们需要将此组件导入到我们的应用程序中：

src/App.svelte

<script>
  import Tailwindcss from './Tailwindcss.svelte';
  ...
</script>

...
<Tailwindcss />
...

这样做，我们就可以在应用程序中使用 Tailwind 提供的类了。

最后，我们将调整 rollup 配置以用于svelte-preprocess处理组件的样式。

rollup.config.js

import sveltePreprocess from 'svelte-preprocess'

...
svelte({
  ...
  preprocess: sveltePreprocess({ postcss: true }),
  ...
})
...

结果

这种新方法结合了 Svelte 的预处理能力和 PostCSS，使我们能够充分利用 Tailwind 的所有特性。您可以使用实用类或调用指令将它们组合成组件样式。所有这些样式都将由 Svelte 处理，无需创建额外的管道。

为了演示结果，让我们使用npm run dev命令运行应用程序并更改一些样式App.svelte：

<style>
  h1 {
    @apply bg-black text-white;
  }
</style>

你会发现 Tailwind 提供的样式完美契合我们想要传达的Hello world!信息。所以，你可以开始使用它们，为更有意义的事情贡献力量！

萨珀怎么样？

没问题！您可以按照相同的步骤将 Tailwind 集成到您的 Sapper 应用中。只需确保您已更改客户端和服务端的配置即可。

我已经将 Sapper 模板发布到 GitHub。由于它基于官方模板，因此您可以使用 rollup 或 webpack 进行部署。链接如下：

npx 数字“ sarioglu/sapper-tailwindcss-template#rollup ” my-app

npx degit " sarioglu/sapper-tailwindcss-template#webpack " my-app

cd my-app
npm install #或 yarn 
npm run dev

其他好处

使用svelte-preprocessPostCSS 处理组件样式还能带来其他诸多好处。你可以使用postcss.config.jsPostCSS 导入其他插件，例如 `<script>` autoprefixer、`<script>` 等。这些插件会立即处理你的组件样式。