Modern.js 内置多种常用的 CSS 开发方案,包括 Less / Sass / Stylus 预处理器、PostCSS、CSS Modules、CSS-in-JS 和 Tailwind CSS。
Modern.js 内置了社区流行的 CSS 预处理器,包括 Less 和 Sass。
默认情况下,你不需要对 Less 和 Sass 进行任何配置。如果你有自定义 loader 配置的需求,可以通过配置 tools.less、tools.sass 来进行设置。
你也可以在 Modern.js 中使用 Stylus,只需要安装 Modern.js Builder 提供的 Stylus 插件即可,使用方式请参考 Stylus 插件。
Modern.js 内置了 PostCSS 来转换 CSS 代码。
请阅读 Modern.js Builder - 使用 PostCSS 了解更多用法。
请阅读 使用 CSS Modules 章节来了解 CSS Modules 的完整用法。
CSS-in-JS 是一种可以将 CSS 样式写在 JS 文件里的技术。
Modern.js 集成了社区常用的 CSS-in-JS 实现库 styled-components,它使用 JavaScript 的新特性 Tagged template 编写组件的 CSS 样式。可以直接从 @modern-js/runtime/styled
引入 styled-components 的 API 进行使用。
当需要编写一个内部字体为红色的 div
组件时,可以如下实现:
import styled from '@modern-js/runtime/styled';
const RedDiv = styled.div`
color: red;
`;
当需要根据组件的 props
动态设置组件样式时,例如 props
的属性 primary
为 true
时,按钮的颜色为白色,其他情况为红色,实现代码如下:
import styled from '@modern-js/runtime/styled';
const Button = styled.button`
color: ${props => (props.primary ? 'white' : 'red')};
font-size: 1em;
`;
关于 styled-components 的更多用法,请参考 styled-components 官网。
Modern.js 内部集成了 Babel 的 babel-plugin-styled-components 插件,你可以通过 tools.styledComponents 对插件进行配置。
如果需要使用 styled-jsx、Emotion 等其他 CSS-in-JS 库,需要先安装对应库的依赖。具体使用方式请参考对应库的官网。
Tailwind CSS 是一个以 Utility Class 为基础的 CSS 框架和设计系统,可以快速地为组件添加常用样式,同时支持主题样式的灵活扩展。
在 Modern.js 中使用 Tailwind CSS,你只需要按照以下步骤操作:
pnpm run new
,按照如下进行选择:? 请选择你想要的操作 启用可选功能
? 请选择功能名称 启用 「Tailwind CSS」 支持
成功开启后,会看到 package.json
中新增了依赖:
{
"dependencies": {
"tailwindcss": "^3.0.0"
},
"devDependencies": {
"@modern-js/plugin-tailwindcss": "^2.0.0"
}
}
modern.config.ts
中注册 Tailwind 插件:import { tailwindcssPlugin } from '@modern-js/plugin-tailwindcss';
export default defineConfig({
plugins: [..., tailwindcssPlugin()],
});
index.css
文件,添加以下代码:@tailwind base;
@tailwind components;
@tailwind utilities;
根据需求不同,你可以选择性地导入 Tailwind CSS 提供的 CSS 样式。请参考 @tailwind
文档 来了解 @tailwind
指令的详细用法。
index.css
文件,比如在入口的根组件 src/App.jsx
添加如下代码:import './index.css';
const Hello = () => (
<div className="h-12 w-48">
<p className="text-xl font-medium text-black">hello world</p>
</div>
);
在 Modern.js 中,你有两种方式来配置 Tailwind CSS:
tailwind.config.{ts,js}
文件,该用法与 Tailwind CSS 的官方用法一致,请参考 "Tailwind CSS - Configuration" 来了解更多用法。import type { Config } from 'tailwindcss';
export default {
content: ['./src/**/*.{js,jsx,ts,tsx}'],
} as Config;
请升级 Modern.js 到 >= 2.33.0 版本,以支持自动读取 tailwind.config.{ts,js}
文件。
tailwind.config.{ts,js}
文件进行配置。export default {
tools: {
tailwindcss: {
content: ['./src/**/*.{js,jsx,ts,tsx}'],
},
},
};
如果你同时使用了 tailwind.config.{ts,js}
文件和 tools.tailwindcss
选项,那么 tools.tailwindcss
定义的配置会优先生效,并覆盖 tailwind.config.{ts,js}
中定义的内容。
Tailwind CSS 官方提供了 Tailwind CSS IntelliSense 插件,用于在 VS Code 中自动补全 Tailwind CSS 的 class names、CSS functions 和 directives。
你可以参考以下步骤来启动自动补全功能:
tailwind.config.{ts,js}
文件,那么你需要创建该文件,并写入当前项目的 Tailwind CSS 配置,否则 IDE 插件将无法正确生效。Modern.js 同时支持 Tailwind CSS v2 和 v3 版本,框架会识别项目 package.json
中的 tailwindcss
依赖版本,并启用相应的配置。默认情况下,我们会为你安装 Tailwind CSS v3 版本。
如果你的项目仍在使用 Tailwind CSS v2,我们推荐你升级到 v3 以支持 JIT 等能力。关于 Tailwind CSS v2 与 v3 版本之间的差异,请参考以下文章:
Tailwind CSS v2 和 v3 均不支持 IE 11 浏览器,相关背景请参考:
如果你在 IE 11 浏览器上使用 Tailwind CSS,可能会出现部分样式不可用的现象,请谨慎使用。