Vue.js 如何将Tailwindcss集成到VUE cli3项目中'；什么是web组件？

以下是我所拥有的：

一个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组件中呢？

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

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

安装tailwindcss:

npm安装tailwindcss——保存开发

创建一个Tailwind配置文件：

/node\u modules/.bin/Tailwind init Tailwind.js

这将在项目的根目录中创建一个名为

tailwind.js

的tailwind配置文件

创建一个

tailwind.css

（你可以给它取任何你想要的名字）文件。我通常把这个文件放在

assets/css/tailwind.css

中。在此文件中，添加问题中指定的配置规则。您现在不必担心在这个文件中包含自定义css样式

打开package.json文件，在脚本部分创建一个新的

脚本：复制粘贴此：
“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>

@导入“/assets/css/output”；
@导入“/assets/css/styles”；

---

完成。

尝试在单个文件组件中使用

。谢谢，这对我帮助很大@christophrumpel很高兴我能提供帮助：）请注意，如果您使用@vue/cli，您实际上可以使用它，它将自动处理purgecss并为您发出优化的样式表。