update tab block styles

Author: LadyBluenotes

src/routes/getting-started/installation.mdx

@@ -102,7 +102,7 @@ mkdir src
 
 Create `src/index.jsx`:
 
-```jsx
+```jsx tab title="src/index.jsx"
 /* @refresh reload */
 import { render } from 'solid-js/web';
 import App from './App';
@@ -113,72 +113,38 @@ const root = document.getElementById('root');
 render(() => <App />, root);
 ```
 
-Create `src/App.jsx`:
-
-```jsx
+```jsx tab title="src/App.jsx"
 import { createSignal } from 'solid-js';
 
 function App() {
   const [count, setCount] = createSignal(0);
 
   return (
-    <div class="App">
-      <header class="App-header">
-        <h1>Welcome to Solid</h1>
-        <p>Count: {count()}</p>
-        <button onClick={() => setCount(count() + 1)}>
-          Increment
-        </button>
-      </header>
+    <div class="app">
+        <h1 class="app-header">Welcome to Solid</h1>
     </div>
   );
 }
 
 export default App;
 ```
 
-Create `src/index.css`:
-
-```css
+```css tab title="src/index.css"
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+  background-color: #f0f0f0;
 }
 
-.App {
+.app {
   text-align: center;
 }
 
-.App-header {
-  background-color: #282c34;
-  padding: 20px;
-  color: white;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
+.app-header {
+  color: red;
 }
+```
 
-button {
-  background-color: #61dafb;
-  border: none;
-  color: #282c34;
-  padding: 10px 20px;
-  font-size: 16px;
-  border-radius: 4px;
-  cursor: pointer;
-  margin-top: 10px;
-}
 
-button:hover {
-  background-color: #21a6c7;
-}
-```
 
 ## 7. Add Build Scripts
 

src/styles/expressive-code.css

@@ -1,5 +1,5 @@
 .expressive-code-overrides .expressive-code {
-	@apply my-4 font-mono;
+	@apply mb-4 font-mono;
 }
 
 .expressive-code-overrides .expressive-code .frame {
@@ -11,7 +11,7 @@
 }
 
 html .expressive-code-overrides .expressive-code pre {
-	@apply rounded-xl border-[1.5px];
+	@apply border-[1.5px];
 }
 
 /* Copy Button */
@@ -70,7 +70,7 @@ html.windows
 	.expressive-code-overrides
 	.expressive-code
 	pre::-webkit-scrollbar {
-	@apply h-5 w-5 rounded-xl border-[6px] border-solid border-transparent bg-slate-200/80;
+	@apply h-5 w-5 border-[6px] border-solid border-transparent bg-slate-200/80;
 	background-clip: content-box;
 }
 html.windows.dark

src/ui/tabs.tsx

@@ -23,8 +23,11 @@ export type TabListProps = PolymorphicProps<
 
 export function TabList(props: TabListProps) {
 	return (
-		<div class="custom-scrollbar mb-2 flex overflow-x-auto">
-			<KobalteTabs.List {...props} class="flex border-b-2 border-slate-800" />
+		<div class="custom-scrollbar flex overflow-x-auto overflow-y-hidden">
+			<KobalteTabs.List
+				{...props}
+				class="z-1 flex w-full border-b border-blue-200 dark:border-slate-800"
+			/>
 		</div>
 	);
 }
@@ -38,7 +41,7 @@ export function Tab(props: TabProps) {
 	return (
 		<KobalteTabs.Trigger
 			{...props}
-			class="relative top-0.5 px-5 py-1 transition-colors duration-300 aria-selected:border-b-2 aria-selected:border-blue-400 aria-selected:font-bold aria-selected:text-blue-500 aria-selected:dark:text-slate-300"
+			class="z-2 aria-selected-before:w-full aria-selected:before:border-blue relative top-0.5 appearance-none bg-none px-[16px] py-[4px] outline-none transition-colors duration-150 aria-selected:h-full aria-selected:bg-slate-200 aria-selected:text-black aria-selected:before:absolute aria-selected:before:inset-0 aria-selected:before:border-t aria-selected:before:border-blue-600 aria-selected:dark:bg-slate-800 aria-selected:dark:text-white aria-selected:before:dark:border-blue-200"
 		/>
 	);
 }
@@ -50,6 +53,9 @@ export type TabPanelProps = PolymorphicProps<
 
 export function TabPanel(props: TabPanelProps) {
 	return (
-		<KobalteTabs.Content {...props} class="hidden data-[selected]:block" />
+		<KobalteTabs.Content
+			{...props}
+			class="hidden rounded-b-md bg-white data-[selected]:block dark:bg-slate-950"
+		/>
 	);
 }