使用 Sveltekit 和 Tailwind CSS

Question

Sveltekit 终于在 public beta 中了。有谁知道如何将它与 Tailwind CSS 一起使用？此集成没有任何官方文档。

Answer 1

幸运的是，在 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

如果你想使用just in type compilation for Tailwind，也安装它。

npm install -D @tailwindcss/jit

3。运行 Tailwind 设置

npx tailwindcss init -p

接下来，通过将创建的 tailwind.config.js 重命名为 tailwind.config.cjs 将其更改为 commonjs 模块。您只需将扩展名更改为cjs。

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

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

4。创建styles.css

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

// ./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。

附注感谢 Matt Lehrer 写了一篇关于这个主题的精彩博文。

Answer 2

由于你使用的是 SvelteKit，你也可以看看使用Svelte Adder for Tailwind。

来自他们的自述文件：

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

npm init svelte@next

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

npx svelte-add tailwindcss # --jit

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