feat: add tailwindcss

Author: antond15

.prettierrc

@@ -1,4 +1,5 @@
 {
+  "plugins": ["prettier-plugin-tailwindcss"],
   "trailingComma": "es5",
   "tabWidth": 2,
   "semi": true,

bun.lockb

@@ -1,16 +1,7 @@
-.ac-footer {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.ac-item-images {
-  display: flex;
-  margin-top: 0.5rem;
-}
+@import "tailwindcss";
 
 .ac-splitter {
   margin-top: 2rem;
   margin-bottom: 2rem;
-  border-top-width: 3px;
+  border-top-width: 2px;
 }

index.css

@@ -14,8 +14,11 @@
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
+    "@tailwindcss/postcss": "^4.0.0-beta.6",
     "@types/node": "22.10.1",
     "prettier": "^3.4.2",
+    "prettier-plugin-tailwindcss": "^0.6.9",
+    "tailwindcss": "^4.0.0-beta.6",
     "typescript": "^5.7.2"
   }
 }

package.json

@@ -1,7 +1,14 @@
 export default {
   index: 'Home',
   radio: 'AC Radio',
-  scoreboard: 'AC Scoreboard',
+  scoreboard: {
+    title: (
+      <div className="flex justify-between w-full gap-2">
+        <span>AC Scoreboard</span>
+        <span className="bg-green-600 text-white px-1 py-0.5 rounded font-semibold text-xs self-center">NEW</span>
+      </div>
+    ),
+  },
   documents: 'AC Documents',
   gifts: 'AC Gifts',
   link_tebex: {

pages/_meta.tsx

@@ -25,7 +25,7 @@ Make sure to create items called `paper`, `document` and `crumpled_paper` in you
 You can change the used item names in `ac_documents/editable/config.lua`.  
 You can use the following images or make your own.
 
-<div className="ac-item-images">
+<div className="flex mt-2">
 	<Image src="/images/items/paper.png" alt="paper" width={100} height={100} quality={100} />
 	<Image src="/images/items/document.png" alt="document" width={100} height={100} quality={100} />
 	<Image src="/images/items/crumpled_paper.png" alt="crumpled_paper" width={100} height={100} quality={100} />

pages/documents/index.mdx

@@ -53,7 +53,7 @@ setContainerProperties('empty_gift', {
 For more detailed steps, visit the official [Creating items](https://overextended.dev/ox_inventory/Guides/creatingItems) guide.
 
 ### Images
-<div className="ac-item-images">
+<div className="flex mt-2">
 	<Image src="/images/items/empty_gift.png" alt="empty_gift" width={100} height={100} quality={100} />
 	<Image src="/images/items/gift.png" alt="gift" width={100} height={100} quality={100} />
 	<Image src="/images/items/opened_gift.png" alt="opened_gift" width={100} height={100} quality={100} />

pages/gifts/install.mdx

@@ -30,8 +30,8 @@ const config: DocsThemeConfig = {
   docsRepositoryBase: 'https://github.com/acscripts/docs/tree/main',
   feedback: { content: null },
   footer: {
-      <div className="ac-footer">
     content: (
+      <div className="flex items-center gap-2">
         <span>© {new Date().getFullYear()}</span>
         <Image src="/logo.svg" alt="logo" width={24} height={24} />
         <span>AC Scripts</span>