feat(theme)!: add layer for base.css to support tailwind v4 (#2477)

Author: SoonIter

packages/theme-default/src/styles/base.css

@@ -1,76 +1,76 @@
-@import url(./preflight.css);
-@tailwind components;
-@tailwind utilities;
+@import url(./preflight.css) layer(rp-base);
 
-html {
-  line-height: 1.7;
-  font-size: 16px;
-  -webkit-text-size-adjust: 100%;
-  scroll-padding-top: calc(
-    var(--rp-nav-height) + var(--rp-sidebar-menu-height)
-  );
-}
+@layer rp-base {
+  html {
+    line-height: 1.7;
+    font-size: 16px;
+    -webkit-text-size-adjust: 100%;
+    scroll-padding-top: calc(
+      var(--rp-nav-height) + var(--rp-sidebar-menu-height)
+    );
+  }
 
-html.dark {
-  color-scheme: dark;
-}
+  html.dark {
+    color-scheme: dark;
+  }
 
-body {
-  margin: 0;
-  width: 100%;
-  min-width: 320px;
-  font-family: var(--rp-font-family-base);
-  font-size: 16px;
-  font-weight: 400;
-  color: var(--rp-c-text-1);
-  background-color: var(--rp-c-bg);
-  direction: ltr;
-  font-synthesis: style;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
+  body {
+    margin: 0;
+    width: 100%;
+    min-width: 320px;
+    font-family: var(--rp-font-family-base);
+    font-size: 16px;
+    font-weight: 400;
+    color: var(--rp-c-text-1);
+    background-color: var(--rp-c-bg);
+    direction: ltr;
+    font-synthesis: style;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
 
-button:focus,
-button:focus-visible {
-  outline: none;
-}
+  button:focus,
+  button:focus-visible {
+    outline: none;
+  }
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-li,
-p {
-  overflow-wrap: break-word;
-}
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  li,
+  p {
+    overflow-wrap: break-word;
+  }
 
-.visually-hidden {
-  visibility: hidden;
-}
+  .visually-hidden {
+    visibility: hidden;
+  }
 
-.rspress-logo {
-  height: 1.6rem;
-}
+  .rspress-logo {
+    height: 1.6rem;
+  }
 
-#nprogress .bar {
-  background: var(--rp-c-brand);
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 2px;
-}
+  #nprogress .bar {
+    background: var(--rp-c-brand);
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 2px;
+  }
 
-/**
+  /**
   * Custom font family
 */
-:root {
-  --rp-font-family-base:
-    'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont,
-    'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans',
-    'Helvetica Neue', sans-serif;
-  --rp-font-family-mono: Menlo, Monaco, Consolas, 'Courier New', monospace;
+  :root {
+    --rp-font-family-base:
+      'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont,
+      'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans',
+      'Helvetica Neue', sans-serif;
+    --rp-font-family-mono: Menlo, Monaco, Consolas, 'Courier New', monospace;
+  }
 }

packages/theme-default/src/styles/index.ts

@@ -3,6 +3,7 @@
  */
 import './vars.css';
 import './base.css';
+import './tailwind.css';
 import './code.css';
 import './scrollbar.scss';
 import './shiki.scss';

packages/theme-default/src/styles/tailwind.css

@@ -0,0 +1,2 @@
+@tailwind components;
+@tailwind utilities;