diff --git a/packages/document/main-doc/docs/en/configure/app/source/design-system.mdx b/packages/document/main-doc/docs/en/configure/app/source/design-system.mdx
deleted file mode 100644
index 4c135a7bcf23..000000000000
--- a/packages/document/main-doc/docs/en/configure/app/source/design-system.mdx
+++ /dev/null
@@ -1,1175 +0,0 @@
----
-sidebar_label: designSystem
----
-
-# source.designSystem
-
-- **Type:** `Object`
-- **Default:** See configuration details below.
-
-:::caution
-Tailwind CSS feature needs to be enabled first by running `pnpm run new`.
-
-:::
-
-
- DesignSystem Configuration Details
-
-```js
-const designSystem = {
- screens: {
- sm: '640px',
- md: '768px',
- lg: '1024px',
- xl: '1280px',
- },
- colors: {
- transparent: 'transparent',
- current: 'currentColor',
-
- black: '#000',
- white: '#fff',
-
- gray: {
- 100: '#f7fafc',
- 200: '#edf2f7',
- 300: '#e2e8f0',
- 400: '#cbd5e0',
- 500: '#a0aec0',
- 600: '#718096',
- 700: '#4a5568',
- 800: '#2d3748',
- 900: '#1a202c',
- },
- red: {
- 100: '#fff5f5',
- 200: '#fed7d7',
- 300: '#feb2b2',
- 400: '#fc8181',
- 500: '#f56565',
- 600: '#e53e3e',
- 700: '#c53030',
- 800: '#9b2c2c',
- 900: '#742a2a',
- },
- orange: {
- 100: '#fffaf0',
- 200: '#feebc8',
- 300: '#fbd38d',
- 400: '#f6ad55',
- 500: '#ed8936',
- 600: '#dd6b20',
- 700: '#c05621',
- 800: '#9c4221',
- 900: '#7b341e',
- },
- yellow: {
- 100: '#fffff0',
- 200: '#fefcbf',
- 300: '#faf089',
- 400: '#f6e05e',
- 500: '#ecc94b',
- 600: '#d69e2e',
- 700: '#b7791f',
- 800: '#975a16',
- 900: '#744210',
- },
- green: {
- 100: '#f0fff4',
- 200: '#c6f6d5',
- 300: '#9ae6b4',
- 400: '#68d391',
- 500: '#48bb78',
- 600: '#38a169',
- 700: '#2f855a',
- 800: '#276749',
- 900: '#22543d',
- },
- teal: {
- 100: '#e6fffa',
- 200: '#b2f5ea',
- 300: '#81e6d9',
- 400: '#4fd1c5',
- 500: '#38b2ac',
- 600: '#319795',
- 700: '#2c7a7b',
- 800: '#285e61',
- 900: '#234e52',
- },
- blue: {
- 100: '#ebf8ff',
- 200: '#bee3f8',
- 300: '#90cdf4',
- 400: '#63b3ed',
- 500: '#4299e1',
- 600: '#3182ce',
- 700: '#2b6cb0',
- 800: '#2c5282',
- 900: '#2a4365',
- },
- indigo: {
- 100: '#ebf4ff',
- 200: '#c3dafe',
- 300: '#a3bffa',
- 400: '#7f9cf5',
- 500: '#667eea',
- 600: '#5a67d8',
- 700: '#4c51bf',
- 800: '#434190',
- 900: '#3c366b',
- },
- purple: {
- 100: '#faf5ff',
- 200: '#e9d8fd',
- 300: '#d6bcfa',
- 400: '#b794f4',
- 500: '#9f7aea',
- 600: '#805ad5',
- 700: '#6b46c1',
- 800: '#553c9a',
- 900: '#44337a',
- },
- pink: {
- 100: '#fff5f7',
- 200: '#fed7e2',
- 300: '#fbb6ce',
- 400: '#f687b3',
- 500: '#ed64a6',
- 600: '#d53f8c',
- 700: '#b83280',
- 800: '#97266d',
- 900: '#702459',
- },
- },
- spacing: {
- px: '1px',
- 0: '0',
- 1: '0.25rem',
- 2: '0.5rem',
- 3: '0.75rem',
- 4: '1rem',
- 5: '1.25rem',
- 6: '1.5rem',
- 8: '2rem',
- 10: '2.5rem',
- 12: '3rem',
- 16: '4rem',
- 20: '5rem',
- 24: '6rem',
- 32: '8rem',
- 40: '10rem',
- 48: '12rem',
- 56: '14rem',
- 64: '16rem',
- },
- backgroundColor: theme => theme('colors'),
- backgroundOpacity: theme => theme('opacity'),
- backgroundPosition: {
- bottom: 'bottom',
- center: 'center',
- left: 'left',
- 'left-bottom': 'left bottom',
- 'left-top': 'left top',
- right: 'right',
- 'right-bottom': 'right bottom',
- 'right-top': 'right top',
- top: 'top',
- },
- backgroundSize: {
- auto: 'auto',
- cover: 'cover',
- contain: 'contain',
- },
- borderColor: theme => ({
- ...theme('colors'),
- default: theme('colors.gray.300', 'currentColor'),
- }),
- borderOpacity: theme => theme('opacity'),
- borderRadius: {
- none: '0',
- sm: '0.125rem',
- default: '0.25rem',
- md: '0.375rem',
- lg: '0.5rem',
- full: '9999px',
- },
- borderWidth: {
- default: '1px',
- 0: '0',
- 2: '2px',
- 4: '4px',
- 8: '8px',
- },
- boxShadow: {
- xs: '0 0 0 1px rgba(0, 0, 0, 0.05)',
- sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
- default: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
- md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
- lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
- xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
- '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
- inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
- outline: '0 0 0 3px rgba(66, 153, 225, 0.5)',
- none: 'none',
- },
- container: {},
- cursor: {
- auto: 'auto',
- default: 'default',
- pointer: 'pointer',
- wait: 'wait',
- text: 'text',
- move: 'move',
- 'not-allowed': 'not-allowed',
- },
- divideColor: theme => theme('borderColor'),
- divideOpacity: theme => theme('borderOpacity'),
- divideWidth: theme => theme('borderWidth'),
- fill: {
- current: 'currentColor',
- },
- flex: {
- 1: '1 1 0%',
- auto: '1 1 auto',
- initial: '0 1 auto',
- none: 'none',
- },
- flexGrow: {
- 0: '0',
- default: '1',
- },
- flexShrink: {
- 0: '0',
- default: '1',
- },
- fontFamily: {
- sans: [
- 'system-ui',
- '-apple-system',
- 'BlinkMacSystemFont',
- '"Segoe UI"',
- 'Roboto',
- '"Helvetica Neue"',
- 'Arial',
- '"Noto Sans"',
- 'sans-serif',
- '"Apple Color Emoji"',
- '"Segoe UI Emoji"',
- '"Segoe UI Symbol"',
- '"Noto Color Emoji"',
- ],
- serif: ['Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'],
- mono: [
- 'Menlo',
- 'Monaco',
- 'Consolas',
- '"Liberation Mono"',
- '"Courier New"',
- 'monospace',
- ],
- },
- fontSize: {
- xs: '0.75rem',
- sm: '0.875rem',
- base: '1rem',
- lg: '1.125rem',
- xl: '1.25rem',
- '2xl': '1.5rem',
- '3xl': '1.875rem',
- '4xl': '2.25rem',
- '5xl': '3rem',
- '6xl': '4rem',
- },
- fontWeight: {
- hairline: '100',
- thin: '200',
- light: '300',
- normal: '400',
- medium: '500',
- semibold: '600',
- bold: '700',
- extrabold: '800',
- black: '900',
- },
- height: theme => ({
- auto: 'auto',
- ...theme('spacing'),
- full: '100%',
- screen: '100vh',
- }),
- inset: {
- 0: '0',
- auto: 'auto',
- },
- letterSpacing: {
- tighter: '-0.05em',
- tight: '-0.025em',
- normal: '0',
- wide: '0.025em',
- wider: '0.05em',
- widest: '0.1em',
- },
- lineHeight: {
- none: '1',
- tight: '1.25',
- snug: '1.375',
- normal: '1.5',
- relaxed: '1.625',
- loose: '2',
- 3: '.75rem',
- 4: '1rem',
- 5: '1.25rem',
- 6: '1.5rem',
- 7: '1.75rem',
- 8: '2rem',
- 9: '2.25rem',
- 10: '2.5rem',
- },
- listStyleType: {
- none: 'none',
- disc: 'disc',
- decimal: 'decimal',
- },
- margin: (theme, { negative }) => ({
- auto: 'auto',
- ...theme('spacing'),
- ...negative(theme('spacing')),
- }),
- maxHeight: {
- full: '100%',
- screen: '100vh',
- },
- maxWidth: (theme, { breakpoints }) => ({
- none: 'none',
- xs: '20rem',
- sm: '24rem',
- md: '28rem',
- lg: '32rem',
- xl: '36rem',
- '2xl': '42rem',
- '3xl': '48rem',
- '4xl': '56rem',
- '5xl': '64rem',
- '6xl': '72rem',
- full: '100%',
- ...breakpoints(theme('screens')),
- }),
- minHeight: {
- 0: '0',
- full: '100%',
- screen: '100vh',
- },
- minWidth: {
- 0: '0',
- full: '100%',
- },
- objectPosition: {
- bottom: 'bottom',
- center: 'center',
- left: 'left',
- 'left-bottom': 'left bottom',
- 'left-top': 'left top',
- right: 'right',
- 'right-bottom': 'right bottom',
- 'right-top': 'right top',
- top: 'top',
- },
- opacity: {
- 0: '0',
- 25: '0.25',
- 50: '0.5',
- 75: '0.75',
- 100: '1',
- },
- order: {
- first: '-9999',
- last: '9999',
- none: '0',
- 1: '1',
- 2: '2',
- 3: '3',
- 4: '4',
- 5: '5',
- 6: '6',
- 7: '7',
- 8: '8',
- 9: '9',
- 10: '10',
- 11: '11',
- 12: '12',
- },
- padding: theme => theme('spacing'),
- placeholderColor: theme => theme('colors'),
- placeholderOpacity: theme => theme('opacity'),
- space: (theme, { negative }) => ({
- ...theme('spacing'),
- ...negative(theme('spacing')),
- }),
- stroke: {
- current: 'currentColor',
- },
- strokeWidth: {
- 0: '0',
- 1: '1',
- 2: '2',
- },
- textColor: theme => theme('colors'),
- textOpacity: theme => theme('opacity'),
- width: theme => ({
- auto: 'auto',
- ...theme('spacing'),
- '1/2': '50%',
- '1/3': '33.333333%',
- '2/3': '66.666667%',
- '1/4': '25%',
- '2/4': '50%',
- '3/4': '75%',
- '1/5': '20%',
- '2/5': '40%',
- '3/5': '60%',
- '4/5': '80%',
- '1/6': '16.666667%',
- '2/6': '33.333333%',
- '3/6': '50%',
- '4/6': '66.666667%',
- '5/6': '83.333333%',
- '1/12': '8.333333%',
- '2/12': '16.666667%',
- '3/12': '25%',
- '4/12': '33.333333%',
- '5/12': '41.666667%',
- '6/12': '50%',
- '7/12': '58.333333%',
- '8/12': '66.666667%',
- '9/12': '75%',
- '10/12': '83.333333%',
- '11/12': '91.666667%',
- full: '100%',
- screen: '100vw',
- }),
- zIndex: {
- auto: 'auto',
- 0: '0',
- 10: '10',
- 20: '20',
- 30: '30',
- 40: '40',
- 50: '50',
- },
- gap: theme => theme('spacing'),
- gridTemplateColumns: {
- none: 'none',
- 1: 'repeat(1, minmax(0, 1fr))',
- 2: 'repeat(2, minmax(0, 1fr))',
- 3: 'repeat(3, minmax(0, 1fr))',
- 4: 'repeat(4, minmax(0, 1fr))',
- 5: 'repeat(5, minmax(0, 1fr))',
- 6: 'repeat(6, minmax(0, 1fr))',
- 7: 'repeat(7, minmax(0, 1fr))',
- 8: 'repeat(8, minmax(0, 1fr))',
- 9: 'repeat(9, minmax(0, 1fr))',
- 10: 'repeat(10, minmax(0, 1fr))',
- 11: 'repeat(11, minmax(0, 1fr))',
- 12: 'repeat(12, minmax(0, 1fr))',
- },
- gridColumn: {
- auto: 'auto',
- 'span-1': 'span 1 / span 1',
- 'span-2': 'span 2 / span 2',
- 'span-3': 'span 3 / span 3',
- 'span-4': 'span 4 / span 4',
- 'span-5': 'span 5 / span 5',
- 'span-6': 'span 6 / span 6',
- 'span-7': 'span 7 / span 7',
- 'span-8': 'span 8 / span 8',
- 'span-9': 'span 9 / span 9',
- 'span-10': 'span 10 / span 10',
- 'span-11': 'span 11 / span 11',
- 'span-12': 'span 12 / span 12',
- },
- gridColumnStart: {
- auto: 'auto',
- 1: '1',
- 2: '2',
- 3: '3',
- 4: '4',
- 5: '5',
- 6: '6',
- 7: '7',
- 8: '8',
- 9: '9',
- 10: '10',
- 11: '11',
- 12: '12',
- 13: '13',
- },
- gridColumnEnd: {
- auto: 'auto',
- 1: '1',
- 2: '2',
- 3: '3',
- 4: '4',
- 5: '5',
- 6: '6',
- 7: '7',
- 8: '8',
- 9: '9',
- 10: '10',
- 11: '11',
- 12: '12',
- 13: '13',
- },
- gridTemplateRows: {
- none: 'none',
- 1: 'repeat(1, minmax(0, 1fr))',
- 2: 'repeat(2, minmax(0, 1fr))',
- 3: 'repeat(3, minmax(0, 1fr))',
- 4: 'repeat(4, minmax(0, 1fr))',
- 5: 'repeat(5, minmax(0, 1fr))',
- 6: 'repeat(6, minmax(0, 1fr))',
- },
- gridRow: {
- auto: 'auto',
- 'span-1': 'span 1 / span 1',
- 'span-2': 'span 2 / span 2',
- 'span-3': 'span 3 / span 3',
- 'span-4': 'span 4 / span 4',
- 'span-5': 'span 5 / span 5',
- 'span-6': 'span 6 / span 6',
- },
- gridRowStart: {
- auto: 'auto',
- 1: '1',
- 2: '2',
- 3: '3',
- 4: '4',
- 5: '5',
- 6: '6',
- 7: '7',
- },
- gridRowEnd: {
- auto: 'auto',
- 1: '1',
- 2: '2',
- 3: '3',
- 4: '4',
- 5: '5',
- 6: '6',
- 7: '7',
- },
- transformOrigin: {
- center: 'center',
- top: 'top',
- 'top-right': 'top right',
- right: 'right',
- 'bottom-right': 'bottom right',
- bottom: 'bottom',
- 'bottom-left': 'bottom left',
- left: 'left',
- 'top-left': 'top left',
- },
- scale: {
- 0: '0',
- 50: '.5',
- 75: '.75',
- 90: '.9',
- 95: '.95',
- 100: '1',
- 105: '1.05',
- 110: '1.1',
- 125: '1.25',
- 150: '1.5',
- },
- rotate: {
- '-180': '-180deg',
- '-90': '-90deg',
- '-45': '-45deg',
- 0: '0',
- 45: '45deg',
- 90: '90deg',
- 180: '180deg',
- },
- translate: (theme, { negative }) => ({
- ...theme('spacing'),
- ...negative(theme('spacing')),
- '-full': '-100%',
- '-1/2': '-50%',
- '1/2': '50%',
- full: '100%',
- }),
- skew: {
- '-12': '-12deg',
- '-6': '-6deg',
- '-3': '-3deg',
- 0: '0',
- 3: '3deg',
- 6: '6deg',
- 12: '12deg',
- },
- transitionProperty: {
- none: 'none',
- all: 'all',
- default:
- 'background-color, border-color, color, fill, stroke, opacity, box-shadow, transform',
- colors: 'background-color, border-color, color, fill, stroke',
- opacity: 'opacity',
- shadow: 'box-shadow',
- transform: 'transform',
- },
- transitionTimingFunction: {
- linear: 'linear',
- in: 'cubic-bezier(0.4, 0, 1, 1)',
- out: 'cubic-bezier(0, 0, 0.2, 1)',
- 'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
- },
- transitionDuration: {
- 75: '75ms',
- 100: '100ms',
- 150: '150ms',
- 200: '200ms',
- 300: '300ms',
- 500: '500ms',
- 700: '700ms',
- 1000: '1000ms',
- },
- transitionDelay: {
- 75: '75ms',
- 100: '100ms',
- 150: '150ms',
- 200: '200ms',
- 300: '300ms',
- 500: '500ms',
- 700: '700ms',
- 1000: '1000ms',
- },
-};
-```
-
-
-
-:::tip
-For more information on Tailwind CSS configuration, please refer to [here](https://tailwindcss.com/docs/configuration#theme).
-
-:::
-
-The `designSystem` is used to define the project's color palette, typographic scales, font list, breakpoints, border radius values, and more. As Modern.js uses the design approach of Tailwind Theme and also integrates Tailwind CSS internally, the usage of `designSystem` is the same as that of Tailwind CSS Theme.
-
-### Structure
-
-The `designSystem` object contains properties for `screens`, `colors`, `spacing`, and each customizable core plugin.
-
-#### Screens
-
-Use `screens` to customize the responsive breakpoints in your project:
-
-```js
-const designSystem = {
- screens: {
- sm: '640px',
- md: '768px',
- lg: '1024px',
- xl: '1280px',
- },
-};
-```
-
-The property names in the `screens` object are screen names (used as prefixes for the responsive utility variants generated by Tailwind CSS, such as `md:text-center`), and the values are the `min-width` at which the breakpoint should start.
-
-The default breakpoints are inspired by common device resolutions:
-
-```js
-const designSystem = {
- screens: {
- sm: '640px',
- // => @media (min-width: 640px) { ... }
-
- md: '768px',
- // => @media (min-width: 768px) { ... }
-
- lg: '1024px',
- // => @media (min-width: 1024px) { ... }
-
- xl: '1280px',
- // => @media (min-width: 1280px) { ... }
- },
-};
-```
-
-You can use any names you like as properties for your breakpoints in your project:
-
-```js
-const designSystem = {
- screens: {
- tablet: '640px',
- // => @media (min-width: 640px) { ... }
-
- laptop: '1024px',
- // => @media (min-width: 1024px) { ... }
-
- desktop: '1280px',
- // => @media (min-width: 1280px) { ... }
- },
-};
-```
-
-These screen names are reflected in `utilities`, so `text-center` would now look like this:
-
-```css
-.text-center {
- text-align: center;
-}
-
-@media (min-width: 640px) {
- .tablet\:text-center {
- text-align: center;
- }
-}
-
-@media (min-width: 1024px) {
- .laptop\:text-center {
- text-align: center;
- }
-}
-
-@media (min-width: 1280px) {
- .desktop\:text-center {
- text-align: center;
- }
-}
-```
-
-##### Max-width Breakpoint
-
-If you want to use `max-width` breakpoints instead of `min-width`, you can specify the screen as an object with a `max` property:
-
-```js
-const designSystem = {
- screens: {
- xl: { max: '1279px' },
- // => @media (max-width: 1279px) { ... }
-
- lg: { max: '1023px' },
- // => @media (max-width: 1023px) { ... }
-
- md: { max: '767px' },
- // => @media (max-width: 767px) { ... }
-
- sm: { max: '639px' },
- // => @media (max-width: 639px) { ... }
- },
-};
-```
-
-If necessary, you can create breakpoints with both `min-width` and `max-width` definitions, like so:
-
-```js
-const designSystem = {
- screens: {
- sm: { min: '640px', max: '767px' },
- md: { min: '768px', max: '1023px' },
- lg: { min: '1024px', max: '1279px' },
- xl: { min: '1280px' },
- },
-};
-```
-
-##### Breakpoints with Multiple Ranges
-
-Sometimes it can be useful to apply a single breakpoint definition to multiple ranges.
-
-For example, suppose you have a `sidebar` and want to base the breakpoints on the width of the content area rather than the entire viewport. You can simulate this by using a smaller breakpoint style when the `sidebar` is visible and the content area is reduced:
-
-```js
-const designSystem = {
- screens: {
- sm: '500px',
- md: [
- // Sidebar appears at 768px, so revert to `sm:` styles between 768px
- // and 868px, after which the main content area is wide enough again to
- // apply the `md:` styles.
- { min: '668px', max: '767px' },
- { min: '868px' },
- ],
- lg: '1100px',
- xl: '1400px',
- },
-};
-```
-
-##### Custom Media Queries
-
-If you need to provide fully custom media queries for your breakpoints, you can use an object with a `raw` property:
-
-```js
-const designSystem = {
- extend: {
- screens: {
- portrait: { raw: '(orientation: portrait)' },
- // => @media (orientation: portrait) { ... }
- },
- },
-};
-```
-
-##### Print Style
-
-The `raw` option may be especially useful if you need to apply different styles for printing.
-
-All you need to do is add a `print` under `designSystem.extend.screens`:
-
-```js
-const designSystem = {
- extend: {
- screens: {
- print: { raw: 'print' },
- // => @media print { ... }
- },
- },
-};
-```
-
-Then, you can use classes like `print:text-black` to specify styles that should only be applied when someone tries to print the page:
-
-```html
-
- {/* ... */}
-
-```
-
-##### Dark Mode
-
-The `raw` option can be used to implement "dark mode" screens:
-
-```js
-const designSystem = {
- extend: {
- screens: {
- dark: { raw: '(prefers-color-scheme: dark)' },
- // => @media (prefers-color-scheme: dark) { ... }
- },
- },
-};
-```
-
-Then, you can use the `dark:` prefix to set different styles for elements in dark mode:
-
-```html
-
- {/* ... */}
-
-```
-
-Please note that since these screen variants are implemented in Tailwind CSS, **it is not possible to use this method to combine breakpoints with dark mode**, e.g. `md:dark:text-gray-300` will not work.
-
-#### Colors
-
-The `colors` property allows you to customize the global color palette for your project.
-
-```js
-const designSystem = {
- colors: {
- transparent: 'transparent',
- black: '#000',
- white: '#fff',
- gray: {
- 100: '#f7fafc',
- // ...
- 900: '#1a202c',
- },
-
- // ...
- },
-};
-```
-
-By default, these colors are inherited by the `backgroundColor`, `textColor`, and `borderColor` core plugins.
-
-For more information, see [Customizing Colors](https://tailwindcss.com/docs/customizing-colors).
-
-#### Spacing
-
-Use the `space` property to customize the global spacing and scale ratios for your project:
-
-```js
-const designSystem = {
- spacing: {
- px: '1px',
- 0: '0',
- 1: '0.25rem',
- 2: '0.5rem',
- 3: '0.75rem',
- 4: '1rem',
- 5: '1.25rem',
- 6: '1.5rem',
- 8: '2rem',
- 10: '2.5rem',
- 12: '3rem',
- 16: '4rem',
- 20: '5rem',
- 24: '6rem',
- 32: '8rem',
- 40: '10rem',
- 48: '12rem',
- 56: '14rem',
- 64: '16rem',
- },
-};
-```
-
-By default, these values are inherited by the `padding`, `margin`, `negativeMargin`, `width`, and `height` core plugins.
-
-For more information, see [Customizing Spacing](https://tailwindcss.com/docs/customizing-spacing).
-
-#### Core Plugins
-
-The rest of the theme section is used to configure the values available for each core plugin.
-
-For example, the `borderRadius` property allows you to customize the `utilities` for the generated border radius:
-
-```js
-const designSystem = {
- borderRadius: {
- none: '0',
- sm: '.125rem',
- default: '.25rem',
- lg: '.5rem',
- full: '9999px',
- },
-};
-```
-
-**The property name determines the suffix of the generated classes, and the value determines the value of the actual CSS declaration.** The `borderRadius` configuration example above will generate the following CSS classes:
-
-```css
-.rounded-none {
- border-radius: 0;
-}
-.rounded-sm {
- border-radius: 0.125rem;
-}
-.rounded {
- border-radius: 0.25rem;
-}
-.rounded-lg {
- border-radius: 0.5rem;
-}
-.rounded-full {
- border-radius: 9999px;
-}
-```
-
-You may notice that the `rounded` class without a suffix is created using the `default` property in the theme configuration. This is a common convention in Tailwind CSS that many (although not all) core plugins support.
-
-For more information on customizing specific core plugins, see the documentation for that plugin.
-
-### Customizing the Default Configuration
-
-Out of the box, your project will inherit values from the default theme configuration. If you want to customize the default theme, there are a few different options depending on your goals.
-
-#### Overriding Default Configuration
-
-To override an option in the default configuration, add the property you want to override to `designSystem`:
-
-```ts title="modern.config.ts"
-const designSystem = {
- // Replaces all of the default `opacity` values
- opacity: {
- 0: '0',
- 20: '0.2',
- 40: '0.4',
- 60: '0.6',
- 80: '0.8',
- 100: '1',
- },
-};
-
-export default defineConfig({
- source: {
- designSystem,
- },
-});
-```
-
-This will completely replace the default property configuration, so in the example above, the default `opacity utilities` will not be generated.
-
-Any properties you don't provide will still inherit from the default theme, so in the example above, the default theme configuration for colors, spacing, border radius, background positions, etc. will be preserved.
-
-#### Extending Default Configuration
-
-If you want to keep the default values for a theme option but add new values, add the extension under the `designSystem.extend` property.
-
-For example, if you want to add an additional breakpoint but keep the existing ones, you can extend the `screens` property:
-
-```ts title="modern.config.ts"
-const designSystem = {
- extend: {
- // Adds a new breakpoint in addition to the default breakpoints
- screens: {
- '2xl': '1440px',
- },
- },
-};
-
-export default defineConfig({
- source: {
- designSystem,
- },
-});
-```
-
-Of course, you can override some parts of the default theme and extend other parts of the default theme in the same configuration:
-
-```ts title="modern.config.ts"
-const designSystem = {
- opacity: {
- 0: '0',
- 20: '0.2',
- 40: '0.4',
- 60: '0.6',
- 80: '0.8',
- 100: '1',
- },
- extend: {
- screens: {
- '2xl': '1440px',
- },
- },
-};
-
-export default defineConfig({
- source: {
- designSystem,
- },
-});
-```
-
-#### Referencing Other Values
-
-If you need to reference another value in your configuration, you can do so by providing a closure function instead of a static value. The function will receive the `theme()` function as an argument, which you can use to look up other values in the configuration using dot notation.
-
-For example, you can generate `fill` utilities for each color in your palette by referencing `theme('colors')` on the `fill` configuration:
-
-```ts title="modern.config.ts"
-const designSystem = {
- colors: {
- // ...
- },
- fill: theme => theme('colors'),
-};
-
-export default defineConfig({
- source: {
- designSystem,
- },
-});
-```
-
-The `theme()` function attempts to find the value you're looking for from the fully merged configuration object, so it can reference your own custom settings as well as default theme values. It also works recursively, so as long as there's a static value at the end of the chain, it can resolve the value you're looking for.
-
-**Referencing Default Configuration**
-
-If you want to reference a value from the default configuration for any reason, you can import it from `tailwindcss/defaultTheme`. A useful example is if you want to add a font from the fonts provided by the default configuration:
-
-```ts title="modern.config.ts"
-const defaultTheme = require('tailwindcss/defaultTheme');
-
-const designSystem = {
- extend: {
- fontFamily: {
- sans: ['Lato', ...defaultTheme.fontFamily.sans],
- },
- },
-};
-
-export default defineConfig({
- source: {
- designSystem,
- },
-});
-```
-
-#### Disabling Entire Core Plugins
-
-If you don't want to generate any classes for a particular core plugin, it's best to set that plugin to `false` in the `corePlugins` configuration rather than providing an empty object for that property in the configuration:
-
-```js
-// Don't assign an empty object in your theme configuration
-
-const designSystem = {
- opacity: {},
-};
-
-// Do disable the plugin in your corePlugins configuration
-const designSyttem = {
- corePlugins: {
- opacity: false,
- },
-};
-```
-
-The end result is the same, but since many core plugins don't expose any configuration, they can only be disabled using `corePlugins`, so it's best to be consistent.
-
-#### Adding Your Own Keys
-
-In many cases, adding your own properties to the configuration object can be useful.
-
-One example of this is adding a new property for reuse between multiple core plugins. For example, you could extract a `positions` object that both the `backgroundPosition` and `objectPosition` plugins could reference:
-
-```js
-const designSystem = {
- positions: {
- bottom: 'bottom',
- center: 'center',
- left: 'left',
- 'left-bottom': 'left bottom',
- 'left-top': 'left top',
- right: 'right',
- 'right-bottom': 'right bottom',
- 'right-top': 'right top',
- top: 'top',
- },
- backgroundPosition: theme => theme('positions'),
- objectPosition: theme => theme('positions'),
-};
-```
-
-Another example is adding new properties for reference in custom plugins. For example, if you've written a gradient plugin for your project, you could add a `gradients` property to the theme object that the plugin references:
-
-```ts title="modern.config.ts"
-const designSystem = {
- gradients: theme => ({
- 'blue-green': [theme('colors.blue.500'), theme('colors.green.500')],
- 'purple-blue': [theme('colors.purple.500'), theme('colors.blue.500')],
- // ...
- }),
-};
-
-export default defineConfig({
- source: {
- designSystem,
- },
- tools: {
- tailwind: {
- plugins: [require('./plugins/gradients')],
- },
- },
-});
-```
-
-### Configuration Reference
-
-In addition to `screens`, `colors`, and `spacing`, all properties in the configuration object map to core plugins in Tailwind CSS. Because many plugins are responsible for CSS properties that only accept a set of static values (e.g. `float`), not every plugin has a corresponding property in the theme object.
-
-All of these properties can also be extended from the default theme under the `designSystem.extend` property.
-
-For a complete list of all properties and their effects, see this [link](https://tailwindcss.com/docs/theme#configuration-reference).
-
-### Additional Configuration
-
-In addition to the configuration that is the same as Tailwind CSS Theme, there is additional configuration provided by Modern.js.
-
-#### source.designSystem.supportStyledComponents
-
-This configuration is of type `boolean` and defaults to `false`.
-
-When this configuration value is `true`, a `styled-components` `ThemeProvider` component is provided at the outermost layer of the application at runtime, and the `Theme Token` object generated through `designSystem` is injected.
diff --git a/packages/document/main-doc/docs/en/configure/app/tools/tailwindcss.mdx b/packages/document/main-doc/docs/en/configure/app/tools/tailwindcss.mdx
index 4a1cc34165f0..d7ef5b6f26fa 100644
--- a/packages/document/main-doc/docs/en/configure/app/tools/tailwindcss.mdx
+++ b/packages/document/main-doc/docs/en/configure/app/tools/tailwindcss.mdx
@@ -56,6 +56,37 @@ export default {
Please note:
- 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}`.
-- If you are using the [source.designSystem](/configure/app/source/design-system) configuration option simultaneously, the `theme` configuration of Tailwind CSS will be overridden by the value of `source.designSystem`.
+- If you are using the `source.designSystem` configuration option simultaneously, the `theme` configuration of Tailwind CSS will be overridden by the value of `source.designSystem`.
The usage of other configurations follows the same approach as the official usage of Tailwind CSS. Please refer to [tailwindcss - Configuration](https://tailwindcss.com/docs/configuration) for more details.
+
+### About source.designSystem
+
+`source.designSystem` is a deprecated configuration option in Modern.js.
+
+Starting from Modern.js vMAJOR_VERSION.33.0, you can use the `theme` configuration option of Tailwind CSS as a replacement for `source.designSystem`. It is no longer necessary to split the `theme` configuration and set it on `designSystem`.
+
+- Previous usage:
+
+```ts title="modern.config.ts"
+const { theme, ...rest } = tailwindConfig;
+
+export default {
+ tools: {
+ tailwindcss: rest,
+ },
+ source: {
+ designSystem: theme,
+ },
+};
+```
+
+- Current usage:
+
+```ts title="modern.config.ts"
+export default {
+ tools: {
+ tailwindcss: tailwindConfig,
+ },
+};
+```
diff --git a/packages/document/main-doc/docs/zh/configure/app/source/design-system.mdx b/packages/document/main-doc/docs/zh/configure/app/source/design-system.mdx
deleted file mode 100644
index 8c9118fe3d26..000000000000
--- a/packages/document/main-doc/docs/zh/configure/app/source/design-system.mdx
+++ /dev/null
@@ -1,1174 +0,0 @@
----
-sidebar_label: designSystem
----
-
-# source.designSystem
-
-- **类型：** `Object`
-- **默认值：** 见下方配置详情。
-
-:::caution 注意
-需要先通过 `pnpm run new` 启用 Tailwind CSS 功能。
-
-:::
-
-
- DesignSystem 配置详情
-
-```js
-const designSystem = {
- screens: {
- sm: '640px',
- md: '768px',
- lg: '1024px',
- xl: '1280px',
- },
- colors: {
- transparent: 'transparent',
- current: 'currentColor',
-
- black: '#000',
- white: '#fff',
-
- gray: {
- 100: '#f7fafc',
- 200: '#edf2f7',
- 300: '#e2e8f0',
- 400: '#cbd5e0',
- 500: '#a0aec0',
- 600: '#718096',
- 700: '#4a5568',
- 800: '#2d3748',
- 900: '#1a202c',
- },
- red: {
- 100: '#fff5f5',
- 200: '#fed7d7',
- 300: '#feb2b2',
- 400: '#fc8181',
- 500: '#f56565',
- 600: '#e53e3e',
- 700: '#c53030',
- 800: '#9b2c2c',
- 900: '#742a2a',
- },
- orange: {
- 100: '#fffaf0',
- 200: '#feebc8',
- 300: '#fbd38d',
- 400: '#f6ad55',
- 500: '#ed8936',
- 600: '#dd6b20',
- 700: '#c05621',
- 800: '#9c4221',
- 900: '#7b341e',
- },
- yellow: {
- 100: '#fffff0',
- 200: '#fefcbf',
- 300: '#faf089',
- 400: '#f6e05e',
- 500: '#ecc94b',
- 600: '#d69e2e',
- 700: '#b7791f',
- 800: '#975a16',
- 900: '#744210',
- },
- green: {
- 100: '#f0fff4',
- 200: '#c6f6d5',
- 300: '#9ae6b4',
- 400: '#68d391',
- 500: '#48bb78',
- 600: '#38a169',
- 700: '#2f855a',
- 800: '#276749',
- 900: '#22543d',
- },
- teal: {
- 100: '#e6fffa',
- 200: '#b2f5ea',
- 300: '#81e6d9',
- 400: '#4fd1c5',
- 500: '#38b2ac',
- 600: '#319795',
- 700: '#2c7a7b',
- 800: '#285e61',
- 900: '#234e52',
- },
- blue: {
- 100: '#ebf8ff',
- 200: '#bee3f8',
- 300: '#90cdf4',
- 400: '#63b3ed',
- 500: '#4299e1',
- 600: '#3182ce',
- 700: '#2b6cb0',
- 800: '#2c5282',
- 900: '#2a4365',
- },
- indigo: {
- 100: '#ebf4ff',
- 200: '#c3dafe',
- 300: '#a3bffa',
- 400: '#7f9cf5',
- 500: '#667eea',
- 600: '#5a67d8',
- 700: '#4c51bf',
- 800: '#434190',
- 900: '#3c366b',
- },
- purple: {
- 100: '#faf5ff',
- 200: '#e9d8fd',
- 300: '#d6bcfa',
- 400: '#b794f4',
- 500: '#9f7aea',
- 600: '#805ad5',
- 700: '#6b46c1',
- 800: '#553c9a',
- 900: '#44337a',
- },
- pink: {
- 100: '#fff5f7',
- 200: '#fed7e2',
- 300: '#fbb6ce',
- 400: '#f687b3',
- 500: '#ed64a6',
- 600: '#d53f8c',
- 700: '#b83280',
- 800: '#97266d',
- 900: '#702459',
- },
- },
- spacing: {
- px: '1px',
- 0: '0',
- 1: '0.25rem',
- 2: '0.5rem',
- 3: '0.75rem',
- 4: '1rem',
- 5: '1.25rem',
- 6: '1.5rem',
- 8: '2rem',
- 10: '2.5rem',
- 12: '3rem',
- 16: '4rem',
- 20: '5rem',
- 24: '6rem',
- 32: '8rem',
- 40: '10rem',
- 48: '12rem',
- 56: '14rem',
- 64: '16rem',
- },
- backgroundColor: theme => theme('colors'),
- backgroundOpacity: theme => theme('opacity'),
- backgroundPosition: {
- bottom: 'bottom',
- center: 'center',
- left: 'left',
- 'left-bottom': 'left bottom',
- 'left-top': 'left top',
- right: 'right',
- 'right-bottom': 'right bottom',
- 'right-top': 'right top',
- top: 'top',
- },
- backgroundSize: {
- auto: 'auto',
- cover: 'cover',
- contain: 'contain',
- },
- borderColor: theme => ({
- ...theme('colors'),
- default: theme('colors.gray.300', 'currentColor'),
- }),
- borderOpacity: theme => theme('opacity'),
- borderRadius: {
- none: '0',
- sm: '0.125rem',
- default: '0.25rem',
- md: '0.375rem',
- lg: '0.5rem',
- full: '9999px',
- },
- borderWidth: {
- default: '1px',
- 0: '0',
- 2: '2px',
- 4: '4px',
- 8: '8px',
- },
- boxShadow: {
- xs: '0 0 0 1px rgba(0, 0, 0, 0.05)',
- sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
- default: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
- md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
- lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
- xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
- '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
- inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
- outline: '0 0 0 3px rgba(66, 153, 225, 0.5)',
- none: 'none',
- },
- container: {},
- cursor: {
- auto: 'auto',
- default: 'default',
- pointer: 'pointer',
- wait: 'wait',
- text: 'text',
- move: 'move',
- 'not-allowed': 'not-allowed',
- },
- divideColor: theme => theme('borderColor'),
- divideOpacity: theme => theme('borderOpacity'),
- divideWidth: theme => theme('borderWidth'),
- fill: {
- current: 'currentColor',
- },
- flex: {
- 1: '1 1 0%',
- auto: '1 1 auto',
- initial: '0 1 auto',
- none: 'none',
- },
- flexGrow: {
- 0: '0',
- default: '1',
- },
- flexShrink: {
- 0: '0',
- default: '1',
- },
- fontFamily: {
- sans: [
- 'system-ui',
- '-apple-system',
- 'BlinkMacSystemFont',
- '"Segoe UI"',
- 'Roboto',
- '"Helvetica Neue"',
- 'Arial',
- '"Noto Sans"',
- 'sans-serif',
- '"Apple Color Emoji"',
- '"Segoe UI Emoji"',
- '"Segoe UI Symbol"',
- '"Noto Color Emoji"',
- ],
- serif: ['Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'],
- mono: [
- 'Menlo',
- 'Monaco',
- 'Consolas',
- '"Liberation Mono"',
- '"Courier New"',
- 'monospace',
- ],
- },
- fontSize: {
- xs: '0.75rem',
- sm: '0.875rem',
- base: '1rem',
- lg: '1.125rem',
- xl: '1.25rem',
- '2xl': '1.5rem',
- '3xl': '1.875rem',
- '4xl': '2.25rem',
- '5xl': '3rem',
- '6xl': '4rem',
- },
- fontWeight: {
- hairline: '100',
- thin: '200',
- light: '300',
- normal: '400',
- medium: '500',
- semibold: '600',
- bold: '700',
- extrabold: '800',
- black: '900',
- },
- height: theme => ({
- auto: 'auto',
- ...theme('spacing'),
- full: '100%',
- screen: '100vh',
- }),
- inset: {
- 0: '0',
- auto: 'auto',
- },
- letterSpacing: {
- tighter: '-0.05em',
- tight: '-0.025em',
- normal: '0',
- wide: '0.025em',
- wider: '0.05em',
- widest: '0.1em',
- },
- lineHeight: {
- none: '1',
- tight: '1.25',
- snug: '1.375',
- normal: '1.5',
- relaxed: '1.625',
- loose: '2',
- 3: '.75rem',
- 4: '1rem',
- 5: '1.25rem',
- 6: '1.5rem',
- 7: '1.75rem',
- 8: '2rem',
- 9: '2.25rem',
- 10: '2.5rem',
- },
- listStyleType: {
- none: 'none',
- disc: 'disc',
- decimal: 'decimal',
- },
- margin: (theme, { negative }) => ({
- auto: 'auto',
- ...theme('spacing'),
- ...negative(theme('spacing')),
- }),
- maxHeight: {
- full: '100%',
- screen: '100vh',
- },
- maxWidth: (theme, { breakpoints }) => ({
- none: 'none',
- xs: '20rem',
- sm: '24rem',
- md: '28rem',
- lg: '32rem',
- xl: '36rem',
- '2xl': '42rem',
- '3xl': '48rem',
- '4xl': '56rem',
- '5xl': '64rem',
- '6xl': '72rem',
- full: '100%',
- ...breakpoints(theme('screens')),
- }),
- minHeight: {
- 0: '0',
- full: '100%',
- screen: '100vh',
- },
- minWidth: {
- 0: '0',
- full: '100%',
- },
- objectPosition: {
- bottom: 'bottom',
- center: 'center',
- left: 'left',
- 'left-bottom': 'left bottom',
- 'left-top': 'left top',
- right: 'right',
- 'right-bottom': 'right bottom',
- 'right-top': 'right top',
- top: 'top',
- },
- opacity: {
- 0: '0',
- 25: '0.25',
- 50: '0.5',
- 75: '0.75',
- 100: '1',
- },
- order: {
- first: '-9999',
- last: '9999',
- none: '0',
- 1: '1',
- 2: '2',
- 3: '3',
- 4: '4',
- 5: '5',
- 6: '6',
- 7: '7',
- 8: '8',
- 9: '9',
- 10: '10',
- 11: '11',
- 12: '12',
- },
- padding: theme => theme('spacing'),
- placeholderColor: theme => theme('colors'),
- placeholderOpacity: theme => theme('opacity'),
- space: (theme, { negative }) => ({
- ...theme('spacing'),
- ...negative(theme('spacing')),
- }),
- stroke: {
- current: 'currentColor',
- },
- strokeWidth: {
- 0: '0',
- 1: '1',
- 2: '2',
- },
- textColor: theme => theme('colors'),
- textOpacity: theme => theme('opacity'),
- width: theme => ({
- auto: 'auto',
- ...theme('spacing'),
- '1/2': '50%',
- '1/3': '33.333333%',
- '2/3': '66.666667%',
- '1/4': '25%',
- '2/4': '50%',
- '3/4': '75%',
- '1/5': '20%',
- '2/5': '40%',
- '3/5': '60%',
- '4/5': '80%',
- '1/6': '16.666667%',
- '2/6': '33.333333%',
- '3/6': '50%',
- '4/6': '66.666667%',
- '5/6': '83.333333%',
- '1/12': '8.333333%',
- '2/12': '16.666667%',
- '3/12': '25%',
- '4/12': '33.333333%',
- '5/12': '41.666667%',
- '6/12': '50%',
- '7/12': '58.333333%',
- '8/12': '66.666667%',
- '9/12': '75%',
- '10/12': '83.333333%',
- '11/12': '91.666667%',
- full: '100%',
- screen: '100vw',
- }),
- zIndex: {
- auto: 'auto',
- 0: '0',
- 10: '10',
- 20: '20',
- 30: '30',
- 40: '40',
- 50: '50',
- },
- gap: theme => theme('spacing'),
- gridTemplateColumns: {
- none: 'none',
- 1: 'repeat(1, minmax(0, 1fr))',
- 2: 'repeat(2, minmax(0, 1fr))',
- 3: 'repeat(3, minmax(0, 1fr))',
- 4: 'repeat(4, minmax(0, 1fr))',
- 5: 'repeat(5, minmax(0, 1fr))',
- 6: 'repeat(6, minmax(0, 1fr))',
- 7: 'repeat(7, minmax(0, 1fr))',
- 8: 'repeat(8, minmax(0, 1fr))',
- 9: 'repeat(9, minmax(0, 1fr))',
- 10: 'repeat(10, minmax(0, 1fr))',
- 11: 'repeat(11, minmax(0, 1fr))',
- 12: 'repeat(12, minmax(0, 1fr))',
- },
- gridColumn: {
- auto: 'auto',
- 'span-1': 'span 1 / span 1',
- 'span-2': 'span 2 / span 2',
- 'span-3': 'span 3 / span 3',
- 'span-4': 'span 4 / span 4',
- 'span-5': 'span 5 / span 5',
- 'span-6': 'span 6 / span 6',
- 'span-7': 'span 7 / span 7',
- 'span-8': 'span 8 / span 8',
- 'span-9': 'span 9 / span 9',
- 'span-10': 'span 10 / span 10',
- 'span-11': 'span 11 / span 11',
- 'span-12': 'span 12 / span 12',
- },
- gridColumnStart: {
- auto: 'auto',
- 1: '1',
- 2: '2',
- 3: '3',
- 4: '4',
- 5: '5',
- 6: '6',
- 7: '7',
- 8: '8',
- 9: '9',
- 10: '10',
- 11: '11',
- 12: '12',
- 13: '13',
- },
- gridColumnEnd: {
- auto: 'auto',
- 1: '1',
- 2: '2',
- 3: '3',
- 4: '4',
- 5: '5',
- 6: '6',
- 7: '7',
- 8: '8',
- 9: '9',
- 10: '10',
- 11: '11',
- 12: '12',
- 13: '13',
- },
- gridTemplateRows: {
- none: 'none',
- 1: 'repeat(1, minmax(0, 1fr))',
- 2: 'repeat(2, minmax(0, 1fr))',
- 3: 'repeat(3, minmax(0, 1fr))',
- 4: 'repeat(4, minmax(0, 1fr))',
- 5: 'repeat(5, minmax(0, 1fr))',
- 6: 'repeat(6, minmax(0, 1fr))',
- },
- gridRow: {
- auto: 'auto',
- 'span-1': 'span 1 / span 1',
- 'span-2': 'span 2 / span 2',
- 'span-3': 'span 3 / span 3',
- 'span-4': 'span 4 / span 4',
- 'span-5': 'span 5 / span 5',
- 'span-6': 'span 6 / span 6',
- },
- gridRowStart: {
- auto: 'auto',
- 1: '1',
- 2: '2',
- 3: '3',
- 4: '4',
- 5: '5',
- 6: '6',
- 7: '7',
- },
- gridRowEnd: {
- auto: 'auto',
- 1: '1',
- 2: '2',
- 3: '3',
- 4: '4',
- 5: '5',
- 6: '6',
- 7: '7',
- },
- transformOrigin: {
- center: 'center',
- top: 'top',
- 'top-right': 'top right',
- right: 'right',
- 'bottom-right': 'bottom right',
- bottom: 'bottom',
- 'bottom-left': 'bottom left',
- left: 'left',
- 'top-left': 'top left',
- },
- scale: {
- 0: '0',
- 50: '.5',
- 75: '.75',
- 90: '.9',
- 95: '.95',
- 100: '1',
- 105: '1.05',
- 110: '1.1',
- 125: '1.25',
- 150: '1.5',
- },
- rotate: {
- '-180': '-180deg',
- '-90': '-90deg',
- '-45': '-45deg',
- 0: '0',
- 45: '45deg',
- 90: '90deg',
- 180: '180deg',
- },
- translate: (theme, { negative }) => ({
- ...theme('spacing'),
- ...negative(theme('spacing')),
- '-full': '-100%',
- '-1/2': '-50%',
- '1/2': '50%',
- full: '100%',
- }),
- skew: {
- '-12': '-12deg',
- '-6': '-6deg',
- '-3': '-3deg',
- 0: '0',
- 3: '3deg',
- 6: '6deg',
- 12: '12deg',
- },
- transitionProperty: {
- none: 'none',
- all: 'all',
- default:
- 'background-color, border-color, color, fill, stroke, opacity, box-shadow, transform',
- colors: 'background-color, border-color, color, fill, stroke',
- opacity: 'opacity',
- shadow: 'box-shadow',
- transform: 'transform',
- },
- transitionTimingFunction: {
- linear: 'linear',
- in: 'cubic-bezier(0.4, 0, 1, 1)',
- out: 'cubic-bezier(0, 0, 0.2, 1)',
- 'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
- },
- transitionDuration: {
- 75: '75ms',
- 100: '100ms',
- 150: '150ms',
- 200: '200ms',
- 300: '300ms',
- 500: '500ms',
- 700: '700ms',
- 1000: '1000ms',
- },
- transitionDelay: {
- 75: '75ms',
- 100: '100ms',
- 150: '150ms',
- 200: '200ms',
- 300: '300ms',
- 500: '500ms',
- 700: '700ms',
- 1000: '1000ms',
- },
-};
-```
-
-
-:::tip 提示
-更多关于 Tailwind CSS 配置可查看[这里](https://tailwindcss.com/docs/configuration#theme)。
-
-:::
-
-`designSystem` 用于定义项目的调色板、排版比例（Typographic Scales 或者 Type Scale）、字体列表、断点、边框圆角值等等。因为 Modern.js 借用了 Tailwind Theme 的设计方式，并且内部也集成了 Tailwind CSS，所以 `designSystem` 使用方式与 Tailwind CSS Theme 相同。
-
-### 结构
-
-`designSystem` 对象包含 `screens`、`colors` 和 `spacing` 的属性，以及每个可自定义核心插件。
-
-#### Screens
-
-使用 `screens` 可以自定义项目中的响应断点：
-
-```js
-const designSystem = {
- screens: {
- sm: '640px',
- md: '768px',
- lg: '1024px',
- xl: '1280px',
- },
-};
-```
-
-其中 `screens` 对象里的属性名是屏幕名称（用作 `Tailwind CSS` 生成的自适应实用程序变体的前缀，例如 `md:text-center`），值是该断点应在其开始的 `min-width`。
-
-默认断点受常见设备分辨率的启发：
-
-```js
-const designSystem = {
- screens: {
- sm: '640px',
- // => @media (min-width: 640px) { ... }
-
- md: '768px',
- // => @media (min-width: 768px) { ... }
-
- lg: '1024px',
- // => @media (min-width: 1024px) { ... }
-
- xl: '1280px',
- // => @media (min-width: 1280px) { ... }
- },
-};
-```
-
-你可以在你的项目中使用任意你喜欢的名称作为断点的属性：
-
-```js
-const designSystem = {
- screens: {
- tablet: '640px',
- // => @media (min-width: 640px) { ... }
-
- laptop: '1024px',
- // => @media (min-width: 1024px) { ... }
-
- desktop: '1280px',
- // => @media (min-width: 1280px) { ... }
- },
-};
-```
-
-这些屏幕名称反映在 `utilities` 中，因此 `text-center` 现在是这样的：
-
-```css
-.text-center {
- text-align: center;
-}
-
-@media (min-width: 640px) {
- .tablet\:text-center {
- text-align: center;
- }
-}
-
-@media (min-width: 1024px) {
- .laptop\:text-center {
- text-align: center;
- }
-}
-
-@media (min-width: 1280px) {
- .desktop\:text-center {
- text-align: center;
- }
-}
-```
-
-##### Max-width 断点
-
-如果要使用 `max-width` 断点而不是 `min-width`，可以将屏幕指定为具有 `max` 属性的对象：
-
-```js
-const designSystem = {
- screens: {
- xl: { max: '1279px' },
- // => @media (max-width: 1279px) { ... }
-
- lg: { max: '1023px' },
- // => @media (max-width: 1023px) { ... }
-
- md: { max: '767px' },
- // => @media (max-width: 767px) { ... }
-
- sm: { max: '639px' },
- // => @media (max-width: 639px) { ... }
- },
-};
-```
-
-如有必要，以创建带有 `min-width` 和 `max-width` 定义的断点，例如：
-
-```js
-const designSystem = {
- screens: {
- sm: { min: '640px', max: '767px' },
- md: { min: '768px', max: '1023px' },
- lg: { min: '1024px', max: '1279px' },
- xl: { min: '1280px' },
- },
-};
-```
-
-##### 多个范围的断点
-
-有时，将单个断点定义应用于多个范围会很有用。
-
-例如，假设您有一个 `sidebar`，并且希望断点基于内容区域宽度而不是整个视口。您可以模拟这种情况，当 `sidebar` 可见并缩小内容区域时，断点的样式使用较小的断点样式：
-
-```js
-const designSystem = {
- screens: {
- sm: '500px',
- md: [
- // Sidebar appears at 768px, so revert to `sm:` styles between 768px
- // and 868px, after which the main content area is wide enough again to
- // apply the `md:` styles.
- { min: '668px', max: '767px' },
- { min: '868px' },
- ],
- lg: '1100px',
- xl: '1400px',
- },
-};
-```
-
-##### 自定义媒体查询
-
-如果需要为断点提供完全自定义的媒体查询，则可以使用带有 `raw` 属性的对象：
-
-```js
-const designSystem = {
- extend: {
- screens: {
- portrait: { raw: '(orientation: portrait)' },
- // => @media (orientation: portrait) { ... }
- },
- },
-};
-```
-
-##### Print 样式
-
-如果需要为打印应用不同的样式，则 `raw` 选项可能特别有用。
-
-需要做的就是在 `designSystem.extend.screens` 下添加一个 `print`：
-
-```js
-const designSystem = {
- extend: {
- screens: {
- print: { raw: 'print' },
- // => @media print { ... }
- },
- },
-};
-```
-
-然后，可以使用诸如 `print:text-black` 之类的类来指定仅当某人尝试打印页面时才应用的样式：
-
-```html
-
- {/* ... */}
-
-```
-
-##### Dark Mode
-
-`raw` 选项可以用于实现 “暗模式” 屏幕：
-
-```js
-const designSystem = {
- extend: {
- screens: {
- dark: { raw: '(prefers-color-scheme: dark)' },
- // => @media (prefers-color-scheme: dark) { ... }
- },
- },
-};
-```
-
-然后，您可以使用 `dark:` 前缀在暗模式下为元素设置不同的样式：
-
-```html
-
- {/* ... */}
-
-```
-
-请注意，由于这些 `screen variants` 是在 `Tailwind CSS` 中实现的，因此**无法使用这种方法将断点与暗模式结合使用** ，例如 `md:dark:text-gray-300` 将不起作用。
-
-#### Colors
-
-`colors` 属性可让您自定义项目的全局调色板。
-
-```js
-const designSystem = {
- colors: {
- transparent: 'transparent',
- black: '#000',
- white: '#fff',
- gray: {
- 100: '#f7fafc',
- // ...
- 900: '#1a202c',
- },
-
- // ...
- },
-};
-```
-
-默认情况下，这些颜色由 `backgroundColor`，`textColor` 和 `borderColor` 核心插件继承。
-
-想了解更多，可以查看：[Customizing Colors](https://tailwindcss.com/docs/customizing-colors)。
-
-#### Spacing
-
-使用 `space` 属性，可以自定义项目的全局间距和缩放比例：
-
-```js
-const designSystem = {
- spacing: {
- px: '1px',
- 0: '0',
- 1: '0.25rem',
- 2: '0.5rem',
- 3: '0.75rem',
- 4: '1rem',
- 5: '1.25rem',
- 6: '1.5rem',
- 8: '2rem',
- 10: '2.5rem',
- 12: '3rem',
- 16: '4rem',
- 20: '5rem',
- 24: '6rem',
- 32: '8rem',
- 40: '10rem',
- 48: '12rem',
- 56: '14rem',
- 64: '16rem',
- },
-};
-```
-
-默认情况下，这些值由 `padding`，`margin`，`negativeMargin`，`width` 和 `height` 核心插件继承。
-
-想要了解更多，看 [Customizing Spacing](https://tailwindcss.com/docs/customizing-spacing)。
-
-#### Core plugins
-
-主题部分的其余部分用于配置每个核心插件可用的值。
-
-例如，`borderRadius` 属性可让您自定义将生成的圆角的 `utilities`：
-
-```js
-const designSystem = {
- borderRadius: {
- none: '0',
- sm: '.125rem',
- default: '.25rem',
- lg: '.5rem',
- full: '9999px',
- },
-};
-```
-
-**属性名确定所生成类的后缀，值确定实际 CSS 声明的值。**上面的示例 `borderRadius` 配置将生成以下 CSS 类：
-
-```css
-.rounded-none {
- border-radius: 0;
-}
-.rounded-sm {
- border-radius: 0.125rem;
-}
-.rounded {
- border-radius: 0.25rem;
-}
-.rounded-lg {
- border-radius: 0.5rem;
-}
-.rounded-full {
- border-radius: 9999px;
-}
-```
-
-会注意到，在主题配置中使用 `default` 属性创建了不带后缀的 `rounded` 类。这是许多（尽管不是全部）核心插件支持的 Tailwind CSS 中的通用约定。
-
-要了解有关自定义特定核心插件的更多信息，请访问该插件的文档。
-
-### 自定义默认配置
-
-开箱即用，您的项目将自动从默认主题配置继承值。如果想自定义默认主题，则根据目标有几种不同的选择。
-
-#### 覆盖默认配置
-
-要覆盖默认配置中的选项，请在 `designSystem` 中添加要覆盖的属性：
-
-```ts title="modern.config.ts"
-const designSystem = {
- // Replaces all of the default `opacity` values
- opacity: {
- 0: '0',
- 20: '0.2',
- 40: '0.4',
- 60: '0.6',
- 80: '0.8',
- 100: '1',
- },
-};
-
-export default defineConfig({
- source: {
- designSystem,
- },
-});
-```
-
-这将完全替换默认属性配置，因此在上面的示例中，不会生成默认的 `opacity utilities`。
-
-您未提供的任何属性都将从默认主题继承，因此在上面的示例中，将保留颜色，间距，边框圆角，背景位置等内容的默认主题配置。
-
-#### 扩展默认配置
-
-如果您想保留主题选项的默认值，但又要添加新值，请在 `designSystem.extend` 属性下添加扩展的内容。
-
-例如，如果您想添加一个额外的断点但保留现有的断点，则可以扩展 `screens` 属性：
-
-```ts title="modern.config.ts"
-const designSystem = {
- extend: {
- // Adds a new breakpoint in addition to the default breakpoints
- screens: {
- '2xl': '1440px',
- },
- },
-};
-
-export default defineConfig({
- source: {
- designSystem,
- },
-});
-```
-
-您当然可以覆盖默认主题的某些部分，并在同一配置中扩展默认主题的其他部分：
-
-```ts title="modern.config.ts"
-const designSystem = {
- opacity: {
- 0: '0',
- 20: '0.2',
- 40: '0.4',
- 60: '0.6',
- 80: '0.8',
- 100: '1',
- },
- extend: {
- screens: {
- '2xl': '1440px',
- },
- },
-};
-
-export default defineConfig({
- source: {
- designSystem,
- },
-});
-```
-
-#### 引用其他值
-
-如果需要在配置中引用另一个值，可以通过提供闭包函数而不是静态值来实现。函数将收到 `theme()` 函数作为参数，您可以使用该函数使用点表示法在配置中查找其他值。
-
-例如，您可以在 `fill` 配置上通过引用 `theme('colors')` 为调色板中的每种颜色生成 `fill` utilities。
-
-```ts title="modern.config.ts"
-const designSystem = {
- colors: {
- // ...
- },
- fill: theme => theme('colors'),
-};
-
-export default defineConfig({
- source: {
- designSystem,
- },
-});
-```
-
-`theme()`函数尝试从已经完全合并的配置对象中找到您要查找的值，因此它可以引用您自己的自定义设置以及默认主题值。它也可以递归工作，因此只要链末尾有一个静态值，它就可以解析您要查找的值。
-
-**引用默认配置**
-
-如果出于任何原因想要引用默认配置中的值，则可以从 `tailwindcss/defaultTheme` 导入它。一个有用的示例是，如果要将添加默认配置提供的字体中某一个字体：
-
-```ts title="modern.config.ts"
-const defaultTheme = require('tailwindcss/defaultTheme');
-
-const designSystem = {
- extend: {
- fontFamily: {
- sans: ['Lato', ...defaultTheme.fontFamily.sans],
- },
- },
-};
-
-export default defineConfig({
- source: {
- designSystem,
- },
-});
-```
-
-#### 禁用整个核心插件
-
-如果您不想为某个核心插件生成任何类，则最好在 `corePlugins` 配置中将该插件设置为 `false`，而不是在配置中为该属性提供一个空对象：
-
-```js
-// Don't assign an empty object in your theme configuration
-
-const designSystem = {
- opacity: {},
-};
-
-// Do disable the plugin in your corePlugins configuration
-const designSyttem = {
- corePlugins: {
- opacity: false,
- },
-};
-```
-
-最终结果是相同的，但是由于许多核心插件未公开任何配置，因此无论如何只能使用 corePlugins 禁用它们，最好保持一致。
-
-#### 添加自己的 key
-
-在很多情况下，将自己的属性添加到配置对象可能会很有用。
-
-其中一个示例是添加新属性为多个核心插件之间复用。例如，您可以提取一个 `positions`对象，`backgroundPosition` 和 `objectPosition` 插件都可以引用该对象：
-
-```js
-const designSystem = {
- positions: {
- bottom: 'bottom',
- center: 'center',
- left: 'left',
- 'left-bottom': 'left bottom',
- 'left-top': 'left top',
- right: 'right',
- 'right-bottom': 'right bottom',
- 'right-top': 'right top',
- top: 'top',
- },
- backgroundPosition: theme => theme('positions'),
- objectPosition: theme => theme('positions'),
-};
-```
-
-另一个示例是在自定义插件中添加新的属性以进行引用。例如，如果您为项目编写了渐变插件，则可以向该插件引用的主题对象添加渐变属性：
-
-```ts title="modern.config.ts"
-const designSystem = {
- gradients: theme => ({
- 'blue-green': [theme('colors.blue.500'), theme('colors.green.500')],
- 'purple-blue': [theme('colors.purple.500'), theme('colors.blue.500')],
- // ...
- }),
-};
-
-export default defineConfig({
- source: {
- designSystem,
- },
- tools: {
- tailwind: {
- plugins: [require('./plugins/gradients')],
- },
- },
-});
-```
-
-### 配置引用
-
-除了 `screens`，`colors` 和 `spacing` 外，配置对象中的所有属性都映射到 `Tailwind CSS` 的核心插件上。由于许多插件负责仅接受静态值集（例如，例如`float`）的 CSS 属性，因此请注意，并非每个插件在主题对象中都有对应的属性。
-
-所有这些属性也可以在 `designSystem.extend` 属性下使用，以扩展默认主题。
-
-关于所有属性的作用，可以查看此 [链接](https://tailwindcss.com/docs/theme#configuration-reference)。
-
-### 额外的配置
-
-除了与 Tailwind CSS Theme 相同的配置以外，还有 Modern.js 提供的额外的配置。
-
-#### source.designSystem.supportStyledComponents
-
-该配置类型为 `boolean`，默认为 `false`。
-
-当该配置值为 `true` 时，运行时在应用外层提供 `styled-components` `ThemeProvider` 组件，并且将通过 `designSystem` 生成的 `Theme Token` 对象注入。
diff --git a/packages/document/main-doc/docs/zh/configure/app/tools/tailwindcss.mdx b/packages/document/main-doc/docs/zh/configure/app/tools/tailwindcss.mdx
index 3b495a328f03..57a2e186344e 100644
--- a/packages/document/main-doc/docs/zh/configure/app/tools/tailwindcss.mdx
+++ b/packages/document/main-doc/docs/zh/configure/app/tools/tailwindcss.mdx
@@ -56,6 +56,37 @@ export default {
注意：
- 如果你同时使用了 `tailwind.config.{ts,js}` 文件和 `tools.tailwindcss` 选项，那么 `tools.tailwindcss` 定义的配置会优先生效，并覆盖 `tailwind.config.{ts,js}` 中定义的内容。
-- 如果你同时使用了 [source.designSystem](/configure/app/source/design-system) 配置项，那么 Tailwind CSS 的 `theme` 配置将会被 `source.designSystem` 的值所覆盖。
+- 如果你同时使用了 `source.designSystem` 配置项，那么 Tailwind CSS 的 `theme` 配置将会被 `source.designSystem` 的值所覆盖。
其他配置的使用方式与 Tailwind CSS 官方用法一致，请参考 [tailwindcss - Configuration](https://tailwindcss.com/docs/configuration)。
+
+### 关于 source.designSystem
+
+`source.designSystem` 是 Modern.js 中废弃的配置项。
+
+从 Modern.js vMAJOR_VERSION.33.0 版本开始，你可以使用 Tailwind CSS 的 `theme` 配置项来代替 `source.designSystem`，不再需要将 `theme` 配置拆分并设置到 `designSystem` 上。
+
+- 旧版本用法：
+
+```ts title="modern.config.ts"
+const { theme, ...rest } = tailwindConfig;
+
+export default {
+ tools: {
+ tailwindcss: rest,
+ },
+ source: {
+ designSystem: theme,
+ },
+};
+```
+
+- 当前版本用法：
+
+```ts title="modern.config.ts"
+export default {
+ tools: {
+ tailwindcss: tailwindConfig,
+ },
+};
+```
diff --git a/packages/document/module-doc/docs/en/api/config/build-config.mdx b/packages/document/module-doc/docs/en/api/config/build-config.mdx
index 04ff7df7ade4..8dd6a4cabe71 100644
--- a/packages/document/module-doc/docs/en/api/config/build-config.mdx
+++ b/packages/document/module-doc/docs/en/api/config/build-config.mdx
@@ -1112,7 +1112,7 @@ The rest of the usage is the same as Tailwind CSS: [Quick Portal](https://tailwi
Please note that:
- 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}`.
-- If you are using the [designSystem](/api/config/design-system) configuration option simultaneously, the `theme` configuration of Tailwind CSS will be overridden by the value of `designSystem`.
+- If you are using the `designSystem` configuration option simultaneously, the `theme` configuration of Tailwind CSS will be overridden by the value of `designSystem`.
The usage of other configurations follows the same approach as the official usage of Tailwind CSS. Please refer to [tailwindcss - Configuration](https://tailwindcss.com/docs/configuration) for more details.
@@ -1265,7 +1265,7 @@ At this point the umd artifact will go to mount on `global.myLib`
- The module name of the umd artifact must not conflict with the global variable name.
- Module names will be converted to camelCase, e.g. `my-lib` will be converted to `myLib`, refer to [toIdentifier](https://github.com/babel/babel/blob/main/packages/babel-types/src/converters/toIdentifier.ts).
-:::
+ :::
Also the function form can take one parameter, which is the output path of the current package file
diff --git a/packages/document/module-doc/docs/en/api/config/design-system.md b/packages/document/module-doc/docs/en/api/config/design-system.md
deleted file mode 100644
index aec4b0c57ec9..000000000000
--- a/packages/document/module-doc/docs/en/api/config/design-system.md
+++ /dev/null
@@ -1,1166 +0,0 @@
----
-sidebar_position: 3
----
-
-# designSystem
-
-This chapter describes the configuration related to designSystem.
-
-:::tip
-The Tailwind CSS feature needs to be enabled first via `pnpm run new`.
-:::
-
-- Type: `object`
-- Default: `see configuration details below`.
-
-
- designSystem configuration details
-
-```js
-const designSystem = {
- screens: {
- sm: '640px',
- md: '768px',
- lg: '1024px',
- xl: '1280px',
- },
- colors: {
- transparent: 'transparent',
- current: 'currentColor',
-
- black: '#000',
- white: '#fff',
-
- gray: {
- 100: '#f7fafc',
- 200: '#edf2f7',
- 300: '#e2e8f0',
- 400: '#cbd5e0',
- 500: '#a0aec0',
- 600: '#718096',
- 700: '#4a5568',
- 800: '#2d3748',
- 900: '#1a202c',
- },
- red: {
- 100: '#fff5f5',
- 200: '#fed7d7',
- 300: '#feb2b2',
- 400: '#fc8181',
- 500: '#f56565',
- 600: '#e53e3e',
- 700: '#c53030',
- 800: '#9b2c2c',
- 900: '#742a2a',
- },
- orange: {
- 100: '#fffaf0',
- 200: '#feebc8',
- 300: '#fbd38d',
- 400: '#f6ad55',
- 500: '#ed8936',
- 600: '#dd6b20',
- 700: '#c05621',
- 800: '#9c4221',
- 900: '#7b341e',
- },
- yellow: {
- 100: '#fffff0',
- 200: '#fefcbf',
- 300: '#faf089',
- 400: '#f6e05e',
- 500: '#ecc94b',
- 600: '#d69e2e',
- 700: '#b7791f',
- 800: '#975a16',
- 900: '#744210',
- },
- green: {
- 100: '#f0fff4',
- 200: '#c6f6d5',
- 300: '#9ae6b4',
- 400: '#68d391',
- 500: '#48bb78',
- 600: '#38a169',
- 700: '#2f855a',
- 800: '#276749',
- 900: '#22543d',
- },
- teal: {
- 100: '#e6fffa',
- 200: '#b2f5ea',
- 300: '#81e6d9',
- 400: '#4fd1c5',
- 500: '#38b2ac',
- 600: '#319795',
- 700: '#2c7a7b',
- 800: '#285e61',
- 900: '#234e52',
- },
- blue: {
- 100: '#ebf8ff',
- 200: '#bee3f8',
- 300: '#90cdf4',
- 400: '#63b3ed',
- 500: '#4299e1',
- 600: '#3182ce',
- 700: '#2b6cb0',
- 800: '#2c5282',
- 900: '#2a4365',
- },
- indigo: {
- 100: '#ebf4ff',
- 200: '#c3dafe',
- 300: '#a3bffa',
- 400: '#7f9cf5',
- 500: '#667eea',
- 600: '#5a67d8',
- 700: '#4c51bf',
- 800: '#434190',
- 900: '#3c366b',
- },
- purple: {
- 100: '#faf5ff',
- 200: '#e9d8fd',
- 300: '#d6bcfa',
- 400: '#b794f4',
- 500: '#9f7aea',
- 600: '#805ad5',
- 700: '#6b46c1',
- 800: '#553c9a',
- 900: '#44337a',
- },
- pink: {
- 100: '#fff5f7',
- 200: '#fed7e2',
- 300: '#fbb6ce',
- 400: '#f687b3',
- 500: '#ed64a6',
- 600: '#d53f8c',
- 700: '#b83280',
- 800: '#97266d',
- 900: '#702459',
- },
- },
- spacing: {
- px: '1px',
- 0: '0',
- 1: '0.25rem',
- 2: '0.5rem',
- 3: '0.75rem',
- 4: '1rem',
- 5: '1.25rem',
- 6: '1.5rem',
- 8: '2rem',
- 10: '2.5rem',
- 12: '3rem',
- 16: '4rem',
- 20: '5rem',
- 24: '6rem',
- 32: '8rem',
- 40: '10rem',
- 48: '12rem',
- 56: '14rem',
- 64: '16rem',
- },
- backgroundColor: theme => theme('colors'),
- backgroundOpacity: theme => theme('opacity'),
- backgroundPosition: {
- bottom: 'bottom',
- center: 'center',
- left: 'left',
- 'left-bottom': 'left bottom',
- 'left-top': 'left top',
- right: 'right',
- 'right-bottom': 'right bottom',
- 'right-top': 'right top',
- top: 'top',
- },
- backgroundSize: {
- auto: 'auto',
- cover: 'cover',
- contain: 'contain',
- },
- borderColor: theme => ({
- ...theme('colors'),
- default: theme('colors.gray.300', 'currentColor'),
- }),
- borderOpacity: theme => theme('opacity'),
- borderRadius: {
- none: '0',
- sm: '0.125rem',
- default: '0.25rem',
- md: '0.375rem',
- lg: '0.5rem',
- full: '9999px',
- },
- borderWidth: {
- default: '1px',
- 0: '0',
- 2: '2px',
- 4: '4px',
- 8: '8px',
- },
- boxShadow: {
- xs: '0 0 0 1px rgba(0, 0, 0, 0.05)',
- sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
- default: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
- md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
- lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
- xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
- '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
- inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
- outline: '0 0 0 3px rgba(66, 153, 225, 0.5)',
- none: 'none',
- },
- container: {},
- cursor: {
- auto: 'auto',
- default: 'default',
- pointer: 'pointer',
- wait: 'wait',
- text: 'text',
- move: 'move',
- 'not-allowed': 'not-allowed',
- },
- divideColor: theme => theme('borderColor'),
- divideOpacity: theme => theme('borderOpacity'),
- divideWidth: theme => theme('borderWidth'),
- fill: {
- current: 'currentColor',
- },
- flex: {
- 1: '1 1 0%',
- auto: '1 1 auto',
- initial: '0 1 auto',
- none: 'none',
- },
- flexGrow: {
- 0: '0',
- default: '1',
- },
- flexShrink: {
- 0: '0',
- default: '1',
- },
- fontFamily: {
- sans: [
- 'system-ui',
- '-apple-system',
- 'BlinkMacSystemFont',
- '"Segoe UI"',
- 'Roboto',
- '"Helvetica Neue"',
- 'Arial',
- '"Noto Sans"',
- 'sans-serif',
- '"Apple Color Emoji"',
- '"Segoe UI Emoji"',
- '"Segoe UI Symbol"',
- '"Noto Color Emoji"',
- ],
- serif: ['Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'],
- mono: [
- 'Menlo',
- 'Monaco',
- 'Consolas',
- '"Liberation Mono"',
- '"Courier New"',
- 'monospace',
- ],
- },
- fontSize: {
- xs: '0.75rem',
- sm: '0.875rem',
- base: '1rem',
- lg: '1.125rem',
- xl: '1.25rem',
- '2xl': '1.5rem',
- '3xl': '1.875rem',
- '4xl': '2.25rem',
- '5xl': '3rem',
- '6xl': '4rem',
- },
- fontWeight: {
- hairline: '100',
- thin: '200',
- light: '300',
- normal: '400',
- medium: '500',
- semibold: '600',
- bold: '700',
- extrabold: '800',
- black: '900',
- },
- height: theme => ({
- auto: 'auto',
- ...theme('spacing'),
- full: '100%',
- screen: '100vh',
- }),
- inset: {
- 0: '0',
- auto: 'auto',
- },
- letterSpacing: {
- tighter: '-0.05em',
- tight: '-0.025em',
- normal: '0',
- wide: '0.025em',
- wider: '0.05em',
- widest: '0.1em',
- },
- lineHeight: {
- none: '1',
- tight: '1.25',
- snug: '1.375',
- normal: '1.5',
- relaxed: '1.625',
- loose: '2',
- 3: '.75rem',
- 4: '1rem',
- 5: '1.25rem',
- 6: '1.5rem',
- 7: '1.75rem',
- 8: '2rem',
- 9: '2.25rem',
- 10: '2.5rem',
- },
- listStyleType: {
- none: 'none',
- disc: 'disc',
- decimal: 'decimal',
- },
- margin: (theme, { negative }) => ({
- auto: 'auto',
- ...theme('spacing'),
- ...negative(theme('spacing')),
- }),
- maxHeight: {
- full: '100%',
- screen: '100vh',
- },
- maxWidth: (theme, { breakpoints }) => ({
- none: 'none',
- xs: '20rem',
- sm: '24rem',
- md: '28rem',
- lg: '32rem',
- xl: '36rem',
- '2xl': '42rem',
- '3xl': '48rem',
- '4xl': '56rem',
- '5xl': '64rem',
- '6xl': '72rem',
- full: '100%',
- ...breakpoints(theme('screens')),
- }),
- minHeight: {
- 0: '0',
- full: '100%',
- screen: '100vh',
- },
- minWidth: {
- 0: '0',
- full: '100%',
- },
- objectPosition: {
- bottom: 'bottom',
- center: 'center',
- left: 'left',
- 'left-bottom': 'left bottom',
- 'left-top': 'left top',
- right: 'right',
- 'right-bottom': 'right bottom',
- 'right-top': 'right top',
- top: 'top',
- },
- opacity: {
- 0: '0',
- 25: '0.25',
- 50: '0.5',
- 75: '0.75',
- 100: '1',
- },
- order: {
- first: '-9999',
- last: '9999',
- none: '0',
- 1: '1',
- 2: '2',
- 3: '3',
- 4: '4',
- 5: '5',
- 6: '6',
- 7: '7',
- 8: '8',
- 9: '9',
- 10: '10',
- 11: '11',
- 12: '12',
- },
- padding: theme => theme('spacing'),
- placeholderColor: theme => theme('colors'),
- placeholderOpacity: theme => theme('opacity'),
- space: (theme, { negative }) => ({
- ...theme('spacing'),
- ...negative(theme('spacing')),
- }),
- stroke: {
- current: 'currentColor',
- },
- strokeWidth: {
- 0: '0',
- 1: '1',
- 2: '2',
- },
- textColor: theme => theme('colors'),
- textOpacity: theme => theme('opacity'),
- width: theme => ({
- auto: 'auto',
- ...theme('spacing'),
- '1/2': '50%',
- '1/3': '33.333333%',
- '2/3': '66.666667%',
- '1/4': '25%',
- '2/4': '50%',
- '3/4': '75%',
- '1/5': '20%',
- '2/5': '40%',
- '3/5': '60%',
- '4/5': '80%',
- '1/6': '16.666667%',
- '2/6': '33.333333%',
- '3/6': '50%',
- '4/6': '66.666667%',
- '5/6': '83.333333%',
- '1/12': '8.333333%',
- '2/12': '16.666667%',
- '3/12': '25%',
- '4/12': '33.333333%',
- '5/12': '41.666667%',
- '6/12': '50%',
- '7/12': '58.333333%',
- '8/12': '66.666667%',
- '9/12': '75%',
- '10/12': '83.333333%',
- '11/12': '91.666667%',
- full: '100%',
- screen: '100vw',
- }),
- zIndex: {
- auto: 'auto',
- 0: '0',
- 10: '10',
- 20: '20',
- 30: '30',
- 40: '40',
- 50: '50',
- },
- gap: theme => theme('spacing'),
- gridTemplateColumns: {
- none: 'none',
- 1: 'repeat(1, minmax(0, 1fr))',
- 2: 'repeat(2, minmax(0, 1fr))',
- 3: 'repeat(3, minmax(0, 1fr))',
- 4: 'repeat(4, minmax(0, 1fr))',
- 5: 'repeat(5, minmax(0, 1fr))',
- 6: 'repeat(6, minmax(0, 1fr))',
- 7: 'repeat(7, minmax(0, 1fr))',
- 8: 'repeat(8, minmax(0, 1fr))',
- 9: 'repeat(9, minmax(0, 1fr))',
- 10: 'repeat(10, minmax(0, 1fr))',
- 11: 'repeat(11, minmax(0, 1fr))',
- 12: 'repeat(12, minmax(0, 1fr))',
- },
- gridColumn: {
- auto: 'auto',
- 'span-1': 'span 1 / span 1',
- 'span-2': 'span 2 / span 2',
- 'span-3': 'span 3 / span 3',
- 'span-4': 'span 4 / span 4',
- 'span-5': 'span 5 / span 5',
- 'span-6': 'span 6 / span 6',
- 'span-7': 'span 7 / span 7',
- 'span-8': 'span 8 / span 8',
- 'span-9': 'span 9 / span 9',
- 'span-10': 'span 10 / span 10',
- 'span-11': 'span 11 / span 11',
- 'span-12': 'span 12 / span 12',
- },
- gridColumnStart: {
- auto: 'auto',
- 1: '1',
- 2: '2',
- 3: '3',
- 4: '4',
- 5: '5',
- 6: '6',
- 7: '7',
- 8: '8',
- 9: '9',
- 10: '10',
- 11: '11',
- 12: '12',
- 13: '13',
- },
- gridColumnEnd: {
- auto: 'auto',
- 1: '1',
- 2: '2',
- 3: '3',
- 4: '4',
- 5: '5',
- 6: '6',
- 7: '7',
- 8: '8',
- 9: '9',
- 10: '10',
- 11: '11',
- 12: '12',
- 13: '13',
- },
- gridTemplateRows: {
- none: 'none',
- 1: 'repeat(1, minmax(0, 1fr))',
- 2: 'repeat(2, minmax(0, 1fr))',
- 3: 'repeat(3, minmax(0, 1fr))',
- 4: 'repeat(4, minmax(0, 1fr))',
- 5: 'repeat(5, minmax(0, 1fr))',
- 6: 'repeat(6, minmax(0, 1fr))',
- },
- gridRow: {
- auto: 'auto',
- 'span-1': 'span 1 / span 1',
- 'span-2': 'span 2 / span 2',
- 'span-3': 'span 3 / span 3',
- 'span-4': 'span 4 / span 4',
- 'span-5': 'span 5 / span 5',
- 'span-6': 'span 6 / span 6',
- },
- gridRowStart: {
- auto: 'auto',
- 1: '1',
- 2: '2',
- 3: '3',
- 4: '4',
- 5: '5',
- 6: '6',
- 7: '7',
- },
- gridRowEnd: {
- auto: 'auto',
- 1: '1',
- 2: '2',
- 3: '3',
- 4: '4',
- 5: '5',
- 6: '6',
- 7: '7',
- },
- transformOrigin: {
- center: 'center',
- top: 'top',
- 'top-right': 'top right',
- right: 'right',
- 'bottom-right': 'bottom right',
- bottom: 'bottom',
- 'bottom-left': 'bottom left',
- left: 'left',
- 'top-left': 'top left',
- },
- scale: {
- 0: '0',
- 50: '.5',
- 75: '.75',
- 90: '.9',
- 95: '.95',
- 100: '1',
- 105: '1.05',
- 110: '1.1',
- 125: '1.25',
- 150: '1.5',
- },
- rotate: {
- '-180': '-180deg',
- '-90': '-90deg',
- '-45': '-45deg',
- 0: '0',
- 45: '45deg',
- 90: '90deg',
- 180: '180deg',
- },
- translate: (theme, { negative }) => ({
- ...theme('spacing'),
- ...negative(theme('spacing')),
- '-full': '-100%',
- '-1/2': '-50%',
- '1/2': '50%',
- full: '100%',
- }),
- skew: {
- '-12': '-12deg',
- '-6': '-6deg',
- '-3': '-3deg',
- 0: '0',
- 3: '3deg',
- 6: '6deg',
- 12: '12deg',
- },
- transitionProperty: {
- none: 'none',
- all: 'all',
- default:
- 'background-color, border-color, color, fill, stroke, opacity, box-shadow, transform',
- colors: 'background-color, border-color, color, fill, stroke',
- opacity: 'opacity',
- shadow: 'box-shadow',
- transform: 'transform',
- },
- transitionTimingFunction: {
- linear: 'linear',
- in: 'cubic-bezier(0.4, 0, 1, 1)',
- out: 'cubic-bezier(0, 0, 0.2, 1)',
- 'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
- },
- transitionDuration: {
- 75: '75ms',
- 100: '100ms',
- 150: '150ms',
- 200: '200ms',
- 300: '300ms',
- 500: '500ms',
- 700: '700ms',
- 1000: '1000ms',
- },
- transitionDelay: {
- 75: '75ms',
- 100: '100ms',
- 150: '150ms',
- 200: '200ms',
- 300: '300ms',
- 500: '500ms',
- 700: '700ms',
- 1000: '1000ms',
- },
-};
-```
-
-:::tip
-More about [Tailwind CSS configuration](https://tailwindcss.com/docs/configuration#theme)
-:::
-
-
-
-The `designSystem` is used to define the project's color palette, typographic scales (Typographic Scales or Type Scale), font list, breakpoints, border rounding values, etc. Since Modern.js borrows the design approach from Tailwind Theme and integrates with Tailwind CSS internally, `designSystem` is used in the same way as Tailwind CSS Theme
-
-The `designSystem` object contains the `screens`, `colors` and `spacing` properties, as well as each customizable core plugin.
-
-## Screens
-
-The responsive breakpoints in your project can be customized using `screens`: the
-
-```js
-const designSystem = {
- screens: {
- sm: '640px',
- md: '768px',
- lg: '1024px',
- xl: '1280px',
- },
-};
-```
-
-where the property name in the `screens` object is the screen name (used as a prefix for the adaptive utility variants generated by `Tailwind CSS`, e.g. `md:text-center`) and the value is the `min-width` at which the breakpoint should start.
-
-Default breakpoints are inspired by common device resolutions: the
-
-```js
-const designSystem = {
- screens: {
- sm: '640px',
- // => @media (min-width: 640px) { ... }
-
- md: '768px',
- // => @media (min-width: 768px) { ... }
-
- lg: '1024px',
- // => @media (min-width: 1024px) { ... }
-
- xl: '1280px',
- // => @media (min-width: 1280px) { ... }
- },
-};
-```
-
-You can use any name you like as a breakpoint property in your project: the
-
-```js
-const designSystem = {
- screens: {
- tablet: '640px',
- // => @media (min-width: 640px) { ... }
-
- laptop: '1024px',
- // => @media (min-width: 1024px) { ... }
-
- desktop: '1280px',
- // => @media (min-width: 1280px) { ... }
- },
-};
-```
-
-These screen names are reflected in `utilities`, so `text-center` now looks like this
-
-```css
-.text-center {
- text-align: center;
-}
-
-@media (min-width: 640px) {
- .tablet\:text-center {
- text-align: center;
- }
-}
-
-@media (min-width: 1024px) {
- .laptop\:text-center {
- text-align: center;
- }
-}
-
-@media (min-width: 1280px) {
- .desktop\:text-center {
- text-align: center;
- }
-}
-```
-
-### Max-width breakpoints
-
-To use the `max-width` breakpoint instead of `min-width`, you can specify the screen as an object with the `max` attribute.
-
-```js
-const designSystem = {
- screens: {
- xl: { max: '1279px' }
- // => @media (max-width: 1279px) { ... }
-
- lg: { max: '1023px' },
- // => @media (max-width: 1023px) { ... }
-
- md: { max: '767px' },
- // => @media (max-width: 767px) { ... }
-
- sm: { max: '639px' },
- // => @media (max-width: 639px) { ... }
- },
-};
-```
-
-If necessary, to create breakpoints with `min-width` and `max-width` definitions, e.g.
-
-```js
-const designSystem = {
- screens: {
- sm: { min: '640px', max: '767px' }
- md: { min: '768px', max: '1023px' }
- lg: { min: '1024px', max: '1279px' }, lg: { min: '1024px', max: '1279px' },
- xl: { min: '1280px' }
- },
-};
-```
-
-### Multiple range breakpoints
-
-Sometimes it can be useful to apply a single breakpoint definition to multiple scopes.
-
-For example, suppose you have a `sidebar` and want the breakpoint to be based on the width of the content area rather than the entire viewport. You can simulate this situation by using a smaller breakpoint style when the `sidebar` is visible and the content area is narrowed: the
-
-```js
-const designSystem = {
- screens: {
- sm: '500px',
- md: [
- // Sidebar appears at 768px, so revert to `sm:` styles between 768px
- // and 868px, after which the main content area is wide enough again to
- // apply the `md:` styles.
- { min: '668px', max: '767px' }
- { min: '868px' }, { min: '868px' },
- ],
- lg: '1100px',
- xl: '1400px',
- },
-};
-```
-
-### Custom media queries
-
-If a fully customizable media query is required for a breakpoint, an object with the `raw` attribute can be used.
-
-```js
-const designSystem = {
- extend: {
- screens: {
- portrait: { raw: '(orientation: portrait)' },
- // => @media (orientation: portrait) { ... }
- },
- },
-};
-```
-
-### Print styles
-
-The `raw` option may be particularly useful if you need to apply different styles to printing.
-
-All that needs to be done is to add a `print` under `designSystem.extend.screens`.
-
-```js
-const designSystem = {
- extend: {
- screens: {
- print: { raw: 'print' },
- // => @media print { ... }
- },
- },
-};
-```
-
-Then, a class such as `print:text-black` can be used to specify a style that is applied only when someone tries to print a page: ``
-
-```html
-
-
-
-```
-
-### Dark Mode
-
-`raw` 选项可以用于实现 “暗模式” 屏幕：
-
-```js
-const designSystem = {
- extend: {
- screens: {
- dark: { raw: '(prefers-color-scheme: dark)' },
- // => @media (prefers-color-scheme: dark) { ... }
- },
- },
-};
-```
-
-然后，您可以使用 `dark:` 前缀在暗模式下为元素设置不同的样式：
-
-```html
-
-
-
-```
-
-请注意，由于这些 `screen variants` 是在 `Tailwind CSS` 中实现的，因此**无法使用这种方法将断点与暗模式结合使用** ，例如 `md:dark:text-gray-300` 将不起作用。
-
-## Colors
-
-`colors` 属性可让您自定义项目的全局调色板。
-
-```js
-const designSystem = {
- colors: {
- transparent: 'transparent',
- black: '#000',
- white: '#fff',
- gray: {
- 100: '#f7fafc',
- // ...
- 900: '#1a202c',
- },
-
- // ...
- },
-};
-```
-
-By default, these colors are inherited by the `backgroundColor`, `textColor` and `borderColor` core plugins.
-
-To learn more, you can check out: [Customizing Colors](https://tailwindcss.com/docs/customizing-colors).
-
-## Spacing
-
-The global spacing and scaling of items can be customized using the `space` attribute: the
-
-```js
-const designSystem = {
- spacing: {
- px: '1px',
- 0: '0',
- 1: '0.25rem',
- 2: '0.5rem',
- 3: '0.75rem',
- 4: '1rem',
- 5: '1.25rem',
- 6: '1.5rem',
- 8: '2rem',
- 10: '2.5rem',
- 12: '3rem',
- 16: '4rem',
- 20: '5rem',
- 24: '6rem',
- 32: '8rem',
- 40: '10rem',
- 48: '12rem',
- 56: '14rem',
- 64: '16rem',
- },
-};
-```
-
-By default, these values are inherited by the `padding`, `margin`, `negativeMargin`, `width` and `height` core plugins.
-
-To learn more, see [Customizing Spacing](https://tailwindcss.com/docs/customizing-spacing).
-
-## Core plugins
-
-The rest of the theme section is used to configure the values available for each core plugin.
-
-For example, the `borderRadius` property allows you to customize the ``utilities` that will generate the rounded corners.
-
-```js
-const designSystem = {
- borderRadius: {
- none: '0',
- sm: '.125rem',
- default: '.25rem',
- lg: '.5rem',
- full: '9999px',
- },
-};
-```
-
-** The attribute name determines the suffix of the generated class, and the value determines the value of the actual CSS declaration. **
-The example `borderRadius` configuration above will generate the following CSS classes.
-
-```css
-.rounded-none {
- border-radius: 0;
-}
-.rounded-sm {
- border-radius: 0.125rem;
-}
-.rounded {
- border-radius: 0.25rem;
-}
-.rounded-lg {
- border-radius: 0.5rem;
-}
-.rounded-full {
- border-radius: 9999px;
-}
-```
-
-You will notice that the `rounded` class is created without the suffix in the theme configuration using the `default` attribute. This is a common convention in Tailwind CSS supported by many (though not all) of the core plugins.
-
-To learn more about customizing a specific core plugin, please visit the documentation for that plugin.
-
-## Customizing the default configuration
-
-Out of the box, your project will automatically inherit values from the default theme configuration. If you want to customize the default theme, there are several different options depending on the goal.
-
-### Override the default configuration
-
-To override the options in the default configuration, add the properties to be overridden to `designSystem` at
-
-```js title="modern.config.ts"
-import { defineConfig } from '@modern-js/module-tools';
-
-const designSystem = {
- // Replaces all of the default `opacity` values
- opacity: {
- 0: '0',
- 20: '0.2',
- 40: '0.4',
- 60: '0.6',
- 80: '0.8',
- 100: '1',
- },
-};
-
-export default defineConfig({
- designSystem,
-});
-```
-
-This will completely replace the default property configuration, so in the above example, the default `opacity utilities` will not be generated.
-
-Any properties you do not provide will be inherited from the default theme, so in the example above, the default theme configuration for color, spacing, border rounding, background position, etc. will be retained.
-
-### Extending the default configuration
-
-If you want to keep the default values of the theme options but add new values, add the extensions under the `designSystem.extend` property.
-
-For example, if you want to add an additional breakpoint but keep the existing one, you can extend the `screens` property with.
-
-```js title="modern.config.ts"
-import { defineConfig } from '@modern-js/module-tools';
-
-const designSystem = {
- extend: {
- // Adds a new breakpoint in addition to the default breakpoints
- screens: {
- '2xl': '1440px',
- },
- },
-};
-
-export default defineConfig({
- designSystem,
-});
-```
-
-You can certainly override some parts of the default theme and extend other parts of the default theme in the same configuration: the
-
-```js title="modern.config.ts"
-import { defineConfig } from '@modern-js/module-tools';
-
-const designSystem = {
- opacity: {
- 0: '0',
- 20: '0.2',
- 40: '0.4',
- 60: '0.6',
- 80: '0.8',
- 100: '1',
- },
- extend: {
- screens: {
- '2xl': '1440px',
- },
- },
-};
-
-export default defineConfig({
- designSystem,
-});
-```
-
-### Referencing other values
-
-If you need to reference another value in the configuration, you can do so by providing a closure function instead of a static value. The function will receive the `theme()` function as an argument, and you can use this function to find other values in the configuration using a dot representation.
-
-For example, you can generate `fill` utilities for each color in the palette by referring to `theme('colors')` on the `fill` configuration.
-
-```js title="modern.config.ts"
-import { defineConfig } from '@modern-js/module-tools';
-
-const designSystem = {
- colors: {
- // ...
- },
- fill: theme => theme('colors'),
-};
-
-export default defineConfig({
- designSystem,
-});
-```
-
-The `theme()` function tries to find the value you are looking for from an already fully merged configuration object, so it can reference your own custom settings as well as the default theme value. It also works recursively, so as long as there is a static value at the end of the chain, it can resolve the value you are looking for.
-
-**Reference to the default configuration**
-
-If for any reason you want to reference a value in the default configuration, you can import it from `tailwindcss/defaultTheme`. A useful example would be to add one of the fonts provided by the default configuration to.
-
-```js title="modern.config.ts"
-import { defineConfig } from '@modern-js/module-tools';
-
-const defaultTheme = require('tailwindcss/defaultTheme');
-
-const designSystem = {
- extend: {
- fontFamily: {
- sans: ['Lato', ... .defaultTheme.fontFamily.sans],
- },
- },
-};
-
-export default defineConfig({
- designSystem,
-});
-```
-
-### Disabling the entire core plugin
-
-If you don't want to generate any classes for a core plugin, it's better to set the plugin to `false` in the `corePlugins` configuration, rather than providing an empty object for the property in the configuration: ``
-
-```js
-// Don't assign an empty object in your theme configuration
-
-const designSystem = {
- opacity: {},
-};
-
-// Do disable the plugin in your corePlugins configuration
-const designSyttem = {
- corePlugins: {
- opacity: { false,
- },
-};
-```
-
-The end result is the same, but since many core plugins don't expose any configuration, it's best to keep it consistent by only disabling them with corePlugins anyway.
-
-### Adding your own key
-
-In many cases it may be useful to add your own properties to the configuration object.
-
-One example is to add new properties for multiplexing between multiple core plugins. For example, you can extract a `positions` object that both the `backgroundPosition` and `objectPosition` plugins can refer to.
-
-```js
-const designSystem = {
- positions: {
- bottom: 'bottom',
- center: 'center',
- left: 'left',
- 'left-bottom': 'left bottom',
- 'left-top': 'left top',
- right: 'right',
- 'right-bottom': 'right bottom',
- 'right-top': 'right top',
- top: 'top',
- },
- backgroundPosition: theme => theme('positions'),
- objectPosition: theme => theme('positions'),
-};
-```
-
-Another example is to add a new property to a custom plugin for referencing. For example, if you write a gradient plugin for your project, you can add a gradient property to the theme object referenced by that plugin.
-
-```js title="modern.config.ts"
-import { defineConfig } from '@modern-js/module-tools';
-
-const designSystem = {
- gradients: theme => ({
- 'blue-green': [theme('colors.blue.500'), theme('colors.green.500')],
- 'purple-blue': [theme('colors.purple.500'), theme('colors.blue.500')],
- // ...
- }),
-};
-
-export default defineConfig({
- designSystem,
- buildConfig: {
- style: {
- postcss: {
- plugins: [require('. /plugins/gradients')],
- },
- },
- },
-});
-```
-
-## Configuration references
-
-All properties in the configuration object, except `screens`, `colors` and `spacing`, are mapped to the core plugins of `Tailwind CSS`. Since many plugins are responsible for CSS properties that accept only static sets of values (e.g., e.g., `float`), please note that not every plugin has a corresponding property in the theme object.
-
-All of these properties can also be used under the `designSystem.extend` property to extend the default theme.
-
-For more information about what all the properties do, check out this [link](https://tailwindcss.com/docs/theme#configuration-reference).
diff --git a/packages/document/module-doc/docs/en/guide/advance/theme-config.mdx b/packages/document/module-doc/docs/en/guide/advance/theme-config.mdx
deleted file mode 100644
index eacc9adb5543..000000000000
--- a/packages/document/module-doc/docs/en/guide/advance/theme-config.mdx
+++ /dev/null
@@ -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 ;
-};
-```
-
-#### `@apply` Directive
-
-Regarding [`@apply`](https://tailwindcss.com/docs/functions-and-directives#apply).
-
-```tsx title="./src/index.tsx"
-import './index.css';
-
-export default () => {
- return ;
-};
-```
-
-```css title="./src/index.css"
-.btn-primary {
- @apply bg-primary;
-}
-```
diff --git a/packages/document/module-doc/docs/en/guide/best-practices/use-tailwindcss.mdx b/packages/document/module-doc/docs/en/guide/best-practices/use-tailwindcss.mdx
index 43ff47aaaccb..71d500e12fea 100644
--- a/packages/document/module-doc/docs/en/guide/best-practices/use-tailwindcss.mdx
+++ b/packages/document/module-doc/docs/en/guide/best-practices/use-tailwindcss.mdx
@@ -258,3 +258,32 @@ var src_default = () => {
};
export { src_default as default };
```
+
+### About `designSystem` config
+
+`designSystem` is a deprecated configuration option in Module Tools.
+
+Starting from Module Tools vMAJOR_VERSION.33.0, you can use the `theme` configuration option of Tailwind CSS as a replacement for `designSystem`. It is no longer necessary to split the `theme` configuration and set it on `designSystem`.
+
+- Previous usage:
+
+```ts title="modern.config.ts"
+const { theme, ...rest } = tailwindConfig;
+
+export default {
+ style: {
+ tailwindcss: rest,
+ },
+ designSystem: theme,
+};
+```
+
+- Current usage:
+
+```ts title="modern.config.ts"
+export default {
+ style: {
+ tailwindcss: tailwindConfig,
+ },
+};
+```
diff --git a/packages/document/module-doc/docs/en/plugins/guide/setup-function.mdx b/packages/document/module-doc/docs/en/plugins/guide/setup-function.mdx
index 82f4c607ac1e..51c3ff56f825 100644
--- a/packages/document/module-doc/docs/en/plugins/guide/setup-function.mdx
+++ b/packages/document/module-doc/docs/en/plugins/guide/setup-function.mdx
@@ -63,7 +63,6 @@ const useResolvedConfigContext: () => NormalizedConfig;
interface NormalizedConfig {
buildConfig: PartialBuildConfig;
buildPreset: BuildPreset;
- designSystem?: Record;
dev: Dev;
plugins: PluginConfig;
runtime: RuntimeConfig;
diff --git a/packages/document/module-doc/docs/zh/api/config/build-config.mdx b/packages/document/module-doc/docs/zh/api/config/build-config.mdx
index 340b2907f2e1..590f872436f0 100644
--- a/packages/document/module-doc/docs/zh/api/config/build-config.mdx
+++ b/packages/document/module-doc/docs/zh/api/config/build-config.mdx
@@ -1112,7 +1112,7 @@ const tailwind = {
注意：
- 如果你同时使用了 `tailwind.config.{ts,js}` 文件和 `tools.tailwindcss` 选项，那么 `tools.tailwindcss` 定义的配置会优先生效，并覆盖 `tailwind.config.{ts,js}` 中定义的内容。
-- 如果你同时使用了 [designSystem](/api/config/design-system) 配置项，那么 Tailwind CSS 的 `theme` 配置将会被 `designSystem` 的值所覆盖。
+- 如果你同时使用了 `designSystem` 配置项，那么 Tailwind CSS 的 `theme` 配置将会被 `designSystem` 的值所覆盖。
其他配置的使用方式与 Tailwind CSS 官方用法一致，请参考 [tailwindcss - Configuration](https://tailwindcss.com/docs/configuration)。
@@ -1191,7 +1191,7 @@ export default defineConfig({
比如：
-``` ts title="input.js"
+```ts title="input.js"
import _ from 'lodash';
import { add } from 'lodash/fp';
diff --git a/packages/document/module-doc/docs/zh/api/config/design-system.md b/packages/document/module-doc/docs/zh/api/config/design-system.md
deleted file mode 100644
index 49225f555391..000000000000
--- a/packages/document/module-doc/docs/zh/api/config/design-system.md
+++ /dev/null
@@ -1,1166 +0,0 @@
----
-sidebar_position: 3
----
-
-# designSystem
-
-本章描述了有关 designSystem 相关的配置。
-
-:::tip
-需要先通过 `pnpm run new` 启用 Tailwind CSS 功能。
-:::
-
-- 类型：`object`
-- 默认值: `见下方配置详情`。
-
-
- designSystem 配置详情
-
-```js
-const designSystem = {
- screens: {
- sm: '640px',
- md: '768px',
- lg: '1024px',
- xl: '1280px',
- },
- colors: {
- transparent: 'transparent',
- current: 'currentColor',
-
- black: '#000',
- white: '#fff',
-
- gray: {
- 100: '#f7fafc',
- 200: '#edf2f7',
- 300: '#e2e8f0',
- 400: '#cbd5e0',
- 500: '#a0aec0',
- 600: '#718096',
- 700: '#4a5568',
- 800: '#2d3748',
- 900: '#1a202c',
- },
- red: {
- 100: '#fff5f5',
- 200: '#fed7d7',
- 300: '#feb2b2',
- 400: '#fc8181',
- 500: '#f56565',
- 600: '#e53e3e',
- 700: '#c53030',
- 800: '#9b2c2c',
- 900: '#742a2a',
- },
- orange: {
- 100: '#fffaf0',
- 200: '#feebc8',
- 300: '#fbd38d',
- 400: '#f6ad55',
- 500: '#ed8936',
- 600: '#dd6b20',
- 700: '#c05621',
- 800: '#9c4221',
- 900: '#7b341e',
- },
- yellow: {
- 100: '#fffff0',
- 200: '#fefcbf',
- 300: '#faf089',
- 400: '#f6e05e',
- 500: '#ecc94b',
- 600: '#d69e2e',
- 700: '#b7791f',
- 800: '#975a16',
- 900: '#744210',
- },
- green: {
- 100: '#f0fff4',
- 200: '#c6f6d5',
- 300: '#9ae6b4',
- 400: '#68d391',
- 500: '#48bb78',
- 600: '#38a169',
- 700: '#2f855a',
- 800: '#276749',
- 900: '#22543d',
- },
- teal: {
- 100: '#e6fffa',
- 200: '#b2f5ea',
- 300: '#81e6d9',
- 400: '#4fd1c5',
- 500: '#38b2ac',
- 600: '#319795',
- 700: '#2c7a7b',
- 800: '#285e61',
- 900: '#234e52',
- },
- blue: {
- 100: '#ebf8ff',
- 200: '#bee3f8',
- 300: '#90cdf4',
- 400: '#63b3ed',
- 500: '#4299e1',
- 600: '#3182ce',
- 700: '#2b6cb0',
- 800: '#2c5282',
- 900: '#2a4365',
- },
- indigo: {
- 100: '#ebf4ff',
- 200: '#c3dafe',
- 300: '#a3bffa',
- 400: '#7f9cf5',
- 500: '#667eea',
- 600: '#5a67d8',
- 700: '#4c51bf',
- 800: '#434190',
- 900: '#3c366b',
- },
- purple: {
- 100: '#faf5ff',
- 200: '#e9d8fd',
- 300: '#d6bcfa',
- 400: '#b794f4',
- 500: '#9f7aea',
- 600: '#805ad5',
- 700: '#6b46c1',
- 800: '#553c9a',
- 900: '#44337a',
- },
- pink: {
- 100: '#fff5f7',
- 200: '#fed7e2',
- 300: '#fbb6ce',
- 400: '#f687b3',
- 500: '#ed64a6',
- 600: '#d53f8c',
- 700: '#b83280',
- 800: '#97266d',
- 900: '#702459',
- },
- },
- spacing: {
- px: '1px',
- 0: '0',
- 1: '0.25rem',
- 2: '0.5rem',
- 3: '0.75rem',
- 4: '1rem',
- 5: '1.25rem',
- 6: '1.5rem',
- 8: '2rem',
- 10: '2.5rem',
- 12: '3rem',
- 16: '4rem',
- 20: '5rem',
- 24: '6rem',
- 32: '8rem',
- 40: '10rem',
- 48: '12rem',
- 56: '14rem',
- 64: '16rem',
- },
- backgroundColor: theme => theme('colors'),
- backgroundOpacity: theme => theme('opacity'),
- backgroundPosition: {
- bottom: 'bottom',
- center: 'center',
- left: 'left',
- 'left-bottom': 'left bottom',
- 'left-top': 'left top',
- right: 'right',
- 'right-bottom': 'right bottom',
- 'right-top': 'right top',
- top: 'top',
- },
- backgroundSize: {
- auto: 'auto',
- cover: 'cover',
- contain: 'contain',
- },
- borderColor: theme => ({
- ...theme('colors'),
- default: theme('colors.gray.300', 'currentColor'),
- }),
- borderOpacity: theme => theme('opacity'),
- borderRadius: {
- none: '0',
- sm: '0.125rem',
- default: '0.25rem',
- md: '0.375rem',
- lg: '0.5rem',
- full: '9999px',
- },
- borderWidth: {
- default: '1px',
- 0: '0',
- 2: '2px',
- 4: '4px',
- 8: '8px',
- },
- boxShadow: {
- xs: '0 0 0 1px rgba(0, 0, 0, 0.05)',
- sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
- default: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
- md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
- lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
- xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
- '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
- inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
- outline: '0 0 0 3px rgba(66, 153, 225, 0.5)',
- none: 'none',
- },
- container: {},
- cursor: {
- auto: 'auto',
- default: 'default',
- pointer: 'pointer',
- wait: 'wait',
- text: 'text',
- move: 'move',
- 'not-allowed': 'not-allowed',
- },
- divideColor: theme => theme('borderColor'),
- divideOpacity: theme => theme('borderOpacity'),
- divideWidth: theme => theme('borderWidth'),
- fill: {
- current: 'currentColor',
- },
- flex: {
- 1: '1 1 0%',
- auto: '1 1 auto',
- initial: '0 1 auto',
- none: 'none',
- },
- flexGrow: {
- 0: '0',
- default: '1',
- },
- flexShrink: {
- 0: '0',
- default: '1',
- },
- fontFamily: {
- sans: [
- 'system-ui',
- '-apple-system',
- 'BlinkMacSystemFont',
- '"Segoe UI"',
- 'Roboto',
- '"Helvetica Neue"',
- 'Arial',
- '"Noto Sans"',
- 'sans-serif',
- '"Apple Color Emoji"',
- '"Segoe UI Emoji"',
- '"Segoe UI Symbol"',
- '"Noto Color Emoji"',
- ],
- serif: ['Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'],
- mono: [
- 'Menlo',
- 'Monaco',
- 'Consolas',
- '"Liberation Mono"',
- '"Courier New"',
- 'monospace',
- ],
- },
- fontSize: {
- xs: '0.75rem',
- sm: '0.875rem',
- base: '1rem',
- lg: '1.125rem',
- xl: '1.25rem',
- '2xl': '1.5rem',
- '3xl': '1.875rem',
- '4xl': '2.25rem',
- '5xl': '3rem',
- '6xl': '4rem',
- },
- fontWeight: {
- hairline: '100',
- thin: '200',
- light: '300',
- normal: '400',
- medium: '500',
- semibold: '600',
- bold: '700',
- extrabold: '800',
- black: '900',
- },
- height: theme => ({
- auto: 'auto',
- ...theme('spacing'),
- full: '100%',
- screen: '100vh',
- }),
- inset: {
- 0: '0',
- auto: 'auto',
- },
- letterSpacing: {
- tighter: '-0.05em',
- tight: '-0.025em',
- normal: '0',
- wide: '0.025em',
- wider: '0.05em',
- widest: '0.1em',
- },
- lineHeight: {
- none: '1',
- tight: '1.25',
- snug: '1.375',
- normal: '1.5',
- relaxed: '1.625',
- loose: '2',
- 3: '.75rem',
- 4: '1rem',
- 5: '1.25rem',
- 6: '1.5rem',
- 7: '1.75rem',
- 8: '2rem',
- 9: '2.25rem',
- 10: '2.5rem',
- },
- listStyleType: {
- none: 'none',
- disc: 'disc',
- decimal: 'decimal',
- },
- margin: (theme, { negative }) => ({
- auto: 'auto',
- ...theme('spacing'),
- ...negative(theme('spacing')),
- }),
- maxHeight: {
- full: '100%',
- screen: '100vh',
- },
- maxWidth: (theme, { breakpoints }) => ({
- none: 'none',
- xs: '20rem',
- sm: '24rem',
- md: '28rem',
- lg: '32rem',
- xl: '36rem',
- '2xl': '42rem',
- '3xl': '48rem',
- '4xl': '56rem',
- '5xl': '64rem',
- '6xl': '72rem',
- full: '100%',
- ...breakpoints(theme('screens')),
- }),
- minHeight: {
- 0: '0',
- full: '100%',
- screen: '100vh',
- },
- minWidth: {
- 0: '0',
- full: '100%',
- },
- objectPosition: {
- bottom: 'bottom',
- center: 'center',
- left: 'left',
- 'left-bottom': 'left bottom',
- 'left-top': 'left top',
- right: 'right',
- 'right-bottom': 'right bottom',
- 'right-top': 'right top',
- top: 'top',
- },
- opacity: {
- 0: '0',
- 25: '0.25',
- 50: '0.5',
- 75: '0.75',
- 100: '1',
- },
- order: {
- first: '-9999',
- last: '9999',
- none: '0',
- 1: '1',
- 2: '2',
- 3: '3',
- 4: '4',
- 5: '5',
- 6: '6',
- 7: '7',
- 8: '8',
- 9: '9',
- 10: '10',
- 11: '11',
- 12: '12',
- },
- padding: theme => theme('spacing'),
- placeholderColor: theme => theme('colors'),
- placeholderOpacity: theme => theme('opacity'),
- space: (theme, { negative }) => ({
- ...theme('spacing'),
- ...negative(theme('spacing')),
- }),
- stroke: {
- current: 'currentColor',
- },
- strokeWidth: {
- 0: '0',
- 1: '1',
- 2: '2',
- },
- textColor: theme => theme('colors'),
- textOpacity: theme => theme('opacity'),
- width: theme => ({
- auto: 'auto',
- ...theme('spacing'),
- '1/2': '50%',
- '1/3': '33.333333%',
- '2/3': '66.666667%',
- '1/4': '25%',
- '2/4': '50%',
- '3/4': '75%',
- '1/5': '20%',
- '2/5': '40%',
- '3/5': '60%',
- '4/5': '80%',
- '1/6': '16.666667%',
- '2/6': '33.333333%',
- '3/6': '50%',
- '4/6': '66.666667%',
- '5/6': '83.333333%',
- '1/12': '8.333333%',
- '2/12': '16.666667%',
- '3/12': '25%',
- '4/12': '33.333333%',
- '5/12': '41.666667%',
- '6/12': '50%',
- '7/12': '58.333333%',
- '8/12': '66.666667%',
- '9/12': '75%',
- '10/12': '83.333333%',
- '11/12': '91.666667%',
- full: '100%',
- screen: '100vw',
- }),
- zIndex: {
- auto: 'auto',
- 0: '0',
- 10: '10',
- 20: '20',
- 30: '30',
- 40: '40',
- 50: '50',
- },
- gap: theme => theme('spacing'),
- gridTemplateColumns: {
- none: 'none',
- 1: 'repeat(1, minmax(0, 1fr))',
- 2: 'repeat(2, minmax(0, 1fr))',
- 3: 'repeat(3, minmax(0, 1fr))',
- 4: 'repeat(4, minmax(0, 1fr))',
- 5: 'repeat(5, minmax(0, 1fr))',
- 6: 'repeat(6, minmax(0, 1fr))',
- 7: 'repeat(7, minmax(0, 1fr))',
- 8: 'repeat(8, minmax(0, 1fr))',
- 9: 'repeat(9, minmax(0, 1fr))',
- 10: 'repeat(10, minmax(0, 1fr))',
- 11: 'repeat(11, minmax(0, 1fr))',
- 12: 'repeat(12, minmax(0, 1fr))',
- },
- gridColumn: {
- auto: 'auto',
- 'span-1': 'span 1 / span 1',
- 'span-2': 'span 2 / span 2',
- 'span-3': 'span 3 / span 3',
- 'span-4': 'span 4 / span 4',
- 'span-5': 'span 5 / span 5',
- 'span-6': 'span 6 / span 6',
- 'span-7': 'span 7 / span 7',
- 'span-8': 'span 8 / span 8',
- 'span-9': 'span 9 / span 9',
- 'span-10': 'span 10 / span 10',
- 'span-11': 'span 11 / span 11',
- 'span-12': 'span 12 / span 12',
- },
- gridColumnStart: {
- auto: 'auto',
- 1: '1',
- 2: '2',
- 3: '3',
- 4: '4',
- 5: '5',
- 6: '6',
- 7: '7',
- 8: '8',
- 9: '9',
- 10: '10',
- 11: '11',
- 12: '12',
- 13: '13',
- },
- gridColumnEnd: {
- auto: 'auto',
- 1: '1',
- 2: '2',
- 3: '3',
- 4: '4',
- 5: '5',
- 6: '6',
- 7: '7',
- 8: '8',
- 9: '9',
- 10: '10',
- 11: '11',
- 12: '12',
- 13: '13',
- },
- gridTemplateRows: {
- none: 'none',
- 1: 'repeat(1, minmax(0, 1fr))',
- 2: 'repeat(2, minmax(0, 1fr))',
- 3: 'repeat(3, minmax(0, 1fr))',
- 4: 'repeat(4, minmax(0, 1fr))',
- 5: 'repeat(5, minmax(0, 1fr))',
- 6: 'repeat(6, minmax(0, 1fr))',
- },
- gridRow: {
- auto: 'auto',
- 'span-1': 'span 1 / span 1',
- 'span-2': 'span 2 / span 2',
- 'span-3': 'span 3 / span 3',
- 'span-4': 'span 4 / span 4',
- 'span-5': 'span 5 / span 5',
- 'span-6': 'span 6 / span 6',
- },
- gridRowStart: {
- auto: 'auto',
- 1: '1',
- 2: '2',
- 3: '3',
- 4: '4',
- 5: '5',
- 6: '6',
- 7: '7',
- },
- gridRowEnd: {
- auto: 'auto',
- 1: '1',
- 2: '2',
- 3: '3',
- 4: '4',
- 5: '5',
- 6: '6',
- 7: '7',
- },
- transformOrigin: {
- center: 'center',
- top: 'top',
- 'top-right': 'top right',
- right: 'right',
- 'bottom-right': 'bottom right',
- bottom: 'bottom',
- 'bottom-left': 'bottom left',
- left: 'left',
- 'top-left': 'top left',
- },
- scale: {
- 0: '0',
- 50: '.5',
- 75: '.75',
- 90: '.9',
- 95: '.95',
- 100: '1',
- 105: '1.05',
- 110: '1.1',
- 125: '1.25',
- 150: '1.5',
- },
- rotate: {
- '-180': '-180deg',
- '-90': '-90deg',
- '-45': '-45deg',
- 0: '0',
- 45: '45deg',
- 90: '90deg',
- 180: '180deg',
- },
- translate: (theme, { negative }) => ({
- ...theme('spacing'),
- ...negative(theme('spacing')),
- '-full': '-100%',
- '-1/2': '-50%',
- '1/2': '50%',
- full: '100%',
- }),
- skew: {
- '-12': '-12deg',
- '-6': '-6deg',
- '-3': '-3deg',
- 0: '0',
- 3: '3deg',
- 6: '6deg',
- 12: '12deg',
- },
- transitionProperty: {
- none: 'none',
- all: 'all',
- default:
- 'background-color, border-color, color, fill, stroke, opacity, box-shadow, transform',
- colors: 'background-color, border-color, color, fill, stroke',
- opacity: 'opacity',
- shadow: 'box-shadow',
- transform: 'transform',
- },
- transitionTimingFunction: {
- linear: 'linear',
- in: 'cubic-bezier(0.4, 0, 1, 1)',
- out: 'cubic-bezier(0, 0, 0.2, 1)',
- 'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
- },
- transitionDuration: {
- 75: '75ms',
- 100: '100ms',
- 150: '150ms',
- 200: '200ms',
- 300: '300ms',
- 500: '500ms',
- 700: '700ms',
- 1000: '1000ms',
- },
- transitionDelay: {
- 75: '75ms',
- 100: '100ms',
- 150: '150ms',
- 200: '200ms',
- 300: '300ms',
- 500: '500ms',
- 700: '700ms',
- 1000: '1000ms',
- },
-};
-```
-
-:::tip
-更多关于[Tailwind CSS 配置](https://tailwindcss.com/docs/configuration#theme)
-:::
-
-
-
-`designSystem` 用于定义项目的调色板、排版比例（Typographic Scales 或者 Type Scale）、字体列表、断点、边框圆角值等等。因为 Modern.js 借用了 Tailwind Theme 的设计方式，并且内部也集成了 Tailwind CSS，所以 `designSystem` 使用方式与 Tailwind CSS Theme 相同
-
-`designSystem` 对象包含 `screens`、`colors` 和 `spacing` 的属性，以及每个可自定义核心插件。
-
-## Screens
-
-使用`screens` 可以自定义项目中的响应断点：
-
-```js
-const designSystem = {
- screens: {
- sm: '640px',
- md: '768px',
- lg: '1024px',
- xl: '1280px',
- },
-};
-```
-
-其中 `screens` 对象里的属性名是屏幕名称（用作 `Tailwind CSS` 生成的自适应实用程序变体的前缀，例如 `md:text-center`），值是该断点应在其开始的 `min-width`。
-
-默认断点受常见设备分辨率的启发：
-
-```js
-const designSystem = {
- screens: {
- sm: '640px',
- // => @media (min-width: 640px) { ... }
-
- md: '768px',
- // => @media (min-width: 768px) { ... }
-
- lg: '1024px',
- // => @media (min-width: 1024px) { ... }
-
- xl: '1280px',
- // => @media (min-width: 1280px) { ... }
- },
-};
-```
-
-你可以在你的项目中使用任意你喜欢的名称作为断点的属性：
-
-```js
-const designSystem = {
- screens: {
- tablet: '640px',
- // => @media (min-width: 640px) { ... }
-
- laptop: '1024px',
- // => @media (min-width: 1024px) { ... }
-
- desktop: '1280px',
- // => @media (min-width: 1280px) { ... }
- },
-};
-```
-
-这些屏幕名称反映在 `utilities` 中，因此 `text-center` 现在是这样的：
-
-```css
-.text-center {
- text-align: center;
-}
-
-@media (min-width: 640px) {
- .tablet\:text-center {
- text-align: center;
- }
-}
-
-@media (min-width: 1024px) {
- .laptop\:text-center {
- text-align: center;
- }
-}
-
-@media (min-width: 1280px) {
- .desktop\:text-center {
- text-align: center;
- }
-}
-```
-
-### Max-width 断点
-
-如果要使用 `max-width` 断点而不是 `min-width`，可以将屏幕指定为具有 `max` 属性的对象：
-
-```js
-const designSystem = {
- screens: {
- xl: { max: '1279px' },
- // => @media (max-width: 1279px) { ... }
-
- lg: { max: '1023px' },
- // => @media (max-width: 1023px) { ... }
-
- md: { max: '767px' },
- // => @media (max-width: 767px) { ... }
-
- sm: { max: '639px' },
- // => @media (max-width: 639px) { ... }
- },
-};
-```
-
-如有必要，以创建带有 `min-width` 和 `max-width` 定义的断点，例如：
-
-```js
-const designSystem = {
- screens: {
- sm: { min: '640px', max: '767px' },
- md: { min: '768px', max: '1023px' },
- lg: { min: '1024px', max: '1279px' },
- xl: { min: '1280px' },
- },
-};
-```
-
-### 多个范围的断点
-
-有时，将单个断点定义应用于多个范围会很有用。
-
-例如，假设您有一个 `sidebar`，并且希望断点基于内容区域宽度而不是整个视口。您可以模拟这种情况，当 `sidebar` 可见并缩小内容区域时，断点的样式使用较小的断点样式：
-
-```js
-const designSystem = {
- screens: {
- sm: '500px',
- md: [
- // Sidebar appears at 768px, so revert to `sm:` styles between 768px
- // and 868px, after which the main content area is wide enough again to
- // apply the `md:` styles.
- { min: '668px', max: '767px' },
- { min: '868px' },
- ],
- lg: '1100px',
- xl: '1400px',
- },
-};
-```
-
-### 自定义媒体查询
-
-如果需要为断点提供完全自定义的媒体查询，则可以使用带有 `raw` 属性的对象：
-
-```js
-const designSystem = {
- extend: {
- screens: {
- portrait: { raw: '(orientation: portrait)' },
- // => @media (orientation: portrait) { ... }
- },
- },
-};
-```
-
-### Print 样式
-
-如果需要为打印应用不同的样式，则 `raw` 选项可能特别有用。
-
-需要做的就是在 `designSystem.extend.screens` 下添加一个 `print`：
-
-```js
-const designSystem = {
- extend: {
- screens: {
- print: { raw: 'print' },
- // => @media print { ... }
- },
- },
-};
-```
-
-然后，可以使用诸如 `print:text-black` 之类的类来指定仅当某人尝试打印页面时才应用的样式：
-
-```html
-
-
-
-```
-
-### Dark Mode
-
-`raw` 选项可以用于实现 “暗模式” 屏幕：
-
-```js
-const designSystem = {
- extend: {
- screens: {
- dark: { raw: '(prefers-color-scheme: dark)' },
- // => @media (prefers-color-scheme: dark) { ... }
- },
- },
-};
-```
-
-然后，您可以使用 `dark:` 前缀在暗模式下为元素设置不同的样式：
-
-```html
-
-
-
-```
-
-请注意，由于这些 `screen variants` 是在 `Tailwind CSS` 中实现的，因此**无法使用这种方法将断点与暗模式结合使用** ，例如 `md:dark:text-gray-300` 将不起作用。
-
-## Colors
-
-`colors` 属性可让您自定义项目的全局调色板。
-
-```js
-const designSystem = {
- colors: {
- transparent: 'transparent',
- black: '#000',
- white: '#fff',
- gray: {
- 100: '#f7fafc',
- // ...
- 900: '#1a202c',
- },
-
- // ...
- },
-};
-```
-
-默认情况下，这些颜色由 `backgroundColor`，`textColor` 和 `borderColor` 核心插件继承。
-
-想了解更多，可以查看：[Customizing Colors](https://tailwindcss.com/docs/customizing-colors)。
-
-## Spacing
-
-使用 `space` 属性，可以自定义项目的全局间距和缩放比例：
-
-```js
-const designSystem = {
- spacing: {
- px: '1px',
- 0: '0',
- 1: '0.25rem',
- 2: '0.5rem',
- 3: '0.75rem',
- 4: '1rem',
- 5: '1.25rem',
- 6: '1.5rem',
- 8: '2rem',
- 10: '2.5rem',
- 12: '3rem',
- 16: '4rem',
- 20: '5rem',
- 24: '6rem',
- 32: '8rem',
- 40: '10rem',
- 48: '12rem',
- 56: '14rem',
- 64: '16rem',
- },
-};
-```
-
-默认情况下，这些值由 `padding`，`margin`，`negativeMargin`，`width` 和 `height` 核心插件继承。
-
-想要了解更多，看 [Customizing Spacing](https://tailwindcss.com/docs/customizing-spacing)。
-
-## 核心插件
-
-主题部分的其余部分用于配置每个核心插件可用的值。
-
-例如，`borderRadius` 属性可让您自定义将生成的圆角的 `utilities`：
-
-```js
-const designSystem = {
- borderRadius: {
- none: '0',
- sm: '.125rem',
- default: '.25rem',
- lg: '.5rem',
- full: '9999px',
- },
-};
-```
-
-**属性名确定所生成类的后缀，值确定实际 CSS 声明的值。**
-上面的示例`borderRadius`配置将生成以下 CSS 类：
-
-```css
-.rounded-none {
- border-radius: 0;
-}
-.rounded-sm {
- border-radius: 0.125rem;
-}
-.rounded {
- border-radius: 0.25rem;
-}
-.rounded-lg {
- border-radius: 0.5rem;
-}
-.rounded-full {
- border-radius: 9999px;
-}
-```
-
-会注意到，在主题配置中使用 `default` 属性创建了不带后缀的 `rounded` 类。这是许多（尽管不是全部）核心插件支持的 Tailwind CSS 中的通用约定。
-
-要了解有关自定义特定核心插件的更多信息，请访问该插件的文档。
-
-## 自定义默认配置
-
-开箱即用，您的项目将自动从默认主题配置继承值。如果想自定义默认主题，则根据目标有几种不同的选择。
-
-### 覆盖默认配置
-
-要覆盖默认配置中的选项，请在 `designSystem` 中添加要覆盖的属性：
-
-```js title="modern.config.ts"
-import { defineConfig } from '@modern-js/module-tools';
-
-const designSystem = {
- // Replaces all of the default `opacity` values
- opacity: {
- 0: '0',
- 20: '0.2',
- 40: '0.4',
- 60: '0.6',
- 80: '0.8',
- 100: '1',
- },
-};
-
-export default defineConfig({
- designSystem,
-});
-```
-
-这将完全替换默认属性配置，因此在上面的示例中，不会生成默认的 `opacity utilities`。
-
-您未提供的任何属性都将从默认主题继承，因此在上面的示例中，将保留颜色，间距，边框圆角，背景位置等内容的默认主题配置。
-
-### 扩展默认配置
-
-如果您想保留主题选项的默认值，但又要添加新值，请在 `designSystem.extend` 属性下添加扩展的内容。
-
-例如，如果您想添加一个额外的断点但保留现有的断点，则可以扩展 `screens` 属性：
-
-```js title="modern.config.ts"
-import { defineConfig } from '@modern-js/module-tools';
-
-const designSystem = {
- extend: {
- // Adds a new breakpoint in addition to the default breakpoints
- screens: {
- '2xl': '1440px',
- },
- },
-};
-
-export default defineConfig({
- designSystem,
-});
-```
-
-您当然可以覆盖默认主题的某些部分，并在同一配置中扩展默认主题的其他部分：
-
-```js title="modern.config.ts"
-import { defineConfig } from '@modern-js/module-tools';
-
-const designSystem = {
- opacity: {
- 0: '0',
- 20: '0.2',
- 40: '0.4',
- 60: '0.6',
- 80: '0.8',
- 100: '1',
- },
- extend: {
- screens: {
- '2xl': '1440px',
- },
- },
-};
-
-export default defineConfig({
- designSystem,
-});
-```
-
-### 引用其他值
-
-如果需要在配置中引用另一个值，可以通过提供闭包函数而不是静态值来实现。函数将收到 `theme()` 函数作为参数，您可以使用该函数使用点表示法在配置中查找其他值。
-
-例如，您可以在 `fill` 配置上通过引用 `theme('colors')` 为调色板中的每种颜色生成 `fill` utilities。
-
-```js title="modern.config.ts"
-import { defineConfig } from '@modern-js/module-tools';
-
-const designSystem = {
- colors: {
- // ...
- },
- fill: theme => theme('colors'),
-};
-
-export default defineConfig({
- designSystem,
-});
-```
-
-`theme()`函数尝试从已经完全合并的配置对象中找到您要查找的值，因此它可以引用您自己的自定义设置以及默认主题值。它也可以递归工作，因此只要链末尾有一个静态值，它就可以解析您要查找的值。
-
-**引用默认配置**
-
-如果出于任何原因想要引用默认配置中的值，则可以从 `tailwindcss/defaultTheme` 导入它。一个有用的示例是，如果要将添加默认配置提供的字体中某一个字体：
-
-```js title="modern.config.ts"
-import { defineConfig } from '@modern-js/module-tools';
-
-const defaultTheme = require('tailwindcss/defaultTheme');
-
-const designSystem = {
- extend: {
- fontFamily: {
- sans: ['Lato', ...defaultTheme.fontFamily.sans],
- },
- },
-};
-
-export default defineConfig({
- designSystem,
-});
-```
-
-### 禁用整个核心插件
-
-如果您不想为某个核心插件生成任何类，则最好在 `corePlugins` 配置中将该插件设置为 `false`，而不是在配置中为该属性提供一个空对象：
-
-```js
-// Don't assign an empty object in your theme configuration
-
-const designSystem = {
- opacity: {},
-};
-
-// Do disable the plugin in your corePlugins configuration
-const designSyttem = {
- corePlugins: {
- opacity: false,
- },
-};
-```
-
-最终结果是相同的，但是由于许多核心插件未公开任何配置，因此无论如何只能使用 corePlugins 禁用它们，最好保持一致。
-
-### 添加自己的 key
-
-在很多情况下，将自己的属性添加到配置对象可能会很有用。
-
-其中一个示例是添加新属性为多个核心插件之间复用。例如，您可以提取一个 `positions`对象，`backgroundPosition` 和 `objectPosition` 插件都可以引用该对象：
-
-```js
-const designSystem = {
- positions: {
- bottom: 'bottom',
- center: 'center',
- left: 'left',
- 'left-bottom': 'left bottom',
- 'left-top': 'left top',
- right: 'right',
- 'right-bottom': 'right bottom',
- 'right-top': 'right top',
- top: 'top',
- },
- backgroundPosition: theme => theme('positions'),
- objectPosition: theme => theme('positions'),
-};
-```
-
-另一个示例是在自定义插件中添加新的属性以进行引用。例如，如果您为项目编写了渐变插件，则可以向该插件引用的主题对象添加渐变属性：
-
-```js title="modern.config.ts"
-import { defineConfig } from '@modern-js/module-tools';
-
-const designSystem = {
- gradients: theme => ({
- 'blue-green': [theme('colors.blue.500'), theme('colors.green.500')],
- 'purple-blue': [theme('colors.purple.500'), theme('colors.blue.500')],
- // ...
- }),
-};
-
-export default defineConfig({
- designSystem,
- buildConfig: {
- style: {
- postcss: {
- plugins: [require('./plugins/gradients')],
- },
- },
- },
-});
-```
-
-## 配置引用
-
-除了 `screens`，`colors` 和 `spacing` 外，配置对象中的所有属性都映射到 `Tailwind CSS` 的核心插件上。由于许多插件负责仅接受静态值集（例如，例如`float`）的 CSS 属性，因此请注意，并非每个插件在主题对象中都有对应的属性。
-
-所有这些属性也可以在 `designSystem.extend` 属性下使用，以扩展默认主题。
-
-关于所有属性的作用，可以查看此 [链接](https://tailwindcss.com/docs/theme#configuration-reference)。
diff --git a/packages/document/module-doc/docs/zh/guide/advance/theme-config.mdx b/packages/document/module-doc/docs/zh/guide/advance/theme-config.mdx
deleted file mode 100644
index 8ed40a3e30c3..000000000000
--- a/packages/document/module-doc/docs/zh/guide/advance/theme-config.mdx
+++ /dev/null
@@ -1,64 +0,0 @@
----
-sidebar_position: 6
----
-
-# 主题配置
-
-Module Tools 通过 [`designSystem`](/api/config/design-system) 选项，提供了配置 Tailwind CSS 主题的能力。
-
-## 动机和原理
-
-主题配置有些类似组件库中的定制主题功能，主要用于开发样式。当你使用 `designSystem` 时，它会作为 Tailwind CSS 的 `theme` 配置。因此你可以使用：
-
-- Tailwind CSS 支持的 CSS 类名。
-- 在 CSS/Less/Sass 下通过 `@apply` 自定义指令使用与 Tailwind CSS 支持的 CSS 类名同名的字符串。
-
-关于 `designSystem` 的默认值，可以查看 [`designSystem` API](/api/config/design-system)。
-
-## 使用示例
-
-在使用 Tailwind CSS 的时候，可以通过 `designSystem` 来设置它的 [`theme`](https://tailwindcss.com/docs/theme) 配置。
-
-例如在下面的配置中扩展了原有的颜色配置:
-
-```ts title="modern.config.ts"
-export default {
- designSystem: {
- extend: {
- colors: {
- primary: '#1677ff',
- },
- },
- },
-};
-```
-
-在代码中，我们可以有两种使用 Tailwind CSS 的方式。
-
-#### CSS 类名
-
-```tsx title="./src/index.tsx"
-import 'tailwindcss/utilities.css';
-
-export default () => {
- return ;
-};
-```
-
-#### `@apply` 指令
-
-关于 [`@apply`](https://tailwindcss.com/docs/functions-and-directives#apply)。
-
-```tsx title="./src/index.tsx"
-import './index.css';
-
-export default () => {
- return ;
-};
-```
-
-```css title="./src/index.css"
-.btn-primary {
- @apply bg-primary;
-}
-```
diff --git a/packages/document/module-doc/docs/zh/guide/best-practices/use-tailwindcss.mdx b/packages/document/module-doc/docs/zh/guide/best-practices/use-tailwindcss.mdx
index f2ba99ac89bc..20ba1f7c4bc0 100644
--- a/packages/document/module-doc/docs/zh/guide/best-practices/use-tailwindcss.mdx
+++ b/packages/document/module-doc/docs/zh/guide/best-practices/use-tailwindcss.mdx
@@ -258,3 +258,32 @@ var src_default = () => {
};
export { src_default as default };
```
+
+### 关于 `designSystem` 配置
+
+`designSystem` 是 Module Tools 中废弃的配置项。
+
+从 Module Tools vMAJOR_VERSION.33.0 版本开始，你可以使用 Tailwind CSS 的 `theme` 配置项来代替 `designSystem`，不再需要将 `theme` 配置拆分并设置到 `designSystem` 上。
+
+- 旧版本用法：
+
+```ts title="modern.config.ts"
+const { theme, ...rest } = tailwindConfig;
+
+export default {
+ style: {
+ tailwindcss: rest,
+ },
+ designSystem: theme,
+};
+```
+
+- 当前版本用法：
+
+```ts title="modern.config.ts"
+export default {
+ style: {
+ tailwindcss: tailwindConfig,
+ },
+};
+```
diff --git a/packages/document/module-doc/docs/zh/plugins/guide/setup-function.mdx b/packages/document/module-doc/docs/zh/plugins/guide/setup-function.mdx
index 828fc3c2237d..e8e28e3ddbf0 100644
--- a/packages/document/module-doc/docs/zh/plugins/guide/setup-function.mdx
+++ b/packages/document/module-doc/docs/zh/plugins/guide/setup-function.mdx
@@ -63,7 +63,6 @@ const useResolvedConfigContext: () => NormalizedConfig;
interface NormalizedConfig {
buildConfig: PartialBuildConfig;
buildPreset: BuildPreset;
- designSystem?: Record;
dev: Dev;
plugins: PluginConfig;
runtime: RuntimeConfig;
diff --git a/packages/generator/generators/doc-generator/templates/docs/zh/guide/install.mdx b/packages/generator/generators/doc-generator/templates/docs/zh/guide/install.mdx
index 51a205f9a1f0..755b8b6a23e2 100644
--- a/packages/generator/generators/doc-generator/templates/docs/zh/guide/install.mdx
+++ b/packages/generator/generators/doc-generator/templates/docs/zh/guide/install.mdx
@@ -59,7 +59,6 @@ const useResolvedConfigContext: () => NormalizedConfig;
interface NormalizedConfig {
buildConfig: PartialBuildConfig;
buildPreset: BuildPreset;
- designSystem?: Record;
dev: Dev;
plugins: PluginConfig;
runtime: RuntimeConfig;
diff --git a/packages/solutions/app-tools/src/types/config/source.ts b/packages/solutions/app-tools/src/types/config/source.ts
index 0e98da2c41b7..6b9b72a7ed7a 100644
--- a/packages/solutions/app-tools/src/types/config/source.ts
+++ b/packages/solutions/app-tools/src/types/config/source.ts
@@ -62,10 +62,8 @@ export interface SharedSourceConfig extends BuilderSharedSourceConfig {
*/
configDir?: string;
/**
- * Used to define the project's theme configuration such as color palette.
- * @requires `tailwindcss` plugin.
- * The configuration of `source.designSystem` is provided by `tailwindcss` plugin.
- * Please use `yarn new` or `pnpm new` to enable the corresponding capability.
+ * @deprecated designSystem is no longer required.
+ * If you are using Tailwind CSS, you can now use the `theme` option of Tailwind CSS, they are the same.
*/
designSystem?: Record;
}
diff --git a/packages/solutions/app-tools/src/types/legacyConfig/source.ts b/packages/solutions/app-tools/src/types/legacyConfig/source.ts
index e336ae528077..7afde01b48fe 100644
--- a/packages/solutions/app-tools/src/types/legacyConfig/source.ts
+++ b/packages/solutions/app-tools/src/types/legacyConfig/source.ts
@@ -31,9 +31,8 @@ export type SourceLegacyUserConfig = {
include?: Array;
/**
- * The configuration of `source.designSystem` is provided by `tailwindcss` plugin.
- * Please use `yarn new` or `pnpm new` to enable the corresponding capability.
- * @requires `tailwindcss` plugin
+ * @deprecated designSystem is no longer required.
+ * If you are using Tailwind CSS, you can now use the `theme` option of Tailwind CSS, they are the same.
*/
designSystem?: Record;
};
diff --git a/packages/solutions/module-tools/src/types/config/index.ts b/packages/solutions/module-tools/src/types/config/index.ts
index 77c1631ef68e..f2d1779f4056 100644
--- a/packages/solutions/module-tools/src/types/config/index.ts
+++ b/packages/solutions/module-tools/src/types/config/index.ts
@@ -167,6 +167,10 @@ export interface RuntimeUserConfig {
}
export interface ModuleExtraConfig {
+ /**
+ * @deprecated designSystem is no longer required.
+ * If you are using Tailwind CSS, you can now use the `theme` option of Tailwind CSS, they are the same.
+ */
designSystem?: Record;
buildConfig?: PartialBuildConfig;
diff --git a/packages/solutions/module-tools/src/types/legacyConfig/source.ts b/packages/solutions/module-tools/src/types/legacyConfig/source.ts
index 6194aa24b1ec..3894d3b398bd 100644
--- a/packages/solutions/module-tools/src/types/legacyConfig/source.ts
+++ b/packages/solutions/module-tools/src/types/legacyConfig/source.ts
@@ -6,9 +6,8 @@ export type SourceLegacyUserConfig = {
globalVars?: Record;
jsxTransformRuntime?: 'automatic' | 'classic';
/**
- * The configuration of `source.designSystem` is provided by `tailwindcss` plugin.
- * Please use `yarn new` or `pnpm new` to enable the corresponding capability.
- * @requires `tailwindcss` plugin
+ * @deprecated designSystem is no longer required.
+ * If you are using Tailwind CSS, you can now use the `theme` option of Tailwind CSS, they are the same.
*/
designSystem?: Record;
};