使用Sveltekit和Tailwind CSS

Question

Sveltekit终于在公共贝塔上了。有人知道如何在Tailwind中使用它吗？没有任何正式的文档来进行这种集成。

Answer 1

由于您使用的是SvelteKit，所以您也可以考虑使用用于尾风的Svelte加法器。

来自他们的自述：

您必须从正式SvelteKit模板的新副本开始，该模板当前是通过运行以下命令创建的： npm init svelte@next 设置好后，在项目目录中运行以下命令来设置Tailwind： npx svelte-add tailwindcss # --jit

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

Answer 2

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

1.安装Sveltekit

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

npm init svelte@next
npm install

2.安装尾风CSS

假设你已经有了斯维特

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

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

npm install -D @tailwindcss/jit

3.运行尾风设置

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了。

https://www.mattlehrer.com/blog/setting-up-tailwindcss-in-sveltekit-with-vite/写了一篇关于这个主题的很棒的博客文章，这是功劳。

Answer 3

OP @Nick指出：

没有任何正式的文档来进行这种集成。

事实上，至少在TailwindCSS的网站上是这样的：

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

它们与这里的另一个答案中列出的步骤没有什么不同(实际上，它们可能是由同一个人编写的？)

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

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

通过npm安装尾风CSS及其对等依赖项，然后运行以下命令生成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的每个层添加@顺风指令。

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

<slot />

使用npm run dev运行您的构建过程。开始使用Tailwind的实用程序类来为您的内容设置样式。

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