如

如何使用 Tailwind CSS 设置 SvelteKit

2025-06-07

如何使用 Tailwind CSS 设置 SvelteKit

2021 年 6 月更新：本指南已针对SvelteKit@next.113 + Tailwind JIT 进行了全面更新！您也可以查看本指南

2021 年 8 月更新：首先尝试一下：

npm init svelte@next
npx svelte-add@latest tailwindcss
npm install

先决条件

我将跳过序言。您可以阅读：

我还假设你已经设置了 SvelteKit：

npm init svelte@next my-app
cd my-app
npm install
npm run dev
Enter fullscreen mode Exit fullscreen mode

我强烈建议至少选择 ESLint 和 Prettier 选项。

步骤 1：安装 deps

npm install -D svelte-preprocess tailwindcss autoprefixer postcss

# optional tailwind ui plugin
npm install @tailwindcss/ui
Enter fullscreen mode Exit fullscreen mode

步骤2：设置配置文件

tailwind.config.cjs在项目根目录添加一个文件。（我们.cjs现在使用它，否则require当项目的其余部分位于 ESM 中时，tailwind vs code 扩展会抱怨它使用）。

// tailwind.config.cjs
module.exports = {
    mode: 'jit',
    // you dont need `purge: enabled: production` because you are using jit
    purge: [ 
      "./src/**/*.svelte",
      // may also want to include HTML files
      "./src/**/*.html"
    ],
    darkMode: 'class',
    theme: {
      extend: {},
    },
    variants: {},
    plugins: [],
  }
Enter fullscreen mode Exit fullscreen mode

步骤 2A：使用内联 PostCSS 的 Svelte Config

现在，也在 Svelte 捆绑器配置中设置它：

// svelte.config.js
import preprocess from 'svelte-preprocess';
import tailwind from 'tailwindcss'
import autoprefixer from 'autoprefixer'

/** @type {import('@sveltejs/kit').Config} */
const config = {
    // Consult https://github.com/sveltejs/svelte-preprocess
    // for more information about preprocessors
    preprocess: preprocess({
        postcss: {
            plugins: [
                tailwind, 
                autoprefixer
            ]
        }
    }),

    kit: {
        // hydrate the <div id="svelte"> element in src/app.html
        target: '#svelte'
    }
};

export default config;
Enter fullscreen mode Exit fullscreen mode

步骤 2B：使用单独的 PostCSS 进行 Svelte Config 以实现 PostCSS 嵌套

或者，您也可以postcss.config.js在单独的文件中进行设置（这似乎更适合 postcss 嵌套插件的运行）。

我们目前使用的是 PostCSS 7，而不是 8（最新版本），因为…… JavaScript。我添加了 postcss-nesting，因为我喜欢它——当然，你也可以删除它。

  • npm i -D postcss-load-config postcss@7 postcss-nesting@7
  • svelte.config.js：
    preprocess: preprocess({
        defaults: {
            style: 'postcss',
        },
        postcss: true,
    }),
Enter fullscreen mode Exit fullscreen mode
  • postcss.config.js

import tailwind from 'tailwindcss'
import autoprefixer from 'autoprefixer'
import nesting from 'postcss-nesting'

export default  {
    syntax: 'postcss-scss',
    plugins: [
        // Some plugins, like postcss-nested, need to run before Tailwind
        nesting(),
        tailwind(),

        // But others, like autoprefixer, need to run after

        autoprefixer(),
        // !dev &&
        //  cssnano({
        //      preset: 'default',
        //  }),
    ],
};
Enter fullscreen mode Exit fullscreen mode

然而，当你真正尝试嵌套 CSS 时，这种设置仍然存在 bug。我还没搞清楚，如果你正在读这篇文章，希望能得到一些帮助。

步骤 3：将 Tailwind 包含的内容添加到您的 Svelte 应用中

创建src/routes/__layout.svelte并添加：

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

<slot></slot>
Enter fullscreen mode Exit fullscreen mode

就是这样！

可选：黑暗模式

我喜欢将暗模式与类一起使用，以便用户可以切换它：

将其放入您的app.html：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="icon" href="/favicon.png" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link href="https://fonts.googleapis.com/css2?family=Varela+Round&display=swap" rel="stylesheet">
        <script>
            // On page load or when changing themes, best to add inline in `head` to avoid FOUC
            if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
            document.documentElement.classList.add('dark')
            } else {
            document.documentElement.classList.remove('dark')
            }
        </script>
        %svelte.head%
    </head>
    <body class="dark:bg-gray-900 dark:text-gray-100">
        <div id="svelte">%svelte.body%</div>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

那么 Svelte 类怎么样？

Svelte 具有Tailwind 以前不支持的class:绑定语法。借助 Tailwind JIT，它现已于 2021 年获得支持！

您正在使用哪些版本？！？

  "devDependencies": {
    "@sveltejs/adapter-netlify": "^1.0.0-next.17",
    "@sveltejs/kit": "^1.0.0-next.113",
    "@typescript-eslint/eslint-plugin": "^4.19.0",
    "@typescript-eslint/parser": "^4.19.0",
    "autoprefixer": "^9.8.6",
    "eslint": "^7.22.0",
    "eslint-config-prettier": "^8.1.0",
    "eslint-plugin-svelte3": "^3.2.0",
    "postcss": "^8.3.0",
    "postcss-load-config": "^3.0.1",
    "prettier": "~2.2.1",
    "prettier-plugin-svelte": "^2.2.0",
    "svelte": "^3.34.0",
    "svelte-check": "^2.0.0",
    "svelte-preprocess": "^4.7.3",
    "tailwindcss": "^2.1.4",
    "tslib": "^2.0.0",
    "typescript": "^4.0.0"
  },
Enter fullscreen mode Exit fullscreen mode

参考存储库

您可以参考和运行更多实用的存储库

您应该能够运行npx svelte-add tailwindcss --jit- 但在撰写本文时，它存在很多错误并且无法运行。

附录：先前内容（旧的过时内容）

2021 年 3 月更新：SvelteKit 和 Tailwind JIT 于本月发布，彻底改变了游戏规则。两者目前仍处于测试阶段，但强烈建议您查看以下模板和工具：

2021 年 1 月更新：Tailwind 2.0 配置小更新。我还在底部添加了其他方法，请向下滚动

2020 年 9 月更新：Chris 展示了一种比我最初概述的更简单的方法，因此我将我原来的笔记替换成了他示例仓库中的笔记。这需要权衡构建速度，我会在底部讨论替代方案。

在最新的 Toolsday上，Chris Dhanaraj表示，他很难找到将Tailwind添加到Svelte 的文档。

今天我还需要将 Tailwind 添加到一个 Svelte 项目中，所以写下这篇文章作为参考。我在新的 Svelte Society 网站上记录了如何使用 Svelte 设置 PostCSS ，当然，它还可以做得更好，更贴合 Tailwind（毕竟它“只是”一个 PostCSS 插件）。

所以我为他也为我自己写下这篇文章。

简单说一下为什么将 Tailwind 与 Svelte 结合使用，因为 Svelte 默认提供了作用域 CSS：Tailwind 提供了一个约束良好的“设计系统”，因此您不会过度使用魔法数字，并且可以轻松使用Tailwind 断点添加响应式样式。由于 Tailwind 拥有开发者体验的“内联样式”，我发现删除和移动 HTML 也更容易，无需返回去修改样式。我也喜欢不用命名类名。我会在另一篇文章中更详细地讨论为什么选择 Tailwind。

我假设你有一个现有的标准 Svelte 或 Sapper 项目，并且没有设置 PostCSS/Tailwind。由于我喜欢使用它们autoprefixer，所以我也会添加postcss-nesting它们，但当然，你也可以根据需要删除它们。

注意：本节曾经涉及package.json运行脚本postcss-cli，但 Chris 意识到您不需要执行任何这些操作，因为 Svelte 已经有注入 CSS 的方法并且svelte-preprocess已经在每个 Svelte 文件上运行。

请参阅：

看看这个实际效果。

替代方法

上面概述的方法很容易上手，但最终会通过 Svelte 编译器运行数千行 Tailwind 的 CSS。这可能会导致性能问题（主要是每次更改入口文件时）。根据您的偏好，其他方法可能更合适：

文章来源：https://dev.to/swyx/how-to-set-up-svelte-with-tailwind-css-4fg5
Devto 翻译
PREV
如果你在网上卖任何东西，这本书都能帮你赚钱
NEXT
如何创造运气