---
sidebar_position: 1
---

# Styling

Modern.js has built-in a variety of commonly used CSS solutions, including Less / Sass / Stylus preprocessors, PostCSS, CSS Modules, CSS-in-JS, and Tailwind CSS.

## Using Less, Sass and Stylus

Modern.js has built-in popular community CSS preprocessors, including Less and Sass.

By default, you don't need to configure Less and Sass. If you have custom loader configuration requirements, you can set them up by configuring [tools.less](/configure/app/tools/less) and [tools.sass](/configure/app/tools/sass).

You can also use Stylus in Modern.js by installing the Stylus plugin provided by Rsbuild. For usage, please refer to [Stylus Plugin](https://rsbuild.dev/plugins/list/plugin-stylus).

## Using PostCSS

Modern.js has built-in [PostCSS](https://postcss.org/) to transform CSS code.

Please refer to [Rsbuild - Using PostCSS](https://rsbuild.dev/guide/basic/css-usage#using-postcss) for detailed usage.

## Using Lightning CSS

Modern.js supports using [Lightning CSS](https://lightningcss.dev/) to convert CSS code. This feature can be turned on by configuring [tools.lightningcssLoader](/configure/app/tools/lightningcss-loader).

Please refer to [Rsbuild - Using Lightning CSS](https://rsbuild.dev/guide/basic/css-usage#lightning-css) for detailed usage.

## Using Uno CSS

Please read the [Rsbuild - Using UnoCSS](https://rsbuild.dev/zh/guide/basic/unocss) for detailed usage.
