I am using shadcn ui (https://ui.shadcn.com/) with next.js, a problems occurs that styling the layout doesn't work.
我正在使用ShadcnUI(https://ui.shadcn.com/)和next.js,出现了一个问题,样式布局不起作用。
I look into the development tools and found the class of bg-card, card-foreground has no variable linked to them.
我查看了开发工具,发现BG-CARD的类,CARD-FORENT没有与它们关联的变量。
this is my configuration
这是我的配置
and I added the import '../styles/globals.css' in the app/layout.tsx
我在app/layout.tsx中添加了导入文件‘../style/lobals.css’
tailwind.config.ts
tailwind.config.ts
module.exports = {
darkMode: ["class"],
content: [
'./pages/**/*.{ts,tsx}',
'./components/**/*.{ts,tsx}',
'./app/**/*.{ts,tsx}',
'./src/**/*.{ts,tsx}',
],
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)",
},
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: [require("tailwindcss-animate")],
}
so far I don't see anything wrong, no idea why the styling failed to work
到目前为止,我没有看到任何问题,不知道为什么造型失败
更多回答
share your global.css
file
共享您的global al.css文件
I had the same problem, but I managed to solve it.
When you init your shadcn config: npx shadcn-ui@latest init
, make sure to give the right path and name for your files.
我也有同样的问题,但我设法解决了。初始化shadcn配置:npx shadcn-ui@Latest init时,请确保为文件提供正确的路径和名称。
On my side for:
站在我这边,支持:
Where is your global CSS file? … app/global.css
=> I had to change it for src/app/globals.css
because I use the src folder in my nextjs
Where is your tailwind.config.js located? … tailwind.config.js
=> I had to change it for tailwind.config.ts because I use typescript instead of javascript.
I'm pretty sure your error comes from one of these 2 files.
我非常确定您的错误来自这两个文件中的一个。
Also please make sure you have only 1 globals.css (or global.css) file and 1 tailwind.config.ts (or tailwind.config.js) file.
另外,请确保您只有1个global als.css(或global al.css)文件和1个trawind.config.ts(或taviwind.config.js)文件。
And if this doesn't fix your problem, like @ahmed said, can you send us your globals.css/global.css + your tailwond.config.ts/.js files?
如果这还不能解决你的问题,就像@Ahmed所说的,你能把你的global als.css/lobal.css+你的tafind.config.ts/.js文件发送给我们吗?
更多回答
我是一名优秀的程序员,十分优秀!