feat: add basic CSS configuration

Author: Ohh-889

global.css

@@ -0,0 +1,16 @@
+@import 'tailwindcss';
+
+
+
+@config "./tailwind.config.ts";
+
+
+html,
+body,
+#app {
+  height: 100%;
+}
+
+html {
+  overflow-x: hidden;
+}

package.json

@@ -17,6 +17,7 @@
     "lint:fix": "eslint . --fix"
   },
   "devDependencies": {
+    "@soybean-react-ui/tailwind-plugin": "workspace:*",
     "@soybeanjs/eslint-config": "1.7.0",
     "@types/node": "22.15.3",
     "@types/react": "19.1.0",
@@ -27,6 +28,7 @@
     "eslint-plugin-react-refresh": "0.4.20",
     "eslint-plugin-sort": "4.0.0",
     "prettier": "3.6.0",
+    "tailwindcss": "4.1.11",
     "tsup": "8.5.0",
     "turbo": "2.5.4",
     "typescript": "5.8.2"

playground/src/app/layout.tsx

@@ -1,6 +1,6 @@
 import type { Metadata } from 'next';
 import { Geist, Geist_Mono } from 'next/font/google';
-import './globals.css';
+import '../css/globals.css';
 import { Card, Sonner } from 'soybean-react-ui';
 
 const geistSans = Geist({

playground/src/app/globals.css renamed to playground/src/css/globals.css

@@ -1,10 +1,9 @@
-@import 'tailwindcss';
+@import '../../../global.css';
 
 @plugin "tailwindcss-animate";
 
 @source "../../../packages/ui/src/**/*.{ts,tsx}";
 
-@config "../../tailwind.config.ts";
 
 html,
 body,

playground/tailwind.config.ts

@@ -1,5 +1,9 @@
-const config = {
-  darkMode: 'class'
+import { soybeanUIPlugin } from '@soybean-react-ui/tailwind-plugin';
+import type { Config } from 'tailwindcss';
+
+const config: Config = {
+  darkMode: 'class',
+  plugins: [soybeanUIPlugin()]
 };
 
 export default config;