目录
一、tailwindcss 4 官网地址变更了
二、自定义颜色的使用方式
三、安装的时候可能的报错
一、tailwindcss 4 官网地址变更了
之前的官网地址是:Tailwind CSS 中文网
现在的官网地址是:Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
也就是说 版本 4 的地址为com,一定不要搞错了。
要不然很多无用功,比如我 ……
二、自定义颜色的使用方式
提示:4 版本的颜色为--color-*,并且需要在主题命名空间里写。3 版本的写法不可以!
例如:
@theme inline {
--color-primary-500: var(--color-primary-500);
}
使用方式:<span className="truncate text-promary-500">{user.email}</span>
三、安装的时候可能的报错
1.npx tailwindcss init -p 执行不了怎么回事?
版本问题,如果是安装3 版本的,需要安装 3 个东西,有postcss等,但是按照官网说的方法去执行上面的命令,总是失败,有可能是版本冲突,都更新到最新版或许可以解决。
查看版本:
npm list tailwindcss
npm list tailwindcss
或许如下是比较合适的:
2.是否要安装的@tailwindcss/postcss的问题
我因为项目内引入了shadcn,需要版本 4 的,安装后总是会提示postcss等等的问题,其实终归是版本冲突,所以要找最新的官网版本,一步一步按照流程进行,多试几次就好。比如这种报错:
[postcss] It looks like you're trying to use `tailwindcss` directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install `@tailwindcss/postcss` and update your PostCSS configuration.