svelte - 使用 Sveltekit 和 Tailwind CSS

Question

Sveltekit 终于公开测试版了。有谁知道如何将它与 Tailwind CSS 一起使用？此集成没有任何官方文档。

Answer 1

由于您使用的是 SvelteKit，因此您还可以查看使用Svelte Adder for Tailwind。

从他们的自述文件中：

您必须从官方 SvelteKit 模板的新副本开始，该模板当前是通过运行以下命令创建的：

npm init svelte@next

设置完成后，在您的项目目录中运行此命令以设置 Tailwind CSS：

npx svelte-add tailwindcss # --jit

该命令将为您执行 Tailwind 设置，因此您不必自己创建所有配置。

Answer 2

幸运的是，在 Sveltekit 中设置 Tailwind CSS 很容易。

1. 安装 Sveltekit

如果您还没有 Sveltekit 项目，那么现在是创建一个的时候了。

npm init svelte@next
npm install

2. 安装 Tailwind CSS

假设您已经拥有 Svelte

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

如果您只想在 Tailwind 的类型编译中使用，也请安装它。

npm install -D @tailwindcss/jit

3. 运行 Tailwind 设置

npx tailwindcss init -p

接下来，将 created 更改tailwind.config.js为 commonjs 模块，将其重命名为tailwind.config.cjs. 您只需将扩展名更改为cjs.

然后，在配置中，设置要清除的页面/组件。

// tailwind.config.cjs
module.exports = {
    purge: ['src/app.html', 'src/**/*.svelte'],
...
}

4.创建styles.css

styles.css在 src 文件夹中创建一个文件。

// ./src/style.css
@tailwind base;
@tailwind components;
@tailwind utilities;

现在，创建一个布局组件来导入样式。

// ./src/routes/$layout.svelte
<script>
    import '../style.css';
</script>

5. 将 Sveltekit 与 Tailwind 连接起来

这是最后一步。

在您的svelte.config.cjs文件中，添加 postcss 作为预处理器。

// svelte.config.cjs
module.exports = {
    // add this
    preprocess: sveltePreprocess({
        postcss: true,
        defaults: {
            style: 'postcss',
        },
    }),
}

postcss.config.cjs并在项目的根目录下创建一个文件。

// postcss.config.cjs
module.exports = {
    plugins: {
        'tailwindcss': {},
        autoprefixer: {},
    },
};

如果您正在使用@tailwindcss/jit，请将tailwindcss上面替换为@tailwindcss/jit。

而已！您现在已准备好使用 Sveltekit 和 Tailwind CSS。

PS Credit感谢Matt Lehrer撰写了一篇关于该主题的精彩博客文章。

Answer 3

OP @Nick 状态：

此集成没有任何官方文档。

事实上，至少在 TailwindCSS 的网站上有：

https://tailwindcss.com/docs/guides/sveltekit

它们与此处另一个答案中概述的步骤没有什么不同（实际上，它们可能是由同一个人创作的？）

如果您还没有设置，首先创建一个新的 SvelteKit 项目。SvelteKit 入门介绍中概述了最常见的方法。

npm init svelte@next my-app
cd my-app

安装 Tailwind CSS 通过 npm 安装 tailwindcss 及其对等依赖项，然后运行以下命令生成 tailwind.config.cjs 和 postcss.config.cjs。

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init tailwind.config.cjs -p
mv postcss.config.js postcss.config.cjs

在 tailwind.config.cjs 文件中添加所有模板文件的路径。

module.exports = {
  content: ['./src/**/*.{html,js,svelte,ts}'],
  theme: {
    extend: {}
  },
  plugins: []
};

创建一个 ./src/app.css 文件并为 Tailwind 的每个层添加 @tailwind 指令。

<script>
  import "../app.css";
</script>

<slot />

使用npm run dev.

开始使用 Tailwind 的实用程序类来设置您的内容样式。

<h1 class="text-3xl font-bold underline">
  Hello world!
</h1>