Tailwind 武林奇谈：bg-blue-400 失效，如何重拾蓝衣神功？

前言

江湖有云，Tailwind CSS，乃前端武林中的轻功秘籍。习得此技，排版如行云流水，配色似御风随形，收放自如，随心所欲。

某日，小侠你奋笔敲码，正欲施展“蓝衣神功”（bg-blue-400），让按钮怒气冲冠、蓝光满面，怎料一招使出，画面竟一片白茫茫大地真干净，毫无半点杀气。

这是走火入魔？亦或未得真传？莫急莫慌，掏出本文，如获秘籍，助你打通任督，修成正果，重现“蓝衣一怒天下知”的传说。

简介

Tailwind 乃按需生成之道，专治冗余与臃肿。它只编译项目中真正用上的类名，靠的是 tailwind.config.ts 中的 content 配置，逐一扫描文件，提取招式。

若你新建一个文件或目录，比如 src/**/test.tsx，而 content 中未列入此地，Tailwind 便自当视若无睹，仿佛此处从未有过江湖踪迹。如此一来，bg-blue-400 就沦为假动作，耍得再猛也毫无波澜。

操作步骤

此处秘籍，请认真研读，方能打通“类名不生效”的任督二脉。

步骤一：定位问题

打开你的 tailwind.config.ts，你可能看到这样的配置：

一片空白，形如无根浮萍，风吹即散。

步骤二：修复配置

将其更改为以下内容，加入你项目中实际使用的目录，比如 **：

步骤三：重启开发服务

配置修改后，记得保存并重启你的前端开发服务