Add Tailwind Css to Svelte

Posted by RoninRo on Sat, May 8, 2021

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

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

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

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

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

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

 1// svelte.config.js
 2import adapter from '@sveltejs/adapter-static';
 3
 4export default {
 5	kit: {
 6		adapter: adapter({
 7			// default options are shown
 8			pages: 'build',
 9			assets: 'build',
10			fallback: null
11		})
12	}
13};

为项目添加 Tailwind CSS

1npx svelte-add tailwindcss --jit

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

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

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

构建

1npm run build