主页 / coding / 问题 / 79440161
Accepted
HoRiz
Asked: 2025-02-15 01:39:48 +0800 CST

将 Tailwind CSS 添加到现有 React - vite 项目时出错

  • 772

我正在开发一个基于 Vite 的 React 项目。我想添加 Tailwind CSS，但按照以下步骤操作后，出现了错误。

1. npm install -D tailwindcss postcss autoprefixer

初始化 Tailwind CSS

2. npx tailwindcss init -p

第一个命令执行没有错误。但是，第二个命令导致以下错误：

npm error could not determine executable to run
npm error A complete log of this run can be found in: C:\Users\HelloWorld\AppData\Local\npm-cache\_logs\2025-02-14T17_30_29_652Z-debug-0.log

我尝试过 clear npm，

Clear npm Cache

它仍然不起作用。运行第二个时出现同样的错误。

reactjs

1 个回答

  1. Best Answer

    TailwindCSS v3

    TailwindCSS v3 和 v4 的安装有所不同。您原本期望安装 v3，但 v4 是最新版本。对于 v3 安装，请使用：

    npm install -D tailwindcss@3

    TailwindCSS v4

    但是，如果您想安装 v4，我建议您查看安装指南，因为 v3 和 v4 之间存在重大变化。

    npm install tailwindcss @tailwindcss/vite

    从 v4 开始，不再需要 init 进程，因为它已被完全删除。该npx tailwindcss命令也不再需要，因为它已被分离到专用@tailwindcss/cli包中。

    对于 Vite，@tailwindcss/vite我们创建了一个专用插件，同时通过插件确保与 PostCSS 的兼容性@tailwindcss/postcss。

    不再需要 Autoprefixer 或 PostCSS。V4 基于全新引擎 LightningCSS 构建，因此不再支持 Sass、Less 或 Stylus 预处理器。

    v4 是为长期设计的，这就是为什么最低浏览器要求已大幅提高的原因。这主要是因为使用了几年来一直可用的出色 CSS 功能，例如oklch()、、等。请在此处查看最低要求：color-mix()TailwindCSS v4 浏览器支持@property

    从 v4 开始，默认应用 CSS-first 配置。不过，可以使用@config指令恢复到基于 JavaScript 的旧配置。因此，tailwind.config.js默认情况下不再需要文件。

    • 1

相关问题