@modern-js/module-tools-docs 2.32.1 → 2.33.0

package/docs/en/guide/advance/theme-config.mdx

@@ -1,60 +0,0 @@
-# Theme Configuration
-
-Module Tools provides the ability to configure the Tailwind CSS theme through the `designSystem` option.
-
-## Motivation and Principles
-
-Theme configuration is similar to custom theme functionality in component libraries and is primarily used for styling. When using `designSystem`, it serves as the `theme` configuration for Tailwind CSS. Therefore, you can use:
-
-- CSS class names supported by Tailwind CSS.
-- Strings with the same name as the CSS class names supported by Tailwind CSS, using the `@apply` custom directive in CSS/Less/Sass.
-
-For the default value of `designSystem`, refer to the [`designSystem` API](/api/config/design-system).
-
-## Usage Example
-
-When using Tailwind CSS, you can use `designSystem` to configure its [`theme`](https://tailwindcss.com/docs/theme).
-
-For example, the following configuration extends the existing color configuration:
-
-```ts title="modern.config.ts"
-export default {
-  designSystem: {
-    extend: {
-      colors: {
-        primary: '#1677ff',
-      },
-    },
-  },
-};
-```
-
-In the code, there are two ways to use Tailwind CSS.
-
-#### CSS Class Names
-
-```tsx title="./src/index.tsx"
-import 'tailwindcss/utilities.css';
-
-export default () => {
-  return <div className="bg-primary"></div>;
-};
-```
-
-#### `@apply` Directive
-
-Regarding [`@apply`](https://tailwindcss.com/docs/functions-and-directives#apply).
-
-```tsx title="./src/index.tsx"
-import './index.css';
-
-export default () => {
-  return <div className="btn-primary"></div>;
-};
-```
-
-```css title="./src/index.css"
-.btn-primary {
-  @apply bg-primary;
-}
-```