8
Svelte with tailwind and daisyui
source link: https://afoo.me/posts/2022-03-09-svelte_with_tailwind_and_daisyui.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Svelte with tailwind and daisyui
2022-03-09要在svelte里使用tailwind和daisyui， 首先我们要安装依赖：
npx degit sveltejs/template __prj__
npm install -D tailwindcss daisyui postcss autoprefixer svelte-preprocess
npm install
npx tailwindcss init然后我们开始配置…
配置tailwind.config.js(这个文件已经由npx tailwindcss init创建):
module.exports = {
content: ['./src/**/*.{svelte,js,ts}', './public/index.html'],
plugins: [require('daisyui')],
future: {
purgeLayersByDefault: true,
removeDeprecatedGapUtilities: true,
},
purge: {
content: ['./src/**/*.{svelte,js,ts}', './public/index.html'],
enabled: true
},
};配置rollup.config.js：
import sveltePreprocess from 'svelte-preprocess';
...
plugins: [
svelte({
preprocess: sveltePreprocess({
sourceMap: !production,
postcss: {
plugins: [require('tailwindcss')(), require('autoprefixer')()],
},
}),
...
}),
...最后，在顶层的.svelte文件（比如App.svelte）里添加如下内容：
<style lang="postcss" global>
@tailwind base;
@tailwind components;
@tailwind utilities;
</style>好啦，直接像往常那样npm run dev就可以开玩了，svelte配合上tailwind和daisyui，绝配！
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK