Modern.js has built-in multiple CSS solutions, including Less / Sass / Stylus preprocessor, PostCSS, CSS Modules, CSS-in-JS and Tailwind CSS.
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.
Modern.js has built-in PostCSS to transform the CSS code.
Please refer to Modern.js Builder - Using PostCSS for detailed usage.
Please read the Using CSS Modules chapter for a complete usage of CSS Modules.
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.
TIP
If you need to use styled-jsx, Emotionand other CSS-in-JS libraries, you need to install the dependency of the corresponding library first. For specific usage, please refer to the official website of the corresponding library.
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>
);
Additional
According to different needs, you can optionally import the CSS files provided by Tailwind CSS. Since the use of @taiwind
is equivalent to directly importing CSS files, you can refer to the content in the annotate in the @tailwind
usage document for the purpose of the CSS files provided by Tailwind CSS.
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:
Both Tailwind CSS v2 and v3 do not support IE 11 browsers. For background, please refer to:
If you use Tailwind CSS on IE 11 browser, some styles may not be available, please pay attention.
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.