基于Tailwind自定义FilePond拖拽上传区域样式并保留原有功能

我有一个文件拖拽上传的div，初始样式如下：

对应的HTML代码：

<div>
   <p class="text-[14px] font-normal leading-[150%] text-tertiary-text">Прикачи нов файл</p>
   <div id="filepond"
      class=" mb-4 inline-flex w-full items-center rounded-lg bg-brand-color-ultralight px-4 py-7 text-base text-brand-color border border-brand-color border-dashed"
      >
      <span class="mr-2">
         <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none">
            <path opacity="0.4" d="M41 20.38H35.22C30.48 20.38 26.62 16.52 26.62 11.78V6C26.62 4.9 25.72 4 24.62 4H16.14C9.98 4 5 8 5 15.14V32.86C5 40 9.98 44 16.14 44H31.86C38.02 44 43 40 43 32.86V22.38C43 21.28 42.1 20.38 41 20.38Z" fill="#2384C6"/>
            <path d="M31.6 4.41999C30.78 3.59999 29.36 4.15999 29.36 5.29999V12.28C29.36 15.2 31.84 17.62 34.86 17.62C36.76 17.64 39.4 17.64 41.66 17.64C42.8 17.64 43.4 16.3 42.6 15.5C39.72 12.6 34.56 7.37999 31.6 4.41999Z" fill="#2384C6"/>
            <path d="M23.06 24.94L19.06 20.94C19.04 20.92 19.02 20.92 19.02 20.9C18.9 20.78 18.74 20.68 18.58 20.6C18.56 20.6 18.56 20.6 18.54 20.6C18.38 20.54 18.22 20.52 18.06 20.5C18 20.5 17.96 20.5 17.9 20.5C17.78 20.5 17.64 20.54 17.52 20.58C17.46 20.6 17.42 20.62 17.38 20.64C17.22 20.72 17.06 20.8 16.94 20.94L12.94 24.94C12.36 25.52 12.36 26.48 12.94 27.06C13.52 27.64 14.48 27.64 15.06 27.06L16.5 25.62V34C16.5 34.82 17.18 35.5 18 35.5C18.82 35.5 19.5 34.82 19.5 34V25.62L20.94 27.06C21.24 27.36 21.62 27.5 22 27.5C22.38 27.5 22.76 27.36 23.06 27.06C23.64 26.48 23.64 25.52 23.06 24.94Z" fill="#2384C6"/>
         </svg>
      </span>
      Натисни или завлечи файл в това поле за да го прикачиш. Поддържани формати са PDF, JPG, PNG, TXT, DOC Максимален размер на файл 20 MB. / Максимален брой файлове 10.
   </div>
</div>

我的FilePond配置代码：

const inputElement = document.getElementById('filepond');

const pond = FilePond.create(inputElement, {
    allowMultiple: true,
    dropOnElement: true,
    acceptedFileTypes: ['application/pdf', 'image/jpeg', 'image/png', 'text/plain', 'application/msword'],
    maxFiles: 10,
    credits: false,
    labelIdle: 'Натисни или завлечи файл в това поле за да го прикачиш. Поддържани формати са PDF, JPG, PNG, TXT, DOC Максимален размер на файл 20 MB. / Максимален брой файлове 10.',
    server: {
        process: {
            url: '/your-upload-endpoint',
            method: 'POST',
        },
    },
});

初始化FilePond后，样式变成这样：

我用的是Tailwind框架，想让FilePond保留原有功能（点击/拖拽上传、文件列表展示）的同时，样式和最初设计的div完全一致，该怎么做？

要让FilePond匹配原设计样式，需要覆盖它的默认CSS，结合Tailwind工具类实现，步骤如下：

1. 调整HTML结构，保留基础容器样式 #

FilePond会替换目标div的内部结构，所以只保留原div的样式类，清空内部内容：

<div>
   <p class="text-[14px] font-normal leading-[150%] text-tertiary-text">Прикачи нов файл</p>
   <div id="filepond" class="mb-4 inline-flex w-full items-center rounded-lg bg-brand-color-ultralight px-4 py-7 text-base text-brand-color border border-brand-color border-dashed"></div>
</div>

2. 配置FilePond自定义模板，还原图标和提示文本 #

在FilePond配置中，将labelIdle设置为包含原图标和文本的HTML模板，确保布局和原设计一致：

const pond = FilePond.create(inputElement, {
    allowMultiple: true,
    dropOnElement: true,
    acceptedFileTypes: ['application/pdf', 'image/jpeg', 'image/png', 'text/plain', 'application/msword'],
    maxFiles: 10,
    credits: false,
    // 自定义提示模板，完全复用原设计的图标和文本
    labelIdle: `
        <span class="mr-2">
            <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none">
                <path opacity="0.4" d="M41 20.38H35.22C30.48 20.38 26.62 16.52 26.62 11.78V6C26.62 4.9 25.72 4 24.62 4H16.14C9.98 4 5 8 5 15.14V32.86C5 40 9.98 44 16.14 44H31.86C38.02 44 43 40 43 32.86V22.38C43 21.28 42.1 20.38 41 20.38Z" fill="#2384C6"/>
                <path d="M31.6 4.41999C30.78 3.59999 29.36 4.15999 29.36 5.29999V12.28C29.36 15.2 31.84 17.62 34.86 17.62C36.76 17.64 39.4 17.64 41.66 17.64C42.8 17.64 43.4 16.3 42.6 15.5C39.72 12.6 34.56 7.37999 31.6 4.41999Z" fill="#2384C6"/>
                <path d="M23.06 24.94L19.06 20.94C19.04 20.92 19.02 20.92 19.02 20.9C18.9 20.78 18.74 20.68 18.58 20.6C18.56 20.6 18.56 20.6 18.54 20.6C18.38 20.54 18.22 20.52 18.06 20.5C18 20.5 17.96 20.5 17.9 20.5C17.78 20.5 17.64 20.54 17.52 20.58C17.46 20.6 17.42 20.62 17.38 20.64C17.22 20.72 17.06 20.8 16.94 20.94L12.94 24.94C12.36 25.52 12.36 26.48 12.94 27.06C13.52 27.64 14.48 27.64 15.06 27.06L16.5 25.62V34C16.5 34.82 17.18 35.5 18 35.5C18.82 35.5 19.5 34.82 19.5 34V25.62L20.94 27.06C21.24 27.36 21.62 27.5 22 27.5C22.38 27.5 22.76 27.36 23.06 27.06C23.64 26.48 23.64 25.52 23.06 24.94Z" fill="#2384C6"/>
            </svg>
        </span>
        Натисни или завлечи файл в това поле за да го прикачиш. Поддържани формати са PDF, JPG, PNG, TXT, DOC Максимален размер на файл 20 MB. / Максимален брой файлове 10.
    `,
    server: {
        process: {
            url: '/your-upload-endpoint',
            method: 'POST',
        },
    },
});

3. 用Tailwind工具类覆盖FilePond默认样式 #

在全局CSS或Tailwind的@layer utilities中添加自定义样式，覆盖FilePond的默认UI：

@layer utilities {
    /* 强制主容器使用原设计样式 */
    .filepond--root {
        @apply mb-4 inline-flex w-full items-center rounded-lg bg-brand-color-ultralight px-4 py-7 text-base text-brand-color border border-brand-color border-dashed !important;
    }

    /* 移除FilePond自带的面板背景和边框 */
    .filepond--panel-root {
        @apply bg-transparent border-0 !important;
    }

    /* 调整提示文本布局，保持和原设计一致 */
    .filepond--label-idle {
        @apply flex items-center justify-start !important;
        font-size: inherit !important;
        color: inherit !important;
    }

    /* 上传后的文件项样式匹配设计风格 */
    .filepond--item {
        @apply rounded-lg border border-brand-color bg-brand-color-ultralight !important;
    }

    /* 文件项文本颜色统一 */
    .filepond--file-info {
        @apply text-brand-color !important;
    }

    /* 自定义拖拽高亮效果，避免和原设计冲突 */
    .filepond--drop-label.filepond--drop-label label-idle.filepond--drop-label label-action {
        @apply bg-transparent !important;
    }
}

4. 确保Tailwind识别自定义类 #

修改tailwind.config.js，确保FilePond的类被扫描到，避免样式被Purge：

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    // 包含所有用到FilePond的文件路径
  ],
  theme: {
    extend: {
      colors: {
        'brand-color': '#2384C6',
        'brand-color-ultralight': '/* 替换为你实际的超浅品牌色值 */',
        'tertiary-text': '/* 替换为你实际的三级文本颜色值 */',
      },
    },
  },
  plugins: [],
}

完成以上配置后，FilePond就能保留所有上传功能，同时样式和你最初设计的div完全一致。

内容的提问来源于stack exchange，提问作者Phoso