build نشدن کلاس ها در tailwind

سرور رو ری استارت کن برای منم اتفاق افتاد یه بار
از vite استفاده میکنی دیگه؟

@saghari
لایو سرور...

کد رو بدید

@error.404
کد کدوم فایل؟

همه و فقط برای tailwind css

@error.404
Index.html?

نه فقط برای tailwind مثل فایل کانفیگ و اینچیزا

@error.404
اهان
الان...

@error.404

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./public/*.html"],
  darkMode: "class",
  theme: {
    extend: {
      colors: {
        Brown: {
          100: "#ECE0D1",
          300: "#DBC1AC",
          600: "#967259",
          900: "#634832"
        },
        customColor: "#FED7AA33",
      },
      boxShadow: {
        "normal": "0px 1px 10px 0px rgba(0, 0, 0, 0.05)"
      },
      borderRadius: {
        "4xl": "2rem"
      },
      fontFamily: {
        // dana font
        "Dana": "Dana",
        "DanaMedium": "Dana Medium",
        "DanaDemibold": "Dana Demibold",
        // morabba font
        "Morabba": "Morabba",
        "MorabbaLight": "Morabba Light",
        "MorabbaBold": "Morabba Bold"
      },
      letterSpacing: {
        "custom": "-1.3px"
      },
      spacing: {
        8.5: "2.125rem"
      },
      container: {
        center: true,
        padding: {
          DEFAULT: "1rem",
          lg: "0.625rem"
        }
      },
      backgroundImage: {
        "home-mobile": "url(../images/headerBgMobile.webp)",
        "home-desktop": "url(../images/headerBgDesktop.webp)"
      }
    },
    screens: {
      'xs': '480px',
      // => @media (min-width: 480px) { ... }

      'sm': '640px',
      // => @media (min-width: 640px) { ... }

      'md': '768px',
      // => @media (min-width: 768px) { ... }

      'lg': '1024px',
      // => @media (min-width: 1024px) { ... }

      'xl': '1280px',
      // => @media (min-width: 1280px) { ... }
    }
  },
  plugins: [
      function ({ addVariant }) {
        addVariant('child', '& > *');
        addVariant('child-hover', '& > *:hover');
    }
  ],
}

package.json

{
  "devDependencies": {
    "tailwindcss": "^3.4.1"
  },
  "scripts": {
    "build": "npx tailwindcss -i ./src/input.css -o ./public/styles/app.css --watch"
  }
}

اگر فایلی دیگه ای هم لازم هس بگید...

input.css هم بدین

@error.404

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    /* dana font */
    @font-face {
        font-family: "Dana";
        src: local("Dana"), url("../fonts/dana/woff2/DanaFaNum-Regular.woff2");
    }

    @font-face {
        font-family: "Dana Medium";
        src:  local("Dana Medium"), url("../fonts/dana/woff2/DanaFaNum-Medium.woff2");
    }

    @font-face {
        font-family: "Dana Demibold";
        src:  local("Dana Demibold"), url("../fonts/dana/woff2/DanaFaNum-DemiBold.woff2");
    }
    /* morabba font */
    @font-face {
        font-family: "Morabba";
        src:  local("Morabba"), url("../fonts/morabba/woff2/Morabba-Light.woff2");
    }

    @font-face {
        font-family: "Morabba Light";
        src:  local("Morabba Light"), url("../fonts/morabba/woff2/Morabba-Light.woff2");
    }

    @font-face {
        font-family: "Morabba Bold";
        src:  local("Morabba Bold"), url("../fonts/morabba/woff2/Morabba-Bold.woff2");
    }

    /* body {
        background-image: url("../images/headerBgDesktop.webp");
        background-repeat: no-repeat;
        background-size: cover;
    } */

}

@layer components {
    .submenu {
        @apply hidden flex-col gap-3 mt-3 pr-7 text-sm text-zinc-600 child-hover:text-orange-300 dark:text-white;
    }

    .submenu a {
        @apply relative transition-all;
    }

    .submenu a:hover {
       @apply pr-3 text-orange-300;
    }

    .submenu a:hover::after {
        content: " ";
        display: inline-block;
        width: 8px;
        height: 4px;
        border-radius: 2px;
        background-color: #FDBA74;
        position: absolute;
        top: 0;
        right: 0;
        /* left: 0; */
        bottom: 0;
        margin: auto;
    }

    .submenu--open {
        @apply flex;
    }

    .overlay {
        @apply md:hidden invisible opacity-0 fixed inset-0 w-full h-full bg-black/40 z-10 duration-500;
    }

    .overlay--visible { 
        @apply visible opacity-100;
    }

    .circle-container {
        @apply absolute left-0 right-0 bottom-0 m-x-auto translate-y-1/2;
    }

    .circle {
        @apply flex justify-center items-center border rounded-full;
    }

    .circle--xl {
        @apply w-[203px] h-[203px] border-white/25;
    }

    .circle--lg {
        @apply w-[145px] h-[145px] border-white/50;
    }

    .circle--md {
        @apply w-[95px] h-[95px] border-white/80;
    }

}

آخرین بار تو فایل input css لایه کامپوننت 3 کلاس آخر رو تغییر دادم

مطمعن هستید کلاس هارو توی tailwind.config.js
نوشتید

یه کد index.html هم بدید ممنون
ببخشید

@error.404
کدوم کلاس ها؟

@mehdi8686h
هیچی هیچی مشکلی نیست
فقط کد html رو بدین

@error.404
خواهش میکنم آرتین جان

<!-- circle -->
            <div class="circle-container">
                <div class="circle circle--xl">
                    <div class="circle circle--lg">
                        <div class="circle circle--md"></div>
                    </div>
                </div>
            </div>

کد شما دقیقا درسته یه عکس از خروجی بفرستید و بگید چی از کدتون انتظار دارید؟

@error.404
اینو فراموش کردم اینجا بزارم

<div class="absolute bottom-0 left-0 right-0 m-x-auto">
                <div class="w-[30px] h-[30px] border-2 border-orange-300 rounded-full"> 
                    <svg class="w-5 h-5 text-zinc-700">
                        <use href="#chevron-down"></use>
                    </svg>
                </div>
            </div>

به جز وسط اومدن arrow باید ی دایره ای دورش بیاد...

@error.404
الان هرکلاس جدید دیگه ای هم بنویسم build نمیگیره
فقط این المان نیست