add nuxt/ui

app.vue

@@ -1,11 +1,7 @@
 <template>
-  <div>
+  <UApp>
     <NuxtLayout>
       <NuxtPage />
     </NuxtLayout>
-  </div>
+  </UApp>
 </template>
-
-<style lang="scss">
-@use '@/assets/scss/main' as *;
-</style>

assets/css/main.css

@@ -0,0 +1,2 @@
+@import "tailwindcss";
+@import "@nuxt/ui";

assets/scss/_breakpoints.scss

@@ -1,6 +0,0 @@
-// Breakpoints
-$breakpoint-sm: 576px;
-$breakpoint-md: 768px;
-$breakpoint-lg: 992px;
-$breakpoint-xl: 1200px;
-$breakpoint-xxl: 1400px;

assets/scss/_reset.scss

@@ -1,70 +0,0 @@
-/* Modern CSS Reset */
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-/* Remove default margin and padding */
-body,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p,
-figure,
-blockquote,
-dl,
-dd {
-  margin: 0;
-}
-
-/* Set core body defaults */
-body {
-  min-height: 100vh;
-  scroll-behavior: smooth;
-  text-rendering: optimizeSpeed;
-  line-height: 1.5;
-}
-
-/* Remove list styles on ul, ol elements */
-ul,
-ol {
-  list-style: none;
-}
-
-/* A elements that don't have a class get default styles */
-a:not([class]) {
-  text-decoration-skip-ink: auto;
-}
-
-/* Make images easier to work with */
-img,
-picture {
-  max-width: 100%;
-  display: block;
-}
-
-/* Inherit fonts for inputs and buttons */
-input,
-button,
-textarea,
-select {
-  font: inherit;
-}
-
-/* Remove all animations and transitions for people that prefer not to see them */
-@media (prefers-reduced-motion: reduce) {
-  *,
-  *::before,
-  *::after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-    scroll-behavior: auto !important;
-  }
-}

assets/scss/colors.scss

@@ -1,88 +0,0 @@
-// Brand Colors
-$brand-primary: #4f46e5; // Основной цвет бренда
-$brand-secondary: #10b981; // Вторичный цвет бренда
-
-// Neutral Colors
-$neutral-50: #f9fafb; // Самый светлый оттенок
-$neutral-100: #f3f4f6; // Светлый фон
-$neutral-200: #e5e7eb; // Светлая граница
-$neutral-300: #d1d5db; // Светлый текст
-$neutral-400: #9ca3af; // Неактивный текст
-$neutral-500: #6b7280; // Средний текст
-$neutral-600: #4b5563; // Основной текст
-$neutral-700: #374151; // Темный текст
-$neutral-800: #1f2937; // Очень темный текст
-$neutral-900: #111827; // Самый темный оттенок
-
-// Semantic Colors
-$text-primary: $neutral-900; // Основной текст
-$text-secondary: $neutral-600; // Вторичный текст
-$text-muted: $neutral-400; // Неактивный текст
-$background-primary: $neutral-50; // Основной фон
-$background-secondary: $neutral-100; // Вторичный фон
-$border-color: $neutral-200; // Цвет границ
-
-// Status Colors
-$success: #10b981; // Успех
-$warning: #f59e0b; // Предупреждение
-$error: #ef4444; // Ошибка
-$info: #3b82f6; // Информация
-
-// Basic Colors
-$black: #000000;
-$dark-background: #13141c;
-$dark-grey: #171821;
-$grey-selector: #1b1b24;
-$grey-blocks: #1e1f2b;
-$grey-text-highlight: #23242c;
-$grey-blocks-hover: #262736;
-$grey-menu: #292a32;
-$grey-stroke: #323442;
-$grey-paginator: #323442;
-$grey-icons: #5b5e6d;
-$grey-text: #7f808b;
-$grey-text2: #9A9BAB;
-$white: #ffffff;
-$greeen: #9fff00;
-$greeen-dark: #43611b;
-$red: #ff4141;
-$red-dark: #3e232c;
-$green: #20b26c;
-$green-dark: #133324;
-$gold: #ffc35c;
-
-// Form Elements
-$grey-form: #1c1d26;
-$grey-form-stroke: #323442;
-$grey-button: #21222d;
-$grey-button-2: #32323c;
-$grey-button-stroke: #5b5e6d;
-
-// Export colors for JavaScript
-:export {
-  black: $black;
-  darkBackground: $dark-background;
-  darkGrey: $dark-grey;
-  greySelector: $grey-selector;
-  greyBlocks: $grey-blocks;
-  greyTextHighlight: $grey-text-highlight;
-  greyBlocksHover: $grey-blocks-hover;
-  greyMenu: $grey-menu;
-  greyStroke: $grey-stroke;
-  greyPaginator: $grey-paginator;
-  greyIcons: $grey-icons;
-  greyText: $grey-text;
-  white: $white;
-  greeen: $greeen;
-  greeenDark: $greeen-dark;
-  red: $red;
-  redDark: $red-dark;
-  green: $green;
-  greenDark: $green-dark;
-  greyForm: $grey-form;
-  greyFormStroke: $grey-form-stroke;
-  greyButton: $grey-button;
-  greyButton2: $grey-button-2;
-  greyButtonStroke: $grey-button-stroke;
-  gold: $gold;
-}

assets/scss/global.scss

@@ -1,12 +0,0 @@
-@use 'main' as *;
-
-body {
-  font-family: 'Inter', sans-serif;
-  color: $text-color;
-  margin: 0;
-  padding: 0;
-}
-
-.container {
-  @include container;
-}

assets/scss/main.scss

@@ -1,78 +0,0 @@
-@use 'reset';
-@use 'colors' as *;
-@use 'typography' as *;
-@use 'utils' as *;
-
-// Base styles
-html {
-  font-size: 16px;
-  line-height: 1.5;
-  scroll-behavior: smooth;
-}
-
-body {
-  font-family: $font-family-base;
-  color: white;
-  background-color: black;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-// Typography
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-weight: $font-weight-semibold;
-  line-height: 100%;
-  color: #ffffff;
-}
-
-h1 {
-  @include h1('h1');
-}
-
-h2 {
-  @include h2('h2');
-}
-
-h3 {
-  @include h3('h3');
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-  transition: all 0.2s ease;
-}
-
-// Buttons
-button {
-  cursor: pointer;
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-  border: none;
-  background: none;
-  padding: 0;
-}
-
-// Forms
-input,
-textarea,
-select {
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-  color: inherit;
-  border-radius: 0.25rem;
-  padding: 0.5rem 1rem;
-  transition: all 0.2s ease;
-
-  &:focus {
-    outline: none;
-    border-color: $brand-primary;
-  }
-}

assets/scss/typography.scss

@@ -1,121 +0,0 @@
-@use 'utils' as *;
-
-// Font Face Declarations
-@font-face {
-  font-family: 'Inter';
-  src:
-    url('/fonts/Inter-Regular.woff2') format('woff2'),
-    url('/fonts/Inter-Regular.woff') format('woff');
-  font-weight: 400;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Inter';
-  src:
-    url('/fonts/Inter-Medium.woff2') format('woff2'),
-    url('/fonts/Inter-Medium.woff') format('woff');
-  font-weight: 500;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Inter';
-  src:
-    url('/fonts/Inter-SemiBold.woff2') format('woff2'),
-    url('/fonts/Inter-SemiBold.woff') format('woff');
-  font-weight: 600;
-  font-style: normal;
-  font-display: swap;
-}
-
-// Font Variables
-$font-family-base:
-  'Inter',
-  -apple-system,
-  BlinkMacSystemFont,
-  'Segoe UI',
-  Roboto,
-  sans-serif;
-
-// Font Weights
-$font-weight-regular: 400;
-$font-weight-medium: 500;
-$font-weight-semibold: 600;
-
-// Custom type
-@mixin font($size, $weight, $lineHeight, $namespace: null, $onlyVars: false) {
-  @if ($namespace) {
-    @if ($onlyVars) {
-      --#{$namespace}-font-size: #{$size};
-      --#{$namespace}-font-weight: #{$weight};
-      --#{$namespace}-line-height: #{$lineHeight};
-    } @else {
-      font-size: var(--#{$namespace}-font-size, $size);
-      font-weight: var(--#{$namespace}-font-weight, $weight);
-      line-height: var(--#{$namespace}-line-height, $lineHeight);
-    }
-  } @else {
-    font-size: $size;
-    font-weight: $weight;
-    line-height: $lineHeight;
-  }
-}
-
-/* Headline */
-@mixin h1($namespace: null, $onlyVars: false) {
-  @include font(32px, $font-weight-semibold, 100%, $namespace, $onlyVars);
-  @include mobile {
-    font-size: 24px;
-  }
-}
-@mixin h2($namespace: null, $onlyVars: false) {
-  @include font(24px, $font-weight-semibold, 100%, $namespace, $onlyVars);
-  @include mobile {
-    font-size: 20px;
-  }
-}
-@mixin h3($namespace: null, $onlyVars: false) {
-  @include font(16px, $font-weight-semibold, 140%, $namespace, $onlyVars);
-}
-
-/* Text */
-// 16 medium-(medium/bold)
-@mixin txt-m($namespace: null, $onlyVars: false) {
-  @include font(16px, $font-weight-regular, 100%, $namespace, $onlyVars);
-}
-@mixin txt-m-m($namespace: null, $onlyVars: false) {
-  @include font(16px, $font-weight-medium, 100%, $namespace, $onlyVars);
-}
-@mixin txt-m-b($namespace: null, $onlyVars: false) {
-  @include font(16px, $font-weight-semibold, 100%, $namespace, $onlyVars);
-}
-
-// 14 regular-(medium/bold)
-@mixin txt-r($namespace: null, $onlyVars: false) {
-  @include font(14px, $font-weight-regular, 20px, $namespace, $onlyVars);
-}
-@mixin txt-r-m($namespace: null, $onlyVars: false) {
-  @include font(14px, $font-weight-medium, 20px, $namespace, $onlyVars);
-}
-@mixin txt-r-b($namespace: null, $onlyVars: false) {
-  @include font(14px, $font-weight-semibold, 20px, $namespace, $onlyVars);
-}
-
-// 12 text small-(medium/bold)
-@mixin txt-s($namespace: null, $onlyVars: false) {
-  @include font(12px, $font-weight-regular, 18px, $namespace, $onlyVars);
-}
-@mixin txt-s-m($namespace: null, $onlyVars: false) {
-  @include font(12px, $font-weight-medium, 18px, $namespace, $onlyVars);
-}
-@mixin txt-s-b($namespace: null, $onlyVars: false) {
-  @include font(12px, $font-weight-semibold, 18px, $namespace, $onlyVars);
-}
-
-// 10 text-tiny
-@mixin txt-t($namespace: null, $onlyVars: false) {
-  @include font(10px, $font-weight-medium, 15px, $namespace, $onlyVars);
-}

assets/scss/utils.scss

@@ -1,153 +0,0 @@
-@use 'sass:color';
-@use 'sass:math';
-@use 'breakpoints' as *;
-
-// Mixins
-@mixin responsive($breakpoint) {
-  @media (min-width: $breakpoint) {
-    @content;
-  }
-}
-
-@mixin mobile {
-  @media (max-width: $breakpoint-md) {
-    @content;
-  }
-}
-
-$indents: 0 2 4 5 6 8 10 12 15 16 18 20 24 25 28 30 32 36 40 48 50 52 60 64;
-
-@each $i in $indents {
-  .m#{$i} {
-    margin: #{$i}px;
-  }
-
-  .mx#{$i} {
-    margin-left: #{$i}px;
-    margin-right: #{$i}px;
-  }
-
-  .my#{$i} {
-    margin-top: #{$i}px;
-    margin-bottom: #{$i}px;
-  }
-
-  .mt#{$i} {
-    margin-top: #{$i}px;
-  }
-
-  .mb#{$i} {
-    margin-bottom: #{$i}px;
-  }
-
-  .ml#{$i} {
-    margin-left: #{$i}px;
-  }
-
-  .mr#{$i} {
-    margin-right: #{$i}px;
-  }
-
-  .p#{$i} {
-    padding: #{$i}px;
-  }
-
-  .px#{$i} {
-    padding-left: #{$i}px;
-    padding-right: #{$i}px;
-  }
-
-  .py#{$i} {
-    padding-top: #{$i}px;
-    padding-bottom: #{$i}px;
-  }
-
-  .pt#{$i} {
-    padding-top: #{$i}px;
-  }
-
-  .pb#{$i} {
-    padding-bottom: #{$i}px;
-  }
-
-  .pl#{$i} {
-    padding-left: #{$i}px;
-  }
-
-  .pr#{$i} {
-    padding-right: #{$i}px;
-  }
-}
-
-.mla {
-  margin-left: auto;
-}
-
-.mra {
-  margin-left: auto;
-}
-
-.mx-auto {
-  margin-left: auto;
-  margin-right: auto;
-}
-
-@each $align in ('left', 'right', 'center') {
-  .text-align-#{$align} {
-    text-align: #{$align};
-  }
-}
-
-.w-25 { width: 25% !important; }
-.w-50 { width: 50% !important; }
-.w-75 { width: 75% !important; }
-.w-100 { width: 100% !important; }
-
-.d-none         { display: none !important; }
-.d-inline       { display: inline !important; }
-.d-inline-block { display: inline-block !important; }
-.d-block        { display: block !important; }
-.d-table        { display: table !important; }
-.d-table-row    { display: table-row !important; }
-.d-table-cell   { display: table-cell !important; }
-.d-flex         { display: flex !important; }
-.d-inline-flex  { display: inline-flex !important; }
-
-.flex-row            { flex-direction: row !important; }
-.flex-column         { flex-direction: column !important; }
-.flex-row-reverse    { flex-direction: row-reverse !important; }
-.flex-column-reverse { flex-direction: column-reverse !important; }
-
-.flex-wrap         { flex-wrap: wrap !important; }
-.flex-nowrap       { flex-wrap: nowrap !important; }
-.flex-wrap-reverse { flex-wrap: wrap-reverse !important; }
-
-.justify-content-start   { justify-content: flex-start !important; }
-.justify-content-end     { justify-content: flex-end !important; }
-.justify-content-center  { justify-content: center !important; }
-.justify-content-between { justify-content: space-between !important; }
-.justify-content-around  { justify-content: space-around !important; }
-
-.align-items-start    { align-items: flex-start !important; }
-.align-items-end      { align-items: flex-end !important; }
-.align-items-center   { align-items: center !important; }
-.align-items-baseline { align-items: baseline !important; }
-.align-items-stretch  { align-items: stretch !important; }
-
-.align-content-start   { align-content: flex-start !important; }
-.align-content-end     { align-content: flex-end !important; }
-.align-content-center  { align-content: center !important; }
-.align-content-between { align-content: space-between !important; }
-.align-content-around  { align-content: space-around !important; }
-.align-content-stretch { align-content: stretch !important; }
-
-.align-self-auto     { align-self: auto !important; }
-.align-self-start    { align-self: flex-start !important; }
-.align-self-end      { align-self: flex-end !important; }
-.align-self-center   { align-self: center !important; }
-.align-self-baseline { align-self: baseline !important; }
-.align-self-stretch  { align-self: stretch !important; }
-
-.text-align-center  { text-align: center !important; }
-.text-align-left  { text-align: left !important; }
-.text-align-right  { text-align: right !important; }

layouts/default.vue

@@ -17,18 +17,14 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/scss/colors.scss' as colors;
-@use '@/assets/scss/main.scss' as main;
-@use '@/assets/scss/utils.scss' as utils;
-
 .layout {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
-  background: colors.$dark-grey;
 }
 
 .container {
+  --ui-container: 100%;
   max-width: 100%;
   margin: 48px auto 100px;
 

nuxt.config.ts

@@ -3,4 +3,5 @@ export default defineNuxtConfig({
   compatibilityDate: '2025-05-15',
   devtools: { enabled: true },
   modules: ['@nuxt/ui', '@nuxt/image', '@nuxt/icon', '@nuxt/fonts'],
+  css: ['~/assets/css/main.css'],
 })

pages/index.vue

@@ -1,39 +1,43 @@
 <template>
-  <div class="card">
+  <UContainer>
-    <div class="card__images">
+    <UButton size="xl" label="btn" />
-      <div
-        v-for="image in currentVariantImages"
-        :key="image?.id"
-      >
-        <img width="100%" :src="image?.src" :alt="image?.src">
-      </div>
-    </div>
 
-    <div class="card__description">
+    <div class="card">
-      <h1>{{ productsData?.name }}</h1>
+      <div class="card__images">
-
-      Цена
-      {{ currentVariant?.price }}
-
-      Коротокое описание
-      {{ productsData?.short_description }}
-
-      <div class="card__variation">
         <div
-          v-for="variation in productsVariationsData"
+          v-for="image in currentVariantImages"
-          :key="variation?.id"
+          :key="image?.id"
-          @click="() => currentVariantId = variation?.id"
         >
-          {{ variation?.id }}
+          <img width="100%" :src="image?.src" :alt="image?.src">
-          <img width="200px" :src="variation?.image?.src">
         </div>
       </div>
 
-      <pre>
+      <div class="card__description">
+        <h1>{{ productsData?.name }}</h1>
+
+        Цена
+        {{ currentVariant?.price }}
+
+        Коротокое описание
+        {{ productsData?.short_description }}
+
+        <div class="card__variation">
+          <div
+            v-for="variation in productsVariationsData"
+            :key="variation?.id"
+            @click="() => currentVariantId = variation?.id"
+          >
+            {{ variation?.id }}
+            <img width="200px" :src="variation?.image?.src" :alt="variation?.image?.src">
+          </div>
+        </div>
+
+        <pre>
         {{ currentVariant }}
       </pre>
+      </div>
     </div>
-  </div>
+  </UContainer>
 </template>
 
 <script setup lang="ts">

tailwind.config.ts

@@ -0,0 +1,16 @@
+// tailwind.config.ts
+import type { Config } from 'tailwindcss'
+
+const config: Config = {
+  content: [], // Nuxt сам заполняет content автоматически
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['Inter', 'sans-serif'], // если используешь @nuxt/fonts или свою кастомную типографику
+      },
+    },
+  },
+  plugins: [],
+}
+
+export default config