Ошибка синтаксиса Tailwindcsss: класса «границы» не существует при использовании пользовательского интерфейса shadcn вну ⇐ CSS

[Anonymous]

Итак, я пытаюсь использовать компоненты Shadcn в пакете пользовательского интерфейса в моем турборепо. Я успешно установил Tailwind, затем я следовал инструкциям, приведенным в ручной установке Shadcn для установки пользовательского интерфейса Shadcn в упаковке. Теперь, когда я пытаюсь создать пакет пользовательского интерфейса, он дает мне следующую ошибку:
ошибка:
> @e-commerce-platform/ui@0.0.0 build C:\Users\aayus\Projects\e-commerce-platform\packages\ui
> tailwindcss -i ./src/styles.css -o ./dist/index.css

Rebuilding...
CssSyntaxError: tailwindcss: C:\Users\aayus\Projects\e-commerce-platform\packages\ui\src\styles.css:1:1: The border-border class does not exist. If border-border is a custom class, make sure it is defined within a @layer directive.
at Input.error (C:\Users\aayus\Projects\e-commerce-platform\node_modules\.pnpm\postcss@8.4.47\node_modules\postcss\lib\input.js:106:16)
at AtRule.error (C:\Users\aayus\Projects\e-commerce-platform\node_modules\.pnpm\postcss@8.4.47\node_modules\postcss\lib\node.js:115:32)
at processApply (C:\Users\aayus\Projects\e-commerce-platform\node_modules\.pnpm\tailwindcss@3.4.13\node_modules\tailwindcss\lib\lib\expandApplyAtRules.js:380:29)
at C:\Users\aayus\Projects\e-commerce-platform\node_modules\.pnpm\tailwindcss@3.4.13\node_modules\tailwindcss\lib\lib\expandApplyAtRules.js:551:9
at C:\Users\aayus\Projects\e-commerce-platform\node_modules\.pnpm\tailwindcss@3.4.13\node_modules\tailwindcss\lib\processTailwindFeatures.js:55:50
at async Object.Once (C:\Users\aayus\Projects\e-commerce-platform\node_modules\.pnpm\tailwindcss@3.4.13\node_modules\tailwindcss\lib\cli\build\plugin.js:245:17)
at async LazyResult.runAsync (C:\Users\aayus\Projects\e-commerce-platform\node_modules\.pnpm\postcss@8.4.47\node_modules\postcss\lib\lazy-result.js:261:11)
at async build (C:\Users\aayus\Projects\e-commerce-platform\node_modules\.pnpm\tailwindcss@3.4.13\node_modules\tailwindcss\lib\cli\build\index.js:49:9) {
reason: 'The border-border class does not exist. If border-border is a custom class, make sure it is defined within a @layer directive.',
file: 'C:\\Users\\aayus\\Projects\\e-commerce-platform\\packages\\ui\\src\\styles.css',
source: '@tailwind base;\r\n' +
'@tailwind components;\r\n' +
'@tailwind utilities;\r\n' +
'\r\n' +
'@layer base {\r\n' +
' :root {\r\n' +
' --background: 0 0% 100%;\r\n' +
' --foreground: 222.2 47.4% 11.2%;\r\n' +
'\r\n' +
' --muted: 210 40% 96.1%;\r\n' +
' --muted-foreground: 215.4 16.3% 46.9%;\r\n' +
'\r\n' +
' --popover: 0 0% 100%;\r\n' +
' --popover-foreground: 222.2 47.4% 11.2%;\r\n' +
'\r\n' +
' --border: 214.3 31.8% 91.4%;\r\n' +
' --input: 214.3 31.8% 91.4%;\r\n' +
'\r\n' +
' --card: 0 0% 100%;\r\n' +
' --card-foreground: 222.2 47.4% 11.2%;\r\n' +
'\r\n' +
' --primary: 222.2 47.4% 11.2%;\r\n' +
' --primary-foreground: 210 40% 98%;\r\n' +
'\r\n' +
' --secondary: 210 40% 96.1%;\r\n' +
' --secondary-foreground: 222.2 47.4% 11.2%;\r\n' +
'\r\n' +
' --accent: 210 40% 96.1%;\r\n' +
' --accent-foreground: 222.2 47.4% 11.2%;\r\n' +
'\r\n' +
' --destructive: 0 100% 50%;\r\n' +
' --destructive-foreground: 210 40% 98%;\r\n' +
'\r\n' +
' --ring: 215 20.2% 65.1%;\r\n' +
'\r\n' +
' --radius: 0.5rem;\r\n' +
' }\r\n' +
'\r\n' +
' .dark {\r\n' +
' --background: 224 71% 4%;\r\n' +
' --foreground: 213 31% 91%;\r\n' +
'\r\n' +
' --muted: 223 47% 11%;\r\n' +
' --muted-foreground: 215.4 16.3% 56.9%;\r\n' +
'\r\n' +
' --accent: 216 34% 17%;\r\n' +
' --accent-foreground: 210 40% 98%;\r\n' +
'\r\n' +
' --popover: 224 71% 4%;\r\n' +
' --popover-foreground: 215 20.2% 65.1%;\r\n' +
'\r\n' +
' --border: 216 34% 17%;\r\n' +
' --input: 216 34% 17%;\r\n' +
'\r\n' +
' --card: 224 71% 4%;\r\n' +
' --card-foreground: 213 31% 91%;\r\n' +
'\r\n' +
' --primary: 210 40% 98%;\r\n' +
' --primary-foreground: 222.2 47.4% 1.2%;\r\n' +
'\r\n' +
' --secondary: 222.2 47.4% 11.2%;\r\n' +
' --secondary-foreground: 210 40% 98%;\r\n' +
'\r\n' +
' --destructive: 0 63% 31%;\r\n' +
' --destructive-foreground: 210 40% 98%;\r\n' +
'\r\n' +
' --ring: 216 34% 17%;\r\n' +
'\r\n' +
' --radius: 0.5rem;\r\n' +
' }\r\n' +
'}\r\n' +
'\r\n' +
'@layer base {\r\n' +
' * {\r\n' +
' @apply border-border;\r\n' +
' }\r\n' +
' body {\r\n' +
' @apply bg-background text-foreground;\r\n' +
' font-feature-settings:\r\n' +
' "rlig" 1,\r\n' +
' "calt" 1;\r\n' +
' }\r\n' +
'}\r\n',
line: 1,
column: 1,
endLine: 1,
endColumn: 16,
input: {
column: 1,
endColumn: 16,
endLine: 1,
line: 1,
source: '@tailwind base;\r\n' +
'@tailwind components;\r\n' +
'@tailwind utilities;\r\n' +
'\r\n' +
'@layer base {\r\n' +
' :root {\r\n' +
' --background: 0 0% 100%;\r\n' +
' --foreground: 222.2 47.4% 11.2%;\r\n' +
'\r\n' +
' --muted: 210 40% 96.1%;\r\n' +
' --muted-foreground: 215.4 16.3% 46.9%;\r\n' +
'\r\n' +
' --popover: 0 0% 100%;\r\n' +
' --popover-foreground: 222.2 47.4% 11.2%;\r\n' +
'\r\n' +
' --border: 214.3 31.8% 91.4%;\r\n' +
' --input: 214.3 31.8% 91.4%;\r\n' +
'\r\n' +
' --card: 0 0% 100%;\r\n' +
' --card-foreground: 222.2 47.4% 11.2%;\r\n' +
'\r\n' +
' --primary: 222.2 47.4% 11.2%;\r\n' +
' --primary-foreground: 210 40% 98%;\r\n' +
'\r\n' +
' --secondary: 210 40% 96.1%;\r\n' +
' --secondary-foreground: 222.2 47.4% 11.2%;\r\n' +
'\r\n' +
' --accent: 210 40% 96.1%;\r\n' +
' --accent-foreground: 222.2 47.4% 11.2%;\r\n' +
'\r\n' +
' --destructive: 0 100% 50%;\r\n' +
' --destructive-foreground: 210 40% 98%;\r\n' +
'\r\n' +
' --ring: 215 20.2% 65.1%;\r\n' +
'\r\n' +
' --radius: 0.5rem;\r\n' +
' }\r\n' +
'\r\n' +
' .dark {\r\n' +
' --background: 224 71% 4%;\r\n' +
' --foreground: 213 31% 91%;\r\n' +
'\r\n' +
' --muted: 223 47% 11%;\r\n' +
' --muted-foreground: 215.4 16.3% 56.9%;\r\n' +
'\r\n' +
' --accent: 216 34% 17%;\r\n' +
' --accent-foreground: 210 40% 98%;\r\n' +
'\r\n' +
' --popover: 224 71% 4%;\r\n' +
' --popover-foreground: 215 20.2% 65.1%;\r\n' +
'\r\n' +
' --border: 216 34% 17%;\r\n' +
' --input: 216 34% 17%;\r\n' +
'\r\n' +
' --card: 224 71% 4%;\r\n' +
' --card-foreground: 213 31% 91%;\r\n' +
'\r\n' +
' --primary: 210 40% 98%;\r\n' +
' --primary-foreground: 222.2 47.4% 1.2%;\r\n' +
'\r\n' +
' --secondary: 222.2 47.4% 11.2%;\r\n' +
' --secondary-foreground: 210 40% 98%;\r\n' +
'\r\n' +
' --destructive: 0 63% 31%;\r\n' +
' --destructive-foreground: 210 40% 98%;\r\n' +
'\r\n' +
' --ring: 216 34% 17%;\r\n' +
'\r\n' +
' --radius: 0.5rem;\r\n' +
' }\r\n' +
'}\r\n' +
'\r\n' +
'@layer base {\r\n' +
' * {\r\n' +
' @apply border-border;\r\n' +
' }\r\n' +
' body {\r\n' +
' @apply bg-background text-foreground;\r\n' +
' font-feature-settings:\r\n' +
' "rlig" 1,\r\n' +
' "calt" 1;\r\n' +
' }\r\n' +
'}\r\n',
url: 'file:///C:/Users/aayus/Projects/e-commerce-platform/packages/ui/src/styles.css',
file: 'C:\\Users\\aayus\\Projects\\e-commerce-platform\\packages\\ui\\src\\styles.css'
},
plugin: 'tailwindcss'
}
 ELIFECYCLE  Command failed with exit code 1.

Вот мои файлы конфигурации:
hailwind.config.ts
import type { Config } from "tailwindcss";
import sharedConfig from "@e-commerce-platform/tailwind-config";
import { fontFamily } from "tailwindcss/defaultTheme";
import tailwindcssAnimate from "tailwindcss-animate";

const config: Pick<
Config,
"prefix" | "presets" | "content" | "darkMode" | "theme" | "plugins"
> = {
darkMode: ["class"],
content: ["./src/**/*.tsx"],
prefix: "ui-",
presets: [sharedConfig],
theme: {
container: {
center: true,
padding: "2rem",
screens: {
"2xl": "1400px",
},
},
extend: {
colors: {
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))",
primary: {
DEFAULT: "hsl(var(--primary))",
foreground: "hsl(var(--primary-foreground))",
},
secondary: {
DEFAULT: "hsl(var(--secondary))",
foreground: "hsl(var(--secondary-foreground))",
},
destructive: {
DEFAULT: "hsl(var(--destructive))",
foreground: "hsl(var(--destructive-foreground))",
},
muted: {
DEFAULT: "hsl(var(--muted))",
foreground: "hsl(var(--muted-foreground))",
},
accent: {
DEFAULT: "hsl(var(--accent))",
foreground: "hsl(var(--accent-foreground))",
},
popover: {
DEFAULT: "hsl(var(--popover))",
foreground: "hsl(var(--popover-foreground))",
},
card: {
DEFAULT: "hsl(var(--card))",
foreground: "hsl(var(--card-foreground))",
},
},
borderRadius: {
lg: `var(--radius)`,
md: `calc(var(--radius) - 2px)`,
sm: "calc(var(--radius) - 4px)",
},
fontFamily: {
sans: ["var(--font-sans)", ...fontFamily.sans],
},
keyframes: {
"accordion-down": {
from: { height: "0" },
to: { height: "var(--radix-accordion-content-height)" },
},
"accordion-up": {
from: { height: "var(--radix-accordion-content-height)" },
to: { height: "0" },
},
},
animation: {
"accordion-down": "accordion-down 0.2s ease-out",
"accordion-up": "accordion-up 0.2s ease-out",
},
},
},
plugins: [tailwindcssAnimate],
};

export default config;

< /code>
styles.css
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
:root {
--background: 0 0% 100%;
--foreground: 222.2 47.4% 11.2%;

--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;

--popover: 0 0% 100%;
--popover-foreground: 222.2 47.4% 11.2%;

--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;

--card: 0 0% 100%;
--card-foreground: 222.2 47.4% 11.2%;

--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;

--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;

--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;

--destructive: 0 100% 50%;
--destructive-foreground: 210 40% 98%;

--ring: 215 20.2% 65.1%;

--radius: 0.5rem;
}

.dark {
--background: 224 71% 4%;
--foreground: 213 31% 91%;

--muted: 223 47% 11%;
--muted-foreground: 215.4 16.3% 56.9%;

--accent: 216 34% 17%;
--accent-foreground: 210 40% 98%;

--popover: 224 71% 4%;
--popover-foreground: 215 20.2% 65.1%;

--border: 216 34% 17%;
--input: 216 34% 17%;

--card: 224 71% 4%;
--card-foreground: 213 31% 91%;

--primary: 210 40% 98%;
--primary-foreground: 222.2 47.4% 1.2%;

--secondary: 222.2 47.4% 11.2%;
--secondary-foreground: 210 40% 98%;

--destructive: 0 63% 31%;
--destructive-foreground: 210 40% 98%;

--ring: 216 34% 17%;

--radius: 0.5rem;
}
}

@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
font-feature-settings:
"rlig" 1,
"calt" 1;
}
}



Подробнее здесь: https://stackoverflow.com/questions/790 ... n-using-sh