tailwindcss 4 利用的一些留意点

目录
一、tailwindcss 4 官网所在变更了
二、自界说颜色的利用方式
三、安装的时候可能的报错

---

一、tailwindcss 4 官网所在变更了

之前的官网所在是：Tailwind CSS 中文网
现在的官网所在是：Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
也就是说 版本 4 的所在为com，一定不要搞错了。
要否则很多无用功，比如我 ……

---

二、自界说颜色的利用方式

   提示：4 版本的颜色为--color-*，而且需要在主题定名空间里写。3 版本的写法不可以！
  

例如：

1. @theme inline {
2.   
3.   --color-primary-500: var(--color-primary-500);
4. }
6. 使用方式：<span className="truncate text-promary-500">{user.email}</span>

复制代码

---

三、安装的时候可能的报错

1.npx tailwindcss init -p 执行不了怎么回事？

版本问题，如果是安装3 版本的，需要安装 3 个东西，有postcss等，但是按照官网说的方法去执行上面的命令，总是失败，有可能是版本冲突，都更新到最新版或允许以解决。
查看版本：
   npm list tailwindcss

1. 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.

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。