使用 Tailwind CSS
Tailwind CSS 是一个以 Utility Class 为基础的 CSS 框架和设计系统,可以快速地为组件添加常用样式,同时支持主题样式的灵活扩展。
在 Modern.js 中使用 Tailwind CSS
在 Modern.js 中使用 Tailwind CSS,你只需要按照 Rsbuild 操作步骤进行配置,Rsbuild 支持 Tailwind CSS v3 和 v4 版本:
Tailwind CSS 自动补全
Tailwind CSS 官方提供了 Tailwind CSS IntelliSense 插件,用于在 VS Code 中自动补全 Tailwind CSS 的 class names、CSS functions 和 directives。
你可以参考以下步骤来启动自动补全功能:
- 在 VS Code 中安装 Tailwind CSS IntelliSense 插件。
- 如果项目的根目录没有
tailwind.config.{ts,js}文件,那么你需要创建该文件,并写入当前项目的 Tailwind CSS 配置,否则 IDE 插件将无法正确生效。
浏览器兼容性
Tailwind CSS v3 不支持 IE 11 浏览器,相关背景请参考:
如果你在 IE 11 浏览器上使用 Tailwind CSS,可能会出现部分样式不可用的现象,请谨慎使用。