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 and tools.sass.

You can also use Stylus in Modern.js by installing the Stylus plugin provided by Modern.js Builder. For usage, please refer to Stylus Plugin.

Using PostCSS#

Modern.js has built-in PostCSS to transform CSS code.

Please refer to Modern.js Builder - Using PostCSS for detailed usage.

Using CSS Modules#

Please read the Using CSS Modules section to learn about the complete usage of CSS Modules.

Using CSS-in-JS#

CSS-in-JS is a technique that allows you to write CSS styles in JS files.

Modern.js integrates the popular CSS-in-JS implementation library styled-components, which uses the new JavaScript feature Tagged template to write component CSS styles. You can directly import the API of styled-components from @modern-js/runtime/styled for use.

When you need to write a div component with an internal font color of red, you can implement it as follows:

import styled from '@modern-js/runtime/styled';

const RedDiv = styled.div`
  color: red;
`;

If you need to dynamically set component styles based on the component's props, for example, the primary property of props is true, the button color is white, otherwise it is red, you can implement the code as follows:

import styled from '@modern-js/runtime/styled';

const Button = styled.button`
  color: ${props => (props.primary ? 'white' : 'red')};
  font-size: 1em;
`;

For more usage of styled-components, please refer to styled-components official website.

Modern.js integrates Babel's babel-plugin-styled-components plugin internally, and you can configure the plugin through tools.styledComponents.

Using Tailwind CSS#

Tailwind CSS is a CSS framework and design system based on Utility Class, which can quickly add common styles to components, and support flexible extension of theme styles.

To use Tailwind CSS in Modern.js, you can follow the steps below:

1. Run pnpm run new in the root directory of your project and make the following selections:

? Please select the operation you want: Enable features
? Please select the feature name: Enable Tailwind CSS

After successful initialization, you will see the following additions to the package.json file:

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

2. Register the Tailwind plugin in modern.config.ts:

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

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

3. Create a index.css file and add the following code:

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

4. Import the index.css file, for example, add the following code in the root component src/App.jsx:

import './index.css';

5. Now you can use the Utility Classes provided by Tailwind CSS in your components:

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

Configuring Tailwind CSS#

In Modern.js, you have two ways to configure Tailwind CSS:

1. Using the tailwind.config.{ts,js} file, which follows the official usage of Tailwind CSS. Please refer to "Tailwind CSS - Configuration" for more details.

import type { Config } from 'tailwindcss';

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

2. Using the tools.tailwindcss configuration option. This is the old way of configuring Tailwind CSS, and we recommend using the tailwind.config.{ts,js} file for configuration.

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

If you are using both the tailwind.config.{ts,js} file and tools.tailwindcss option, the configuration defined in tools.tailwindcss will take precedence and override the content defined in tailwind.config.{ts,js}.

Tailwind CSS Autocomplete#

Tailwind CSS provides an official extension called Tailwind CSS IntelliSense for autocompletion of Tailwind CSS class names, CSS functions, and directives in VS Code.

You can follow the steps below to enable the autocomplete feature:

1. Install the Tailwind CSS IntelliSense extension in VS Code.
2. If the root directory of your project does not have a tailwind.config.{ts,js} file, you need to create one and write the Tailwind CSS configuration for your current project. Otherwise, the IDE plugin will not work correctly.

Tailwind CSS Version#

Modern.js supports both Tailwind CSS v2 and v3 versions, and the framework will recognize the version of the tailwindcss dependency in the project package.json file and enable the corresponding configuration. By default, we will install Tailwind CSS v3 version for you.

If your project is still using Tailwind CSS v2, we recommend that you upgrade to v3 to support JIT and other capabilities. For the differences between Tailwind CSS v2 and v3 versions, please refer to the following articles:

• Tailwind CSS v3.0
• Upgrade Guide

Browser Compatibility#

Tailwind CSS v2 and v3 do not support the IE 11 browser, please refer to:

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

If you use Tailwind CSS on IE 11 browser, some styles may not be available, please use it with caution.