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

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

「福强私学」来一个？

「福强私学」, 一部沉淀了个人成长、技术与架构、组织与管理以及商业上的方法与心法的百科全书。

footer img for kb.afoo.me

开天窗，拉认知，订阅「福报」，即刻拥有自己的全模态人工智能。

订阅「福报」