如何在 Sveltekit 中使用 Tailwind 元素答案

【问题标题】：How to use Tailwind Elements in Sveltekit如何在 Sveltekit 中使用 Tailwind 元素
【发布时间】：2022-11-03 12:23:45
【问题描述】：

我试图在一个苗条的工具包应用程序中使用一个简单的 Tailwind date picker 组件，但是日历弹出窗口没有出现。我认为这与 SRR 有关。通过使用 onMount() 导入模块，我能够在 Tailwind 元素的 installation 上取得一些进展：

    import { onMount } from 'svelte';
    import { browser } from '$app/env';

    onMount(async() => {
        if(browser) {
            await import('tw-elements');
        }
    });

但是，日历图标和弹出窗口仍未呈现。（当我在 app.html 中包含 CDN 时，它们也不会呈现）。有解决办法吗？

tailwind.config.js（附注night wind 工作得很好）：

module.exports = {
  darkMode: "class",
  content: [
    './src/**/*.{html,js,svelte,ts}', 
    './node_modules/tw-elements/dist/js/**/*.js'
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require("nightwind"),
    require("tw-elements/dist/plugin")
  ],
}

【问题讨论】：

当我添加延迟时它会起作用，但这似乎不是最佳实践。等待 setTimeout(() => { import('tw-elements'); }, 1000);

标签： server-side-rendering sveltekit

【解决方案1】：

文档很糟糕，但它确实有效。这就是我如何开始的。

在您的 Svelte Kit 布局中，为 tw-elements 和 Font awesome 导入 CSS。这很关键，因为 datepicker 图标默认使用 Font Awesome，当您单击该图标时，它会打开选择器。

import 'tw-elements/dist/css/index.min.css'
import '@fortawesome/fontawesome-free/css/fontawesome.min.css'
import '@fortawesome/fontawesome-free/css/solid.css'

在脚本标签中声明绑定元素： let datePickerElement

<!-- bind the element using Svelte to the datepicker container -->
<div bind:this={datePickerElement} class="datepicker relative form-floating mb-3 xl:w-96">
    <input type="text" class="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none"
        placeholder="Select a date"/>
    <label for="floatingInput" class="text-gray-700">Select a date</label>
</div>

在 Svelte onMount 中：

// I didn't even need the if (browser) statement)
// import the library and initialize the datepicker
onMount(async () => {
    await import('tw-elements/dist/src/js/index.js')
    const datepicker = new Datepicker(datepickerEl)
})

【讨论】：

【解决方案2】：

看起来它正在使用MD Bootstrap Datepicker，这是MDB Pro 的一项高级功能，并且不是免费的。

【讨论】：

那家伙正在使用 Tailwind Elements，而您指的是另一个库...
你试过了吗？去做吧。 (tailwind-elements.com/docs/standard/forms/datepicker) 将代码渲染到您的前端并检查它。 tw-elements 日期选择器正在使用 mdb。显然，两者都是同一个人制作的，tw-elements 似乎是他们的免费版本，而 mdb 是高级版本。
不是很相关，因为这可以通过导入免费库并像我在回答中所做的那样解决。