vue.js - 如何将 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 的顺风配置文件。

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

4. 打开您的 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"
    
  },

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

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

打开你的 App.vue 文件。

在样式部分，导入文件:

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