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，绝配！

>>>>>> 更多阅读 <<<<<<

「为AI疯狂」星球上，扶墙老师正在和朋友们讨论有趣的AI话题，你要不要⼀起来呀？^-^
这里

  1. 不但有及时新鲜的AI资讯和深度探讨
  2. 还分享AI工具、产品方法和商业机会
  3. 更有体系化精品付费内容等着你，加入星球(https://t.zsxq.com/0dI3ZA0sL) 即可免费领取。(加入之后一定记得看置顶消息呀！)

知识星球二维码

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

订阅「福报Premium订阅」