First you should use the next libraries:
"@fortawesome/fontawesome-svg-core": "^6.5.1",
"@fortawesome/free-solid-svg-icons": "^6.5.1",
"@fortawesome/react-fontawesome": "^0.2.0",
"ev-component-library": "[email protected]:elVengador/ev-component-library.git#41a74316173e0ccf5e5c74208a80650931f5c41c",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-stately": "^3.30.1",
"tailwind-merge": "^2.2.1",
"tailwindcss": "^3.4.1"
add in content the ev-component-library/dist and set up the colors: ev-primary, ev-secondary, ev-dark, ev-light and ev-destructive
const colors = require("tailwindcss/colors");
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}",
"./node_modules/ev-component-library/dist/**/*.{js,ts,jsx,tsx}",
], //<-- to apply styles on ev-component-library
theme: {
extend: {
colors: {
//<-- define the colors to use on ev-component-library
"ev-primary": {
DEFAULT: "#499AAC",
hard: colors.cyan[600],
harder: colors.cyan[700],
},
"ev-secondary": {
DEFAULT: "#DE7A4F",
hard: colors.orange[600],
harder: colors.orange[700],
},
"ev-dark": {
DEFAULT: "#1C1C1C",
hard: colors.neutral[700],
harder: colors.neutral[600],
},
"ev-light": {
DEFAULT: "#F8F1E5",
hard: colors.neutral[200],
harder: colors.neutral[300],
},
"ev-destructive": {
DEFAULT: "#d63e3e",
hard: colors.red[600],
harder: colors.red[700],
},
},
},
},
darkMode: "class",
plugins: [],
};