tailwindcss 4 使用的一些注意点

目录

一、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.