Build dist vue with tailwindcss not working - vue.js

Question

when built done, then css in tailwind is not display
In my package.json. I dont know build with tailwind look like, i just use the default.
{
"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"
}
And in my tailwind.config.js, i add some color, and default, i dont edit anymore.
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

I think you're missing to import tailwind css into you project. It may be App.vue or main.js file. You just add below line top of your script.
import from './tailwind.css'
and of course in tailwind.css file should have below code inserted.
/* ./tailwind.css */
#tailwind base;
#tailwind components;
#tailwind utilities;