do not use tailwind directives in mantle.css

Author: cody-dot-js

.storybook/preview.ts

@@ -2,6 +2,7 @@ import { withThemeByClassName } from "@storybook/addon-styling";
 import type { Preview } from "@storybook/react";
 import { theme } from "../components/theme-provider";
 import "../assets/mantle.css";
+import "tailwindcss/tailwind.css";
 
 const preview: Preview = {
 	parameters: {

app/root.tsx

@@ -2,12 +2,14 @@ import { PreventWrongThemeFlash, ThemeProvider } from "@/theme-provider";
 import { cssBundleHref } from "@remix-run/css-bundle";
 import type { LinksFunction } from "@remix-run/node";
 import { Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration } from "@remix-run/react";
+import tailwind from "tailwindcss/tailwind.css";
 import mantleCss from "../assets/mantle.css";
 import { Layout } from "./components/layout";
 
 export const links: LinksFunction = () => [
 	...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
 	{ rel: "stylesheet", href: mantleCss },
+	{ rel: "stylesheet", href: tailwind },
 ];
 
 export default function App() {

assets/mantle.css

@@ -1170,12 +1170,6 @@
 	font-style: italic;
 }
 
-@layer base {
-	body {
-		@apply bg-white text-gray-900;
-	}
-}
-
 .scrollbar::-webkit-scrollbar {
 	width: 0.5rem;
 	height: 0.5rem;
@@ -1201,3 +1195,7 @@
 	scrollbar-color: hsl(var(--gray-600) / 0.5) transparent;
 	scrollbar-width: thin;
 }
+
+body {
+	@apply bg-white text-gray-900;
+}

package.json

@@ -3,7 +3,7 @@
   "description": "mantle is ngrok's UI library and design system.",
   "author": "ngrok",
   "license": "MIT",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "homepage": "https://mantle.ngrok.com",
   "repository": {
     "type": "git",
@@ -70,25 +70,25 @@
     "@parcel/transformer-typescript-types": "2.11.0",
     "@remix-run/dev": "2.5.1",
     "@remix-run/eslint-config": "2.5.1",
-    "@storybook/addon-essentials": "7.6.11",
-    "@storybook/addon-interactions": "7.6.11",
-    "@storybook/addon-links": "7.6.11",
+    "@storybook/addon-essentials": "7.6.12",
+    "@storybook/addon-interactions": "7.6.12",
+    "@storybook/addon-links": "7.6.12",
     "@storybook/addon-onboarding": "1.0.11",
     "@storybook/addon-styling": "1.3.7",
-    "@storybook/blocks": "7.6.11",
-    "@storybook/builder-vite": "7.6.11",
-    "@storybook/react": "7.6.11",
-    "@storybook/react-vite": "7.6.11",
+    "@storybook/blocks": "7.6.12",
+    "@storybook/builder-vite": "7.6.12",
+    "@storybook/react": "7.6.12",
+    "@storybook/react-vite": "7.6.12",
     "@storybook/testing-library": "0.2.2",
-    "@testing-library/react": "14.1.2",
+    "@testing-library/react": "14.2.0",
     "@testing-library/user-event": "14.5.2",
-    "@types/node": "20.11.10",
+    "@types/node": "20.11.16",
     "@types/prismjs": "1.26.3",
-    "@types/react": "18.2.48",
+    "@types/react": "18.2.51",
     "@types/react-dom": "18.2.18",
     "@typescript-eslint/eslint-plugin": "6.20.0",
     "@typescript-eslint/parser": "6.20.0",
-    "@vitejs/plugin-react-swc": "3.5.0",
+    "@vitejs/plugin-react-swc": "3.6.0",
     "@vitest/ui": "1.2.2",
     "autoprefixer": "10.4.17",
     "browserslist": "4.22.3",
@@ -107,7 +107,7 @@
     "prettier-plugin-tailwindcss": "0.5.11",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "storybook": "7.6.11",
+    "storybook": "7.6.12",
     "tailwindcss": "3.4.1",
     "tailwindcss-animate": "1.0.7",
     "tsx": "4.7.0",