使用 Sveltekit 和 Tailwind CSS

Question

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

Answer 1

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

1。安装 Sveltekit

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

npm init svelte@next
npm install

2。安装顺风 CSS

假设您已经拥有 Svelte

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

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

npm install -D @tailwindcss/jit

3。运行顺风设置

npx tailwindcss init -p

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

然后，在配置中，设置要清除的 pages/components。

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

P.S。感谢 Matt Lehrer 写了一篇关于这个主题的精彩博客 post。

Answer 2

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

来自他们的自述文件：

You must start with a fresh copy of the official SvelteKit template, which is currently created by running this command:

npm init svelte@next

Once that is set up, run this command in your project directory to set up Tailwind CSS:

npx svelte-add tailwindcss # --jit

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

Answer 3

OP @Nick 指出：

There aren't any official docs for this integration.

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

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

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

Start by creating a new SvelteKit project if you don't have one set up already. The most common approach is outlined in the Getting Started with SvelteKit introduction.

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

Install Tailwind CSS Install tailwindcss and its peer dependencies via npm, and then run the following commands to generate both tailwind.config.cjs and postcss.config.cjs.

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

Add the paths to all of your template files in your tailwind.config.cjs file.

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

Create a ./src/app.css file and add the @tailwind directives for each of Tailwind’s layers.

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

<slot />

Run your build process with npm run dev.

Start using Tailwind’s utility classes to style your content.

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

使用 Sveltekit 和 Tailwind CSS

Use Sveltekit and Tailwind CSS

svelte

tailwind-css

svelte-3

sveltekit

1。安装 Sveltekit

2。安装顺风 CSS

3。运行顺风设置

4。创建styles.css

5。将 Sveltekit 与 Tailwind 连接

使用 Sveltekit 和 Tailwind CSS

Use Sveltekit and Tailwind CSS

svelte

tailwind-css

svelte-3

sveltekit

1。安装 Sveltekit

2。安装顺风 CSS

3。 运行顺风设置

4。创建styles.css

5。将 Sveltekit 与 Tailwind 连接

3。运行顺风设置