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

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

欢迎加入「福强私学」

跨越2190个日夜，始终坚持“实践 + 原创”打造的715125字专属知识库，囊括了（但不限于）从职场、技术、管理与商业等多个板块的内容。

  • 一个ChatGPT触达不到的地方
  • 一个带你超越AI/人工智能的地方
  • 一个与你一起成长的地方

https://afoo.me/kb.html

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

订阅「福报」