#CSS Solutions

Modern.js has built-in multiple CSS solutions, including Less / Sass / Stylus preprocessor, PostCSS, CSS Modules, CSS-in-JS and Tailwind CSS.

#Using Less, Sass and Stylus

Modern.js has built-in community popular CSS preprocessors such as Less, Sass.

By default, you don't need to configure anything for Less and Sass. If you need to customize loader config, you can configure tools.less, tools.sass to set it up.

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

#Using PostCSS

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

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

#Using CSS Modules

Please read the Using CSS Modules chapter for a complete usage of CSS Modules.

#Using CSS-in-JS

CSS-in-JS is a technology that can write CSS styles in JS files.

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

When you need to write a div component with an internal font in red, you can do the following implementation:

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

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

When you need to dynamically set the component style according to the props of the component, for example, when the attribute primary of props is true, the color of the button is white, and otherwise it is red. The implementation code is 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 uses the Babel plugin babel-plugin-styled-components internally, and the plugin can be configured 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 the Modern.js, just execute pnpm run new in the project root directory and turn it on.

Choose as follows:

? Action: Enable features
? Enable features: Enable Tailwind CSS

When using, add the following code to the root component of the entry (such as src/App.jsx):

import 'tailwindcss/base.css';
import 'tailwindcss/components.css';
import 'tailwindcss/utilities.css';

You can then use the Utility Class provided by Tailwind CSS in each component:

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

#Tailwind CSS version

Modern.js supports both Tailwind CSS v2 and v3. The framework will recognize the version of tailwindcss in the project package.json and apply the corresponding configuration. By default, we install Tailwind CSS v3 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

Both Tailwind CSS v2 and v3 do not support IE 11 browsers. For background, 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 pay attention.

#Theme config

When you need to customize the theme configuration of Tailwind CSS, you can modify it in the configuration source.designSystem, for example, add a color theme primary:

export default defineConfig({
  source: {
    designSystem: {
      extend: {
        colors: {
          primary: '#5c6ac4',
        },
      },
    },
  },
});

When you need special configuration for Tailwind CSS other than theme, you can configure it in tools.tailwindcss, for example setting variants:

export default defineConfig({
  tools: {
    tailwindcss: {
      variants: {
        extend: {
          backgroundColor: ['active'],
        },
      },
    },
  },
});

When configuring Tailwind CSS for a project, the combination of the two configurations source.designSystem and tools.tailwindcss is equivalent to a separate configuration tailwindcss.config.js file. Where source.designSystem is equivalent to the theme configuration of Tailwind CSS.