如何将 Tailwindcss 集成到 VUE CLI 3 项目的 Web 组件中？

Question

这是我所拥有的：

一个包含大量组件和内容的 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;

我的问题：

那么我如何才能将 TailwindCSS 样式以及我的自定义 CSS 样式获取到 Web 组件中呢？

Answer 1

我确信其中一些步骤对您来说是多余的，但我想完成所有这些步骤以避免任何混淆：

确保您位于项目的根文件夹中：

1. 安装 Tailwind CSS：npm install tailwindcss --save-dev

2. 创建 Tailwind 配置文件：./node_modules/.bin/tailwind init tailwind.js 这将创建一个tailwind.js在项目根目录中调用的 tailwind 配置文件。

3. 创建一个tailwind.css（您可以给它任何您想要的名称）文件。我通常把这个文件放在assets/css/tailwind.css. 在此文件中，添加您在问题中指定的配置规则。您现在不必担心在此文件中包含自定义 css 样式。

4. 打开 package.json 文件并script在脚本部分创建一个新文件：复制粘贴此："tailwind": "tailwind build ./src/assets/css/tailwind.css -c ./tailwind.js -o ./src/assets/css/output.css"。

每次运行时npm run tailwind，tailwind 都会被编译并放入一个名为 .css 的 css 文件中output.css。

"scripts": {
    "tailwind": "tailwind build ./src/assets/css/tailwind.css -c ./tailwind.js -o ./src/assets/css/output.css",
    "serve": "npm run tailwind && vue-cli-service serve",
    "build": "npm run tailwind && vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test:unit": "vue-cli-service test:unit"
    
  },

5. 如果您想添加自己的自定义样式，请创建一个styles.css（可以使用任何名称）并将此文件也放在assets/css/styles.css

6. 现在让我们将这些 css 文件包含到我们的组件中：

打开你的App.vue文件。

在样式部分中，导入文件：

<style lang="scss">
  @import "./assets/css/output";
  @import "./assets/css/styles";
</style>