components.json
你的项目的配置。
components.json
文件包含了你的项目的配置信息。
我们使用它来了解你的项目是如何设置的,以及如何生成为你项目定制的组件。
注意:components.json
文件是可选的,并且**只有在你使用 CLI** 添加组件到你的项目时才需要。如果你使用复制粘贴的方法,你不需要这个文件。
你可以在你的项目中运行以下命令来创建一个 components.json
文件
npx shadcn-solid@latest init
查看 CLI 部分 获取更多信息。
$schema
你可以在这里查看 components.json
的 JSON Schema。
{
"$schema": "https:/shadcn-solid.com/schema.json"
}
tailwind
用于帮助 CLI 了解如何在你的项目中设置 Tailwind CSS 的配置。
请参阅(安装部分)[/docs/installation] 了解如何设置 Tailwind CSS。
tailwind.config
你的 tailwind.config.js
文件所在的路径。
{
"tailwind": {
"config": "tailwind.config.js" | "tailwind.config.ts"
}
}
tailwind.css.path
导入 Tailwind CSS 到你的项目中的 CSS 文件的路径。
{
"tailwind": {
"css": {
"path": "src/app.css"
}
}
}
tailwind.color
用于为你的组件生成默认的颜色调色板。**初始化后不能更改。**
{
"tailwind": {
"color": "gray" | "neutral" | "slate" | "stone" | "zinc"
}
}
tailwind.css.variable
你可以选择使用 CSS 变量或 Tailwind CSS 实用类来进行主题化。
要使用实用类进行主题化,请将 tailwind.cssVariables
设置为 false
。对于 CSS 变量,请将 tailwind.cssVariables
设置为 true
。
{
"tailwind": {
"css": {
"variabe": `true` | `false`
}
}
}
有关更多信息,请参阅(主题化文档)[/docs/theming]。
**初始化后不能更改。** 要在 CSS 变量和实用类之间切换,你必须删除并重新安装你的组件。
tailwind.prefix
用于你的 Tailwind CSS 实用类的(类名)前缀。组件将使用此前缀添加。
{
"tailwind": {
"prefix": "tw-"
}
}
uno
用于帮助 CLI 了解如何在你的项目中设置 Uno CSS 的配置。
请参阅 安装部分 了解如何设置 Uno CSS。
uno.config
你的 uno.config.ts
文件所在的路径。
{
"uno": {
"config": "uno.config.ts"
}
}
uno.css.path
导入 Uno CSS 到你的项目中的 CSS 文件的路径。
{
"uno": {
"css": {
"path": "src/app.css"
}
}
}
uno.color
用于为你的组件生成默认的颜色调色板。**初始化后不能更改。**
{
"uno": {
"color": "gray" | "neutral" | "slate" | "stone" | "zinc"
}
}
uno.css.variable
你可以选择使用 CSS 变量或 Uno CSS 实用类来进行主题化。
要使用实用类进行主题化,请将 uno.cssVariables
设置为 false
。对于 CSS 变量,请将 uno.cssVariables
设置为 true
。
{
"uno": {
"css": {
"variabe": `true` | `false`
}
}
}
有关更多信息,请参阅 主题化文档。
**初始化后不能更改。** 要在 CSS 变量和实用类之间切换,你必须删除并重新安装你的组件。
uno.prefix
用于你的 Uno CSS 实用类的(类名)前缀。组件将使用此前缀添加。
{
"uno": {
"prefix": "uno-"
}
}
alias
CLI 使用这些值和你的 tsconfig.json
或 jsconfig.json
文件中的 paths
配置,来将生成的组件放置在正确的位置。
路径别名必须在你的 tsconfig.json
或 jsconfig.json
文件中设置。
**重要:** 如果你正在使用 src
目录,请确保它包含在你的 tsconfig.json
或 jsconfig.json
文件中的 paths
下。
alias.cn
你的实用函数的导入别名。
{
"aliases": {
"cn": "@/lib/utils"
}
}
alias.component
你的组件的导入别名。
{
"alias": {
"component": "@/components"
}
}
alias.ui
ui
组件的导入别名。
CLI 将使用 aliases.ui
值来确定在哪里放置你的 ui
组件。 如果你想自定义你的 ui
组件的安装目录,请使用此配置。
{
"alias": {
"ui": "@/ui"
}
}