使用顺风构建 Javascript 组件答案

【问题标题】：Building Javascript components with tailwind使用顺风构建 Javascript 组件
【发布时间】：2022-08-05 05:56:24
【问题描述】：

我只想在javascript中使用tailwind css创建组件：

我从那里开始添加一个元素：

let myil = document.createElement(\"li\", {
  onclick: \'check(\"5\");\',
  class: \"text-gray-900 cursor-default select-none relative py-2 pl-3 pr-9\",
  zip:\"listbox-option-0\",
  id: \"listbox-option-5\",
  role: \"option\",
});

到我的“ul”元素。

我可以看到元素，但没有应用 css。如果元素是用 javascript 构建的，tailwind 不起作用吗？

我的猜测：顺风清除了您不需要的课程。问题是如果您使用 javascript 构建元素，tailwind 无法知道您将需要该类，例如 text-gray-900，因此它会被清除

标签： javascript tailwind-css

【解决方案1】：

Tailwind 会清除您不需要的课程。如果您使用 javascript 构建元素，tailwind 无法知道您将需要例如text-gray-900，因此它会被清除。

如果您有任何 JavaScript 文件可以操作您的 HTML 以添加类，请确保您也包含这些文件

module.exports = {
  content: [
    // ...
    './src/**/*.js',
  ],
  // ...
}

你可以在这里阅读：https://tailwindcss.com/docs/content-configuration

【讨论】：

【解决方案2】：

该解决方案最有可能使用适合顺风的代码设置。我相信相当多的 JS 框架都有用于顺风的包，比如 react/preact、nextjs 等。所以你可以使用其中的一个，或者尝试自定义你的设置以使其工作。

我在文档中找到了这个：https://tailwindcss.com/docs/adding-custom-styles，也许您可以编写代码在顺风中注册类名，以某种方式防止它们被清除？

或者只是在代码中的某处添加嵌入整个 tailwind CSS 实用程序库，但您将失去清除未使用类的功能。

【讨论】：