时间戳

首页 > 解决方案 > 使用 Vue3 构建 tailwindcss 安装以进行生产

npm - 使用 Vue3 构建 tailwindcss 安装以进行生产

问题描述

我对 npm 很不熟悉，（我用 python 开发）而且大部分时间我只是按照教程所说的去做。但现在我被困住了。我尝试将 Tailwindcss 与“Vue 3”结合使用，并按照网站上的安装步骤操作：网站 tailwind+Vue 3

npm init @vitejs/app my-project
cd my-project
npm install
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init -p

在添加一些 HTML 并运行之后：

npm run dev

在浏览器中一切正常。

但是后来我想构建它以在我使用的生产中使用

npm run build

经过一些处理后，我的 dist 文件夹充满了 index.html 和资产。

这里开始我的问题。我期待我可以将这些文件复制到我的服务器，并且它应该为我的站点提供服务。但我看到的只是一个空白页。

我在任何地方或其他有同样问题的人都找不到答案，所以我认为这是我不知道的愚蠢行为。但它是什么？

希望可以有人帮帮我...

标签： npmbuildproductiontailwind-cssvuejs3

解决方案

试试这个，也许会起作用 https://dev.to/vonagedev/using-tailwind-css-with-vue-js-b1b

Webpack（和 Vue-loader，它是 Vue.js 组件的 Webpack 加载器）可以配置为使用 PostCSS，它是 CSS 的 Webpack 加载器。

它将在 postcss.config.js 文件中查找配置，并可以从您添加的包中使用 CSS 构建应用程序。并且，使用此代码对其进行配置。

// postcss.config.js


const autoprefixer = require('autoprefixer');
const tailwindcss = require('tailwindcss');

module.exports = {
  plugins: [
    tailwindcss,
    autoprefixer,
  ],
};

演示应用程序也是在没有任何 CSS 资产的情况下生成的。相反，它在组件内部使用 CSS（这很好）。要包含 Tailwind CSS，请使用您的编辑器或以下命令创建 CSS 资产。


# mkdir -p for making parents they don't exist

mkdir -p src/assets/styles/
touch src/assets/styles/index.css

现在添加这段代码，它添加了 Tailwind CSS 库的各种包。

/* src/assets/styles/index.css */


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

推荐阅读