Tailwind CSS 在 Svelte 项目中的集成教程

1. 项目的目录结构及介绍

在克隆并初始化 svelte-add/tailwindcss 项目后，你将会看到以下目录结构：

svelte-project/
├── src/
│   ├── main.js
│   ├── App.svelte
│   └── ...
├── public/
│   ├── index.html
│   └── ...
├── tailwind.config.js
├── postcss.config.js
├── package.json
└── ...

目录结构说明：

• src/: 包含所有的 Svelte 组件和主要入口文件。
  • main.js: 项目的入口文件。
  • App.svelte: 主应用组件。
• public/: 包含静态文件，如 index.html。
• tailwind.config.js: Tailwind CSS 的配置文件。
• postcss.config.js: PostCSS 的配置文件，用于处理 Tailwind CSS。
• package.json: 项目的依赖和脚本配置文件。

2. 项目的启动文件介绍

main.js

main.js 是 Svelte 项目的入口文件，负责初始化应用并挂载到 DOM 中。以下是一个典型的 main.js 文件内容：

import App from './App.svelte';

const app = new App({
  target: document.body,
  props: {
    name: 'world'
  }
});

export default app;

App.svelte

App.svelte 是主应用组件，通常包含应用的布局和主要逻辑。以下是一个简单的 App.svelte 示例：

<script>
  export let name;
</script>

<style>
  @tailwind base;
  @tailwind components;
  @tailwind utilities;
</style>

<main>
  <h1>Hello {name}!</h1>
</main>

3. 项目的配置文件介绍

tailwind.config.js

tailwind.config.js 是 Tailwind CSS 的主要配置文件，可以自定义主题、插件和其他设置。以下是一个基本的配置示例：

module.exports = {
  purge: ['./src/**/*.svelte', './public/*.html'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

postcss.config.js

postcss.config.js 是 PostCSS 的配置文件，用于处理 Tailwind CSS 和其他 PostCSS 插件。以下是一个基本的配置示例：

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ],
}

通过以上配置，你可以开始在 Svelte 项目中使用 Tailwind CSS，并根据需要进行进一步的自定义和扩展。