使用tailwindcss构建dist-vue不起作用

Question

当构建完成时，顺风中的css不显示

在我的package.json.我不知道顺风构建的样子，我只是使用默认值。

{
"name": "portiflo",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"development": "vue-cli-service serve --mode development",
"build": "vue-cli-service build"
},
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.36",
"@fortawesome/free-solid-svg-icons": "^5.15.4",
"@fortawesome/vue-fontawesome": "^3.0.0-5",
"core-js": "^3.6.5",
"vue": "^3.0.0",
"vue-pdf": "^4.3.0",
"vue-router": "^4.0.0-0",
"vuex": "^4.0.0-0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-plugin-vuex": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0",
"autoprefixer": "^9.8.6",
"postcss": "^7.0.36",
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.7"
}

在我的tailwind.config.js中，我添加了一些颜色，默认情况下，我不再编辑。

module.exports = {
purge: [
'./src/**/*.html',
'./src/**/*.js',
],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
backgroundColor: theme => ({
...theme('colors'),
'yellow-background': '#FEF48E',
'red-headbar': '#90E39A',
'green-body': '#EDD9A3',
'post': '#FBE7C6'
})
},
variants: {
extend: {},
},
plugins: [],
}

Answer 1

我认为您缺少将顺风css导入到项目中的功能。它可能是App.vue或main.js文件。您只需在脚本的下一行添加即可。

import from './tailwind.css'

当然，在tailwind.css文件中应该插入以下代码。

/* ./tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;