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.
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.
Modern.js has built-in PostCSS to transform CSS code.
Please refer to Modern.js Builder - Using PostCSS for detailed usage.
Please read the Using CSS Modules section to learn about the complete usage of CSS Modules.
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.
If you need to use other CSS-in-JS libraries such as styled-jsx and Emotion, you need to install the corresponding dependencies first. For specific usage, please refer to the library's official website.
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:
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"
}
}
modern.config.ts
:import { tailwindcssPlugin } from '@modern-js/plugin-tailwindcss';
export default defineConfig({
plugins: [..., tailwindcssPlugin()],
});
index.css
file and add the following code:@tailwind base;
@tailwind components;
@tailwind utilities;
Depending on your needs, you can selectively import the CSS styles provided by Tailwind CSS. Please refer to the @tailwind
documentation for detailed usage of the @tailwind
directive.
index.css
file, for example, add the following code in the root component src/App.jsx
:import './index.css';
const Hello = () => (
<div className="h-12 w-48">
<p className="text-xl font-medium text-black">hello world</p>
</div>
);
In Modern.js, you have two ways to configure Tailwind CSS:
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;
Please upgrade Modern.js to version >= 2.33.0 to support automatic reading of tailwind.config.{ts,js}
files.
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 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:
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.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 v2 and v3 do not support the IE 11 browser, please refer to:
If you use Tailwind CSS on IE 11 browser, some styles may not be available, please use it with caution.