这是我所拥有的:
一个包含大量组件和内容的 VUE ClI 3 项目。
我需要的:
这是一种重用该项目并将其包含在我客户的网站上的方法,非常简单。我正在考虑只添加一个 JS 文件和一点 HTML 片段。
我做了什么:
我一直在使用 VUE CLI 3 将我的项目导出为 Web 组件。这非常有效,因为现在我只需使用一个 JS 文件和我创建的 Web 组件标签。
问题:
问题是我在项目中使用 Tailwindcss 设置的所有样式都没有在 Web 组件内设置样式,因为这些样式似乎不包含在内。
通常,您会在每个 Vue 组件本身中包含您的样式。(我使用的是 .vue 单个组件)但是由于我使用的是 TailwindCSS,所以我在 HTML 标签上使用了很多类。这在我的 VUE CLI 3 项目中运行良好,因为我使用 PostCSS 作为 TailwindCSS。但当我创建 Web 组件时它不再起作用。我也没有输出的 CSS 文件。我只有 tailwind.css 文件:
@tailwind preflight;
@tailwind components;
// my custom styles
@tailwind utilities;
Run Code Online (Sandbox Code Playgroud)
我的问题:
那么我如何才能将 TailwindCSS 样式以及我的自定义 CSS 样式获取到 Web 组件中呢?