windicss教程（Hello TailwindCSS/WindiCSS）
本文目录
Hello TailwindCSS/WindiCSS
随着项目越来越大，你是不是觉得项目的 CSS 越来越难维护，常用的属性就是那么几个，来来回回的写，搞得你也很烦，如果是那么赶紧尝试用 ACSS 方案来解决你的问题吧，如果否，那说明你经历的项目还不够多不够大，这时候你要继续努力搬砖。
如果你不了解什么是 ACSS 的话，可以参考下我之前的教程: CSS 架构之 ACSS 。如果你想了解项目组织样式的演进历史，强烈建议你研读 TailwindCSS 作者 2017 年写的把 CSS 分为五个阶段的一篇文章：
读完你会彻底理解「为什么传统的 “语义化类名” 是 CSS 难以维护的原因」，详述了 CSS 的五个阶段，写的很棒，多看几遍。
回到 ACSS，ACSS 中目前最流行的框架就是我们文章的主角 TailwindCSS 。
但是，如果在项目中使用建议你使用 Windi CSS 。
它们是一种继承关系，如何 TailwindCSS 是父类，那么 Windi CSS 就是子类。
当然你也可以认为 TailwindCSS 是 ES5， Windi CSS 是 JavaScript ， Windi CSS 在 TailwindCSS 的基础上进行了扩展，还包括 ES6+ 的部分，这个我们留在 TailwindCSS 章节讲。
不过，你可以放心学习 TailwindCSS，它的语法在 Windi CSS，完全是可用的。
Windi CSS 如何安装结合其他框架使用，在 安装 章节非常清楚。
而且我们也没必要纠结 WIndiCSS 的大家过程，这些框架都会帮我们处理的，这里我们简单的搭建一个项目，方便接下里的演示：
在 package.json 文件中的 script 字段，我们新增如下字段：
接下来可以运行命令：
项目根目录将会新增三个文件：
查看 index.html 的文件内容大致如下：
HTML 层面全部都是 ACSS 的写法，同时注意文件开头应用的样式：
我们对其重新命名： windi.css =》 windi-acss.css 。
现在我们运行命令：
这个命令会根据 HTML 的类名生成对应的 CSS，这是项目的目录结构为：
多了个文件 windi-acss.css 其内容为：
现在可以在浏览器打开 index.html 文件了，看到效果是下面这样：
为了更好的演示和提升开发体验，我们需要对项目进行一些调整。
首先，就是增加热更新：
windicss:watch 命令添加了 -d 参数，开启开发环境下的热更新功能。
目录调整为如下结构：
index.html 的内容替换为：
npm run windicss:watch 之后，打开浏览器看到：
tailwindcss 从0到1
Tailwind CSS 是一个功能类优先的 CSS 框架，它集成了诸如 flex , pt-4 , text-center 和 rotate-90 这样的的类，它们能直接在脚本标记语言中组合起来，构建出任何设计
个人总结 tailwind css 功能主要包括三部分：
tailwind css 提供了一套以移动优先的，响应式样式类, 类似原bootstrap 可直接使用
tailwind css 为处理响应式，伪类， 伪元素提供类型作用范围限定类
样式扩展，使我们能组合现有基础类或定义自己的样式类.
通过 taildwind.config.js 配置文件，能实现更多自定义功能
配置主要分为：
tailwind css 提供的预设类很多，一般根据官方文档，按照功能查询所需的类名。
总结几条规则：
个人觉得 tailwind css 的主要优势在于提供了一套自定义样式模板的工具，并有一个完整的可扩展的基础示例 预设样式 。
非常适合有UI设计体系或要求统一UI视觉的产品, 通过组合基础样式模板，统一样式规范，提高编写效率。
如果UI本身就没有统一规范的化，还是内联样式文件来的灵活些。
这一套有点像组件库为了可配置主题而抽离出来的组件样式变量。
官方文档
PHPwind建站系统怎样修改css样式改哪个文件
找到template文件夹，然后打开后台启用的模板目录，修改对应css文件即可，记得后台清除缓存。
更多文章：
2026年10月11日 05:30
跷二郎腿太低好吗？想要通过贴墙站改正二郎腿影响的话，有哪些要点需要注意
2026年10月11日 05:10
易语言点击js按钮（易语言网页填表怎样点击链接为“javascript:void（0）“的按钮）
2026年10月11日 03:00
2026年10月11日 01:10
2026年10月11日 01:00
compare with造句（用compared with和compared to造句）
2026年10月10日 23:30
2026年10月10日 22:50
tensorflow与keras对应版本（为什么tensorflow2.8没有keras）
2026年10月10日 22:10
2026年10月10日 22:00
maven仓库jar网站（如何在maven仓库中添加jar包）
2026年10月10日 19:50
