fix: tailwinds style not apply correct.

sumy7 · Mar 7, 2024 · 86b4ae6 · 86b4ae6
1 parent cc0ba1e
commit 86b4ae6
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 20 deletions.
diff --git a/packages/theme-default/src/layout/BaseLayout/index.module.less b/packages/theme-default/src/layout/BaseLayout/index.module.less
@@ -1,3 +1,15 @@
+.pageContainer {
+ @apply mx-auto max-w-screen-sm lg:max-w-screen-xl xl:p-9 p-6 flex flex-col lg:flex-row gap-6;
+
+ .pageContent {
+ @apply flex-1 min-h-screen;
+ }
+
+ .rightContent {
+ @apply block w-full lg:w-80;
+ }
+}
+
 .asideContainer {
  position: sticky;
  top: calc(var(--rp-nav-height) + 32px);

diff --git a/packages/theme-default/src/layout/BaseLayout/index.tsx b/packages/theme-default/src/layout/BaseLayout/index.tsx
@@ -1,8 +1,9 @@
 import { Nav } from '@rspress/theme-default'
 import classnames from 'classnames'
-import styles from './index.module.less'
 import Footer from '@/components/Footer'
 
+import styles from './index.module.less'
+
 export interface BaseLayoutProps {
  children?: React.ReactNode
  outline?: React.ReactNode
@@ -13,30 +14,14 @@ const BaseLayout = (props: BaseLayoutProps) => {
  return (
  <div>
  <Nav />
- <div
- className={classnames(
- 'mx-auto',
- 'max-w-screen-sm',
- 'lg:max-w-screen-xl',
- 'xl:p-9',
- 'p-6',
- 'flex',
- 'flex-col',
- 'lg:flex-row',
- 'gap-6'
- )}
- >
+ <div className={classnames(styles.pageContainer)}>
  <div
- className={classnames(
- 'rspress-doc-container',
- 'flex-1',
- 'min-h-screen'
- )}
+ className={classnames('rspress-doc-container', styles.pageContent)}
  >
  {children}
  </div>
  {outline && (
- <div className={classnames('block', 'w-full', 'lg:w-80')}>
+ <div className={classnames(styles.rightContent)}>
  <div className={classnames(styles.asideContainer, 'sticky')}>
  {outline}
  </div>