目录

Add Tailwind Css to Svelte

目录

SvelteKit 目前是 beta 版本,本文可能只适用于 SvelteKit v1.0.0-next.102

首先我们用 SvelteKit 新建一个项目

1
2
3
4
npm init [email protected] my-app
cd my-app
npm install
npm run dev -- --open

为项目添加 @sveltejs/adapter-static 适配器以支持编译静态网页。

1
npm i -D @sveltejs/[email protected]

svelte.config.js 文件中添加相关参数

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
// svelte.config.js
import adapter from '@sveltejs/adapter-static';

export default {
	kit: {
		adapter: adapter({
			// default options are shown
			pages: 'build',
			assets: 'build',
			fallback: null
		})
	}
};

为项目添加 Tailwind CSS

1
npx svelte-add tailwindcss --jit

使用 @tailwind 指令注入 Tailwind 的基础 (base),组件 (components) 和功能 (utilities) 样式

1
2
3
@tailwind base; /* Preflight will be injected here */
@tailwind components;
@tailwind utilities;

Tailwind 将在构建时将这些指令替换为基于配置的设计系统生成的所有样式。

构建

1
npm run build