CODEWITHSUNDEEP
csstypescriptvue.jsvuejs3tailwind-css
momi
momi

Reputation: 439

No border-orange-400 class in tailwind css (vue 3)

just messing around with tailwind css in vue 3 app...looks like there in no border-orange-400 utility class:

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

Output in console:

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.

My package.json snippet:

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

Upvotes: 0

Views: 673

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

The orange color is not enabled by default, but you could add as follows :

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

};

Upvotes: 2

Related Questions