CSS в гнездование с Vite 6.2.3 & Tailwindcss v4.0.16 работает только на разработке, а не на сборке ⇐ CSS

[Anonymous]

Я работаю с: < /p>

• VITE v6.1 < /li>
  Tailwind v4.0.16 < /li>
  < /ul>
  Всякий раз, когда я запускаю свой Dev Server, классы. Контейнера генерируются, и все работает нормально. В тот момент, когда я делаю сборку,. Контейнер не включен в CSS.

  Код: Выделить всё

  import { defineConfig } from 'vite'
  import tailwindcss from '@tailwindcss/vite'
  export default defineConfig({
  plugins: [
  tailwindcss(),
  ],
  })
  

  package.json

  Код: Выделить всё

  {
  "type": "module",
  "scripts": {
  "dev": "vite",
  "build": "vite build"
  },
  "dependencies": {
  "@tailwindcss/vite": "^4.0.16",
  "tailwindcss": "^4.0.16"
  }
  }
  

  app.css

  Код: Выделить всё

  @import "tailwindcss";
  
  @theme {
  /* Extra breakpoints */
  --breakpoint-xs: 440px;
  --breakpoint-ml: 960px;
  
  /* Container paddings */
  --container-padding: 30px;
  
  /* Container sizes */
  --container-xs: 1100px;
  --container-sm: 1325px;
  --container: 1625px;
  --container-lg: 2180px;
  --container-xl: 2447px;
  --container-2xl: 2674px;
  }
  .container {
  max-width: calc(var(--container) + (var(--container-padding) * 2)) !important;
  
  margin-left: auto !important;
  margin-right: auto !important;
  
  padding-left: var(--container-padding) !important;
  padding-right: var(--container-padding) !important;
  
  &-xs {
  max-width: calc(var(--container-xs) + (var(--container-padding) * 2)) !important;
  }
  
  &-sm {
  max-width: calc(var(--container-sm) + (var(--container-padding) * 2)) !important;
  }
  
  &-lg {
  max-width: calc(var(--container-lg) + (var(--container-padding) * 2)) !important;
  }
  
  &-xl {
  max-width: calc(var(--container-xl) + (var(--container-padding) * 2)) !important;
  }
  
  &-2xl {
  max-width: calc(var(--container-2xl) + (var(--container-padding) * 2)) !important;
  }
  }
  

  index.html>

  Код: Выделить всё

  
  
  
  
  
  
  
  
  
  
  Hello world!
  
  
  
  
  < /code>
  Таким образом, проблема, склонная к выводу моего CSS, будет следующим. Но это не отображается. Только когда в режиме разработчика он работает, но не после сборки.:root {
  /* Extra breakpoints */
  --breakpoint-xs: 440px;
  --breakpoint-ml: 960px;
  /* Container paddings */
  --container-padding: 30px;
  /* Container sizes */
  --container-xs: 1100px;
  --container-sm: 1325px;
  --container: 1625px;
  --container-lg: 2180px;
  --container-xl: 2447px;
  --container-2xl: 2674px;
  }
  
  .container {
  max-width: calc(var(--container) + var(--container-padding) * 2) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--container-padding) !important;
  padding-right: var(--container-padding) !important;
  }
  .container-xs {
  max-width: calc(var(--container-xs) + var(--container-padding) * 2) !important;
  }
  .container-sm {
  max-width: calc(var(--container-sm) + var(--container-padding) * 2) !important;
  }
  .container-lg {
  max-width: calc(var(--container-lg) + var(--container-padding) * 2) !important;
  }
  .container-xl {
  max-width: calc(var(--container-xl) + var(--container-padding) * 2) !important;
  }
  .container-2xl {
  max-width: calc(var(--container-2xl) + var(--container-padding) * 2) !important;
  }
  

  Видео вопроса:
  
  https://streamable.com/p0teog

Подробнее здесь: https://stackoverflow.com/questions/795 ... ot-on-buil