Tailwind4 中 taildwind.config.js 废除后的全局变量修改方法（npx tailwindcss init失效，npm ERR! could not determine ex）

aPurpleBerry

已于 2025-02-16 15:45:35 修改

阅读量1.6k

点赞数 41

分类专栏： CSS 文章标签：前端 css 开发语言

于 2025-02-16 15:44:01 首次发布

本文链接：https://blog.csdn.net/yavlgloss/article/details/145663229

版权

CSS 专栏收录该内容

3 篇文章

订阅专栏

文章目录

npx tailwindcss init报错 npm ERR! could not determine executable to run
Tailwind4不再支持 taildwind.config.js
- 现在直接在css中@theme修改即可达到与 taildwind.config.js 相同的效果
版本3的下载方法

npx tailwindcss init报错 npm ERR! could not determine executable to run

我在配置好Tailwind4之后（具体配置见我的另一篇文章《在Vue3 + Vite 项目中使用 Tailwind CSS 4.0》），发现对比之前的版本少了taildwind.config.js文件。于是，我想通过 npx tailwindcss init新建这个文件。但是出现了报错。

报错详情：

npm ERR! could not determine executable to run

npm ERR! A complete log of this run can be found in: C:\Users\Administrator\AppData\Local\npm-cache\_logs\2025-02-16T04_11_16_774Z-debug-0.log

在这里插入图片描述

Tailwind4不再支持 taildwind.config.js

出现上文的问题在于 Tailwind4不再支持 taildwind.config.js

参考文章：https://github.com/tailwindlabs/tailwindcss/discussions/15820

找到官网中确实详细说明了：

官网地址 https://tailwindcss.com/blog/tailwindcss-v4#css-first-configuration

One of the biggest changes in Tailwind CSS v4.0 is the shift from configuring your project in JavaScript to configuring it in CSS.

Instead of a tailwind.config.js file, you can configure all of your customizations directly in the CSS file where you import Tailwind, giving you one less file to worry about in your project:

在这里插入图片描述

现在直接在css中@theme修改即可达到与 taildwind.config.js 相同的效果

还是在我之前文章中的 src\styles\index.css中添加下面所述代码：《在Vue3 + Vite 项目中使用 Tailwind CSS 4.0》）

@import "tailwindcss";

@theme {
  --color-mint-500: oklch(0.72 0.11 178);
  --text-xs: 0.35rem;
}

在这里插入图片描述

在浏览器中就可以看到 --text-xs这个值被修改成了我定义的 0.35rem而不是默认值

在这里插入图片描述

版本3的下载方法

$ npm install -D tailwindcss@3 postcss autoprefixer
$ npx tailwindcss init -p

参考文章：https://github.com/tailwindlabs/tailwindcss/discussions/15820