顺风css（vue 3）中没有border-orange-400类

Question

只是在 vue 3 应用程序中弄乱了 tailwind css...看起来没有border-orange-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.

我的 package.json sn-p:

 "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,
            
            },
    
        },
    },

};