Tailwind CSS home page
  1. Getting Started
  2. 在 SvelteKit 中安装 Tailwind CSS

  1. 创建你的项目

    如果你还没有创建 SvelteKit 项目，可以先新建一个。最常用的方法在 SvelteKit 入门 介绍中有说明。

    终端
    npx sv create my-projectcd my-project

  2. 安装 Tailwind CSS

    安装 tailwindcss 及其相关依赖，然后生成你的 tailwind.config.js 和 postcss.config.js 文件。

    终端
    npm install -D tailwindcss@3 postcss autoprefixernpx tailwindcss init -p

  3. 在 <style> 块中启用 PostCSS 使用

    在你的 svelte.config.js 文件中，导入 vitePreprocess 以启用将 <style> 块作为 PostCSS 进行处理。

    svelte.config.js
    import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    adapter: adapter()
  },
  preprocess: vitePreprocess()
};
export default config;

  4. 配置你的模板路径

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

    tailwind.config.js
    /** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{html,js,svelte,ts}'],
  theme: {
    extend: {}
  },
  plugins: []
};

  5. 将 Tailwind 指令添加到你的 CSS 中

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

    app.css
    @tailwind base;
@tailwind components;
@tailwind utilities;

  6. 导入 CSS 文件

    创建一个 ./src/routes/+layout.svelte 文件并导入新创建的 app.css 文件。

    +layout.svelte
    <script>
  import "../app.css";
</script>

<slot />

  7. 开始构建流程

    使用 npm run dev 运行你的构建流程。

    终端
    npm run dev

  8. 开始在你的项目中使用 Tailwind

    开始使用 Tailwind 的工具类来为你的内容添加样式，并确保为任何需要由 Tailwind 处理的 <style> 块设置 lang="postcss"。

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

<style lang="postcss">
  :global(html) {
    background-color: theme(colors.gray.100);
  }
</style>