如何在ASP.NET Core MVC项目中配置Tailwind CSS v4？

Tailwind CSS v4在CLI语法、配置文件生成逻辑上有较大调整，以下是适配ASP.NET Core MVC的标准集成流程，同时解决你遇到的三个核心问题：

一、核心适配步骤 #

1. 初始化Node.js项目 #

npm init -y

2. 安装Tailwind CSS v4 #

如果是正式版已发布，直接执行：

npm install -D tailwindcss

若为预览阶段，需指定版本：

npm install -D tailwindcss@next

3. 手动创建Tailwind配置文件 #

Tailwind v4不再默认生成配置文件，需手动在项目根目录创建tailwind.config.js，指定Razor页面扫描路径（和v3逻辑一致）：

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    './Pages/**/*.cshtml',
    './Views/**/*.cshtml',
    './Areas/**/*.cshtml' // 有区域模块时添加
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

4. 创建入口CSS文件 #

在wwwroot/css下创建input.css（名称可自定义），内容保留v3的指令：

@tailwind base;
@tailwind components;
@tailwind utilities;

5. 配置CSS编译脚本（两种可选方式） #

Tailwind v4移除了-i参数，改用以下两种方式处理输入输出：

方式一：CLI直接指定路径

在package.json中添加脚本：

"scripts": {
  "css:build": "npx tailwindcss wwwroot/css/input.css -o wwwroot/css/styles.css --minify",
  "css:watch": "npx tailwindcss wwwroot/css/input.css -o wwwroot/css/styles.css --watch"
}

语法说明：直接将输入CSS路径作为CLI第一个参数，-o指定输出路径

方式二：配置文件指定输入输出

修改tailwind.config.js，新增输入输出配置：

export default {
  content: [/* 已定义的路径 */],
  theme: { /* 主题配置 */ },
  plugins: [],
  input: "./wwwroot/css/input.css",
  output: "./wwwroot/css/styles.css"
}

然后简化脚本：

"scripts": {
  "css:build": "npx tailwindcss build --minify",
  "css:watch": "npx tailwindcss watch"
}

6. 配置ASP.NET Core自动构建CSS #

修改项目.csproj文件，确保编译项目时自动执行CSS构建：

<ItemGroup>
  <UpToDateCheckBuilt Include="wwwroot/css/input.css" Set="Css" />
  <UpToDateCheckBuilt Include="tailwind.config.js" Set="Css" />
</ItemGroup>

<Target Name="TailwindBuild" BeforeTargets="Build">
  <Exec Command="npm run css:build" />
</Target>

<!-- 可选：开发时启用自动监听，配合热重载 -->
<Target Name="TailwindWatch" BeforeTargets="WatchRun">
  <Exec Command="npm run css:watch" />
</Target>

7. 引入生成的CSS文件 #

在_Layout.cshtml中保持和v3一致的引入方式：

<link rel="stylesheet" href="~/css/styles.css" asp-append-version="true" />

二、针对你遇到问题的具体解答 #

1. 如何指定Razor页面内容路径？
   手动创建tailwind.config.js后，在content数组中添加对应的.cshtml路径即可，逻辑和v3完全一致。

2. -i参数不再支持，如何处理CSS编译？
   使用Tailwind v4的新CLI语法：要么直接将输入CSS路径作为第一个参数传入，要么在配置文件中通过input/output字段指定路径，两种方式均官方推荐。

3. .bin文件夹不存在导致构建失败？
   Tailwind v4不再将CLI放在.bin目录，直接通过npx tailwindcss调用即可。若之前安装过v3，需先执行npm uninstall tailwindcss彻底清除旧版本，再重新安装v4。

注意事项 #

• 确保Node.js版本≥18.17，Tailwind v4对Node版本有最低要求
• 开发时使用npm run css:watch可自动监听文件变化并重新编译，配合ASP.NET的热重载能提升开发效率
• 可安装Visual Studio的「Tailwind CSS IntelliSense」插件获得语法提示

内容的提问来源于stack exchange，提问作者Furqan