使用 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 文件夹中创建一个文件。

npm init svelte@next
npm install

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

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

5. 将 Sveltekit 与 Tailwind 连接

这是最后一步。

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

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

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

npm install -D @tailwindcss/jit

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

就是这样！您现在已准备好使用 Sveltekit 和 Tailwind CSS。

PS感谢Matt Lehrer写了一篇关于这个主题的很棒的博客文章。