顺风css中没有border-orange-400类(vue 3)

Question

只是在vue3应用程序中摆弄顺风css。。。看起来没有边界-橙色-400实用程序类：

.notification-warning {
@apply border-orange-400 text-sm font-bold;
}

控制台输出：

Syntax Error: SyntaxError
(15:12) The `border-orange-400` class does not exist, but `border-green-400` does. If you're 
sure that `border-orange-400` exists, make sure that any `@import` statements are being 
properly processed before Tailwind CSS sees your CSS, as `@apply` can only be used for classes 
in the same CSS tree.

我的包.json片段：

"autoprefixer": "^9.8.8",
"eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-vue": "^7.0.0",
"postcss": "^7.0.39",
"prettier": "^2.2.1",
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17",
"typescript": "~4.1.5",
"vue-jest": "^5.0.0-0"

Answer 1

默认情况下不启用橙色，但您可以添加以下内容：

tailwind.config.js

const colors = require("tailwindcss/colors");
module.exports = {
purge: ['./src/**/*.html', './src/**/*.vue', './src/**/*.js', './src/**/*.ts', './src/**/*.tsx', './src/**/*.css'],
darkMode: 'class', // or 'media' or 'class'
theme: {
extend: {
colors: {
orange:colors.orange,

},

},
},
};