Fixed styles for tailwind 4

package.json

@@ -22,19 +22,20 @@
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.3.3",
+    "@tailwindcss/postcss": "^4.1.18",
+    "@tailwindcss/vite": "^4.1.18",
     "@tsconfig/node20": "^20.1.2",
     "@types/node": "^20.12.11",
     "@vitejs/plugin-vue": "^5.0.4",
     "@vue/eslint-config-prettier": "^8.0.0",
     "@vue/eslint-config-typescript": "^12.0.0",
     "@vue/tsconfig": "^0.5.1",
-    "autoprefixer": "^10.4.19",
     "eslint": "^8.49.0",
     "eslint-plugin-vue": "^9.17.0",
     "postcss": "^8.4.38",
     "prettier": "^3.2.5",
     "start-server-and-test": "^2.0.3",
-    "tailwindcss": "^3.4.3",
+    "tailwindcss": "^4.1.18",
     "typescript": "^5.4.5",
     "vite": "^5.2.11",
     "vue-tsc": "^2.0.16"

postcss.config.js

@@ -1,6 +1,5 @@
 export default {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {}
+    '@tailwindcss/postcss': {},
   }
 }

src/assets/animations/_fade.scss

@@ -1,14 +0,0 @@
-.fade {
-  &-enter-from,
-  &-leave-to {
-    opacity: 0;
-  }
-  &-enter-to,
-  &-leave-from {
-    opacity: 1;
-  }
-  &-enter-active,
-  &-leave-active {
-    transition: all 0.2s ease;
-  }
-}

src/assets/base/body.scss

@@ -1,8 +0,0 @@
-body {
-  @apply relative min-h-screen min-w-full text-y-beige-700 bg-y-beige-400 tracking-[-0.03em];
-  word-spacing: 0.5em;
-
-  &::before {
-    @apply absolute content-[''] h-full w-full bg-[url('/backgrounds/tile-bg.svg')] bg-[length:4px_4px] z-50 opacity-5 pointer-events-none select-none
-  }
-}

src/assets/main.css

@@ -0,0 +1,57 @@
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@200;300;400;500;700&display=swap');
+
+@import "tailwindcss";
+
+@theme {
+  --color-y-beige: #B0AB97;
+  --color-y-beige-50: #FFFFFF;
+  --color-y-beige-100: #F6F6F4;
+  --color-y-beige-200: #E5E3DD;
+  --color-y-beige-300: #D8D2B8;
+  --color-y-beige-400: #cbc5af;
+  --color-y-beige-500: #b0ab97;
+  --color-y-beige-600: #767563;
+  --color-y-beige-700: #4c4940;
+  --color-y-beige-800: #3A382C;
+  --color-y-beige-900: #2d2c21;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+.fade-enter-to,
+.fade-leave-from {
+  opacity: 1;
+}
+.fade-enter-active,
+.fade-leave-active {
+  transition: all 0.2s ease;
+}
+
+.y-scrollbar::-webkit-scrollbar-button {
+  display: none;
+}
+
+body {
+  position: relative;
+  min-height: 100dvh;
+  min-width: 100dvw;
+  color: var(--color-y-beige-700);
+  background-color: var(--color-y-beige-400);
+  letter-spacing: -0.03em;
+  word-spacing: 0.5em;
+}
+
+body::before {
+  position: absolute;
+  content: '';
+  height: 100%;
+  width: 100%;
+  background-size: 4px 4px;
+  background-image: url('/backgrounds/tile-bg.svg');
+  z-index: 50;
+  opacity: 5%;
+  pointer-events: none;
+  user-select: none;
+}

src/assets/main.scss

@@ -1,18 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@200;300;400;500;700&display=swap');
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  @import 'base/body';
-}
-
-@layer utilities {
-  @import 'utilities/scrollbar';
-}
-
-/**
-* ANIMATIONS FOR TRANSITIONS
-*/
-@import 'animations/fade'

src/assets/utilities/_scrollbar.scss

@@ -1,5 +0,0 @@
-.y-scrollbar {
-  &::-webkit-scrollbar-button {
-    display: none;
-  }
-}

src/components/YrhNav.vue

@@ -47,7 +47,7 @@ function handleInactiveState() {
       <li
         v-for="item in props.items"
         :key="item.id"
-        class="transition-all"
+        class="transition-all *:not-first:mt-3"
         :class="item.id === clickedKey ? 'w-full' : 'w-11/12'"
       >
         <YrhButton
@@ -72,10 +72,6 @@ function handleInactiveState() {
 menu {
   position: relative;
 
-  li:not(:first-child) {
-    @apply mt-3;
-  }
-
   &::before {
     display: block;
     position: absolute;

src/components/atoms/YrhCard.vue

@@ -18,7 +18,7 @@ const props = defineProps<{
       </span>
     </header>
 
-    <figure v-if="slots.image" class="mx-4">
+    <figure v-if="slots.image" class="mx-4 after:content-[''] after:block after:w-full after:h-[0.1rem] after:my-3 after:bg-y-beige-500">
       <div class="h-full bg-y-beige-500 grid place-items-center">
         <slot name="image" />
       </div>
@@ -38,7 +38,6 @@ const props = defineProps<{
 figure {
   &::after {
     content: '';
-    @apply block w-full h-[0.1rem] my-3 bg-y-beige-500;
   }
 }
 </style>

src/components/config/YrhAudioMenu.vue

@@ -4,7 +4,7 @@ import YrhAudioSlider from './YrhAudioSlider.vue'
 
 <template>
   <menu class="pl-11">
-    <li>
+    <li class="*:not-first:mt-3">
       <YrhAudioSlider>Volume</YrhAudioSlider>
     </li>
   </menu>
@@ -14,10 +14,6 @@ import YrhAudioSlider from './YrhAudioSlider.vue'
 menu {
   position: relative;
 
-  li:not(:first-child) {
-    @apply mt-3;
-  }
-
   &::before {
     display: block;
     position: absolute;

src/components/datas/items/ItemSelection.vue

@@ -19,7 +19,7 @@ function handleSelectedItem(item: GameItem) {
 <template>
   <div class="h-full relative pl-11">
     <menu
-      class="h-[calc(100%-16px)] overflow-auto py-2 bg-y-beige-300 max-h-full shadow-sharpest y-scrollbar"
+      class="h-[calc(100%-16px)] overflow-auto py-2 bg-y-beige-300 max-h-full shadow-sharpest y-scrollbar after:-top-2 after:-bottom-2 after:w-4"
     >
       <li v-for="item in props.items" :key="item.name" class="mb-2 last:mb-0">
         <YrhButton
@@ -52,7 +52,9 @@ function handleSelectedItem(item: GameItem) {
 <style lang="scss" scoped>
 menu {
   &::before {
-    @apply block absolute -top-2 -bottom-2 left-0 w-4;
+    display: block;
+    position: absolute;
+    left: 0;
     content: '';
     border-left-width: 8px;
     border-right-width: 2px;

src/main.ts

@@ -1,4 +1,4 @@
-import './assets/main.scss'
+import './assets/main.css'
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import App from './App.vue'

src/views/datas/Items.vue

@@ -36,7 +36,7 @@ onMounted(() => {
   </YrhHeading>
 
   <section class="grid grid-cols-3 gap-x-10 my-14 overflow-auto">
-    <div class="items-container max-h-full overflow-hidden">
+    <div class="items-container max-h-full overflow-hidden after:ml-11 before:ml-11 after:h-2 before:h-2 after:left-14 before:left-14 after:-right-14 before:-right-14 after:bg-y-beige-300 before:bg-y-beige-300 before:border-b-2 after:border-t-2">
       <ItemSelection :items="availableItems" />
     </div>
 
@@ -67,21 +67,25 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .items-container {
-  @apply relative overflow-x-hidden;
+  position: relative;
+  overflow-x: hidden;
 
   &::before,
   &::after {
+    display: block;
+    position: sticky;
+    width: 100%;
     content: '';
     height: 0.1rem;
-    @apply block sticky ml-11 w-full h-2 left-14 -right-14 z-10 bg-y-beige-300;
     border-color: rgba(45, 44, 33, 0.33);
+    z-index: 10;
   }
 
   &::before {
-    @apply top-0 border-b-2;
+    top: 0;
   }
   &::after {
-    @apply bottom-0 border-t-2;
+    bottom: 0;
   }
 }
 </style>

tailwind.config.js

@@ -1,57 +1,42 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
-  theme: {
-    container: {
-      padding: '2rem',
-      center: true
-    },
-    fontFamily: {
-      sans: ['Noto Sans', 'ui-sans-serif', 'system-ui'],
-      serif: ['ui-serif', 'Georgia'],
-      mono: ['ui-monospace', 'SFMono-Regular'],
-      display: ['Oswald'],
-      body: ['Noto Sans']
-    },
-    extend: {
-      colors: {
-        'y-beige': {
-          DEFAULT: '#B0AB97',
-          50: '#FFFFFF',
-          100: '#F6F6F4',
-          200: '#E5E3DD',
-          300: '#D8D2B8',
-          400: '#cbc5af',
-          500: '#b0ab97',
-          600: '#767563',
-          700: '#4c4940',
-          800: '#3A382C',
-          900: '#2d2c21'
+    content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
+    theme: {
+        container: {
+            padding: '2rem',
+            center: true
+        },
+        fontFamily: {
+            sans: ['Noto Sans', 'ui-sans-serif', 'system-ui'],
+            serif: ['ui-serif', 'Georgia'],
+            mono: ['ui-monospace', 'SFMono-Regular'],
+            display: ['Oswald'],
+            body: ['Noto Sans']
+        },
+        extend: {
+            boxShadow: {
+                sharpest: '2px 2px #2d2c2150'
+            }
         }
-      },
-      boxShadow: {
-        sharpest: '2px 2px #2d2c2150'
-      }
-    }
-  },
-  plugins: [
-    function ({ addBase, theme }) {
-      function extractColorVars(colorObj, colorGroup = '') {
-        return Object.keys(colorObj).reduce((vars, colorKey) => {
-          const value = colorObj[colorKey]
-
-          const newVars =
-            typeof value === 'string'
-              ? { [`--color${colorGroup}-${colorKey}`]: value }
-              : extractColorVars(value, `-${colorKey}`)
-
-          return { ...vars, ...newVars }
-        }, {})
-      }
-
-      addBase({
-        ':root': extractColorVars(theme('colors'))
-      })
-    }
-  ]
+    },
+    plugins: [
+        function ({ addBase, theme }) {
+            function extractColorVars(colorObj, colorGroup = '') {
+                return Object.keys(colorObj).reduce((vars, colorKey) => {
+                    const value = colorObj[colorKey]
+                    
+                    const newVars =
+                    typeof value === 'string'
+                    ? { [`--color${colorGroup}-${colorKey}`]: value }
+                    : extractColorVars(value, `-${colorKey}`)
+                    
+                    return { ...vars, ...newVars }
+                }, {})
+            }
+            
+            addBase({
+                ':root': extractColorVars(theme('colors'))
+            })
+        }
+    ]
 }

tsconfig.node.json

@@ -3,7 +3,6 @@
   "include": ["vite.config.*"],
   "compilerOptions": {
     "composite": true,
-    "module": "ESNext",
     "types": ["node"]
   }
 }

vite.config.ts

@@ -2,12 +2,14 @@ import { fileURLToPath, URL } from 'node:url'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 
+import tailwindcss from "@tailwindcss/vite";
+
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [vue(), tailwindcss()],
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url))
     }
-  }
+  },
 })