样式开发#

Modern.js 内置多种常用的 CSS 开发方案，包括 Less / Sass / Stylus 预处理器、PostCSS、CSS Modules、CSS-in-JS 和 Tailwind CSS。

使用 Less、Sass 和 Stylus#

Modern.js 内置了社区流行的 CSS 预处理器，包括 Less 和 Sass。

默认情况下，你不需要对 Less 和 Sass 进行任何配置。如果你有自定义 loader 配置的需求，可以通过配置 tools.less、tools.sass 来进行设置。

你也可以在 Modern.js 中使用 Stylus，只需要安装 Modern.js Builder 提供的 Stylus 插件即可，使用方式请参考 Stylus 插件。

使用 PostCSS#

Modern.js 内置了 PostCSS 来转换 CSS 代码。

请阅读 Modern.js Builder - 使用 PostCSS 了解更多用法。

使用 CSS Modules#

请阅读 使用 CSS Modules 章节来了解 CSS Modules 的完整用法。

使用 CSS-in-JS#

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 对插件进行配置。

使用 Tailwind CSS#

Tailwind CSS 是一个以 Utility Class 为基础的 CSS 框架和设计系统，可以快速地为组件添加常用样式，同时支持主题样式的灵活扩展。

在 Modern.js 中使用 Tailwind CSS，你只需要按照以下步骤操作：

1. 在项目根目录下执行 pnpm run new，按照如下进行选择：

? 请选择你想要的操作 启用可选功能
? 请选择功能名称 启用 「Tailwind CSS」 支持

成功开启后，会看到 package.json 中新增了依赖：

{
  "dependencies": {
    "tailwindcss": "^3.0.0"
  },
  "devDependencies": {
    "@modern-js/plugin-tailwindcss": "^2.0.0"
  }
}

2. 在 modern.config.ts 中注册 Tailwind 插件:

import { tailwindcssPlugin } from '@modern-js/plugin-tailwindcss';

export default defineConfig({
  plugins: [..., tailwindcssPlugin()],
});

3. 创建 index.css 文件，添加以下代码：

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

4. 引用 index.css 文件，比如在入口的根组件 src/App.jsx 添加如下代码：

import './index.css';

5. 然后即可在各个组件中使用 Tailwind CSS 提供的 Utility Class 了：

const Hello = () => (
  <div className="h-12 w-48">
    <p className="text-xl font-medium text-black">hello world</p>
  </div>
);

配置 Tailwind CSS#

在 Modern.js 中，你有两种方式来配置 Tailwind CSS：

1. 使用 tailwind.config.{ts,js} 文件，该用法与 Tailwind CSS 的官方用法一致，请参考 "Tailwind CSS - Configuration" 来了解更多用法。

import type { Config } from 'tailwindcss';

export default {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
} as Config;

2. 使用 tools.tailwindcss 配置项，这是旧版本的用法，我们更推荐使用 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 官方提供了 Tailwind CSS IntelliSense 插件，用于在 VS Code 中自动补全 Tailwind CSS 的 class names、CSS functions 和 directives。

你可以参考以下步骤来启动自动补全功能：

1. 在 VS Code 中安装 Tailwind CSS IntelliSense 插件。
2. 如果项目的根目录没有 tailwind.config.{ts,js} 文件，那么你需要创建该文件，并写入当前项目的 Tailwind CSS 配置，否则 IDE 插件将无法正确生效。

Tailwind CSS 版本#

Modern.js 同时支持 Tailwind CSS v2 和 v3 版本，框架会识别项目 package.json 中的 tailwindcss 依赖版本，并启用相应的配置。默认情况下，我们会为你安装 Tailwind CSS v3 版本。

如果你的项目仍在使用 Tailwind CSS v2，我们推荐你升级到 v3 以支持 JIT 等能力。关于 Tailwind CSS v2 与 v3 版本之间的差异，请参考以下文章：

• Tailwind CSS v3.0
• Upgrade Guide

浏览器兼容性#

Tailwind CSS v2 和 v3 均不支持 IE 11 浏览器，相关背景请参考：

• Tailwind CSS v3 - Browser Support。
• Tailwind CSS v2 - Browser Support

如果你在 IE 11 浏览器上使用 Tailwind CSS，可能会出现部分样式不可用的现象，请谨慎使用。