如何在ASP.NET Core的Blazor Web应用中安装TailwindCSS

一、从头开始的原生配置流程（比NuGet/Blazorise更可控） #

1. 初始化npm项目
   打开项目根目录的终端，执行：

   npm init -y
   

   这会生成package.json文件，用于管理前端依赖。

2. 安装Tailwind及必备工具
   运行以下命令安装开发依赖：

   npm install -D tailwindcss postcss autoprefixer
   

   接着初始化Tailwind和PostCSS配置文件：

   npx tailwindcss init -p
   

   执行后会得到tailwind.config.js和postcss.config.js两个配置文件。

3. 配置Tailwind扫描范围
   编辑tailwind.config.js，指定Tailwind需要扫描的Blazor文件路径，确保组件中的类名能被正确识别：

   /** @type {import('tailwindcss').Config} */
   module.exports = {
     content: [
       "./**/*.razor",
       "./**/*.razor.cs",
       "./**/*.cshtml"
     ],
     theme: {
       extend: {},
     },
     plugins: [],
   }
   

4. 创建Tailwind入口CSS
   在wwwroot/css目录下新建tailwind.css文件，写入基础指令：

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

5. 添加构建脚本
   编辑package.json，在scripts字段中添加Tailwind的构建和监听命令：

   "scripts": {
     "build:tailwind": "tailwindcss -i ./wwwroot/css/tailwind.css -o ./wwwroot/css/output.css --minify",
     "watch:tailwind": "tailwindcss -i ./wwwroot/css/tailwind.css -o ./wwwroot/css/output.css --watch"
   }
   

6. 在Blazor中引入生成的CSS

   • Blazor Server：修改Pages/_Layout.cshtml，替换原有CSS引用为：

     <link href="~/css/output.css" rel="stylesheet" />
     

   • Blazor WebAssembly：修改wwwroot/index.html，同样替换CSS引用为上述路径。

7. 开发与发布

   • 开发阶段：运行npm run watch:tailwind，Tailwind会自动监听文件变化，实时生成CSS。
   • 发布前：运行npm run build:tailwind，生成压缩后的生产版本CSS。

二、解决你遇到的常见问题 #

• Blazorise冲突：先彻底移除Blazorise的NuGet包和相关CSS引用，再按上述步骤重新配置，避免两套样式体系互相干扰。
• NuGet包使用困惑：多数Tailwind相关NuGet包本质是封装了CLI流程，不如原生配置直观可控，建议优先用上面的原生步骤。
• CLI初始化失败：检查Node.js版本是否在16.10以上（运行node -v查看），版本过低会导致初始化失败；同时确保在项目根目录执行命令，路径不要错误。

内容的提问来源于stack exchange，提问作者Ahsanul Hasan Turzo