如何将 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 项目中运行良好，因为我正在为 TailwindCSS 使用 PostCSS。但是当我创建 web 组件时它不再工作了。我也没有像输出的 CSS 文件。我只有 tailwind.css 文件：

@tailwind preflight;
@tailwind components;


// my custom styles

@tailwind utilities;

我的问题：

那么如何将 TailwindCSS 样式以及自定义 CSS 样式添加到 Web 组件中？

Answer 1

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

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

安装 Tailwind CSS：npm install tailwindcss --save-dev
创建 Tailwind 配置文件：./node_modules/.bin/tailwind init tailwind.js 这将在项目的根目录中创建一个名为 tailwind.js 的顺风配置文件。
创建一个tailwind.css（你可以给它任何你想要的名字）文件。我通常把这个文件放在assets/css/tailwind.css。在此文件中，添加您在问题中指定的配置规则。您暂时不必担心在此文件中包含您的自定义 css 样式。
打开您的 package.json 文件并在脚本部分创建一个新的 script：复制粘贴此内容："tailwind": "tailwind build ./src/assets/css/tailwind.css -c ./tailwind.js -o ./src/assets/css/output.css".

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

的 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"
    
  },

如果您想添加自己的自定义样式，请创建一个 styles.css（可以使用任何名称）并将此文件也放在 assets/css/styles.css
中
现在让我们将这些 css 文件包含到我们的组件中：

打开您的 App.vue 文件。

在样式部分，导入文件：

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

Answer 2

通常当你使用 Vue 和 Tailwindcss 时，你只需要在 main.js 处引用一次 index.css，就像 tailwind 文档中所说的那样 (https://tailwindcss.com/docs/guides/vite)

但是在使用自定义web组件时，你必须在自定义组件内部再次引用tailwind，如：

<template>
  //...your custom web component 
</template>
    
<style lang="scss">
  @import url("../index.css");
</style>

（在 index.css 上）

@tailwind base;
@tailwind components;
@tailwind utilities;

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

How to integrate Tailwindcss into a VUE CLI 3 project's web component?

web-component

vue.js

vue-cli-3