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
创建):
.exports = {
modulecontent: ['./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';
...
: [
pluginssvelte({
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,绝配!
「为AI疯狂」星球上,扶墙老师正在和朋友们讨论有趣的AI话题,你要不要⼀起来呀?^-^
这里
- 不但有及时新鲜的AI资讯和深度探讨
- 还分享AI工具、产品方法和商业机会
- 更有体系化精品付费内容等着你,加入星球(https://t.zsxq.com/0dI3ZA0sL) 即可免费领取。(加入之后一定记得看置顶消息呀!)

存量的时代,省钱就是赚钱。
在增量的时代,省钱其实是亏钱。
避坑儿是省钱的一种形式,更是真正聪明人的选择!
弯路虽然也是路,但还是能少走就少走,背后都是高昂的试错成本。
订阅「福报」,少踩坑,少走弯路,多走一步,就是不一样的胜率!
