Add Vite + TailwindCSS v4 integration with full HMR support

.gitignore

@@ -7,11 +7,26 @@
 .Trashes
 ehthumbs.db
 Thumbs.db
+
+# Node.js
 node_modules/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+package-lock.json
+yarn.lock
+pnpm-lock.yaml
 
 # Shopify CLI files
 .shopify/
 
+# Vite build artifacts
+assets/main.min.js
+assets/main.min.css
+assets/.vite/
+dist/
+.vite/
+
 ## Release files
 release
 *.zip

.shopifyignore

@@ -11,3 +11,21 @@
 #
 # Ignore templates and sections with a regular expression:
 #   /(templates|sections)/.*\.json/
+
+# Source files (not needed in production)
+src/
+
+# Build configuration
+vite.config.ts
+tailwind.config.ts
+postcss.config.cjs
+tsconfig.json
+
+# Node.js
+node_modules/
+package.json
+package-lock.json
+
+# Development files
+.vite/
+dist/

.vscode/settings.json

@@ -0,0 +1,35 @@
+{
+  "files.associations": {
+    "*.liquid": "liquid"
+  },
+  "emmet.includeLanguages": {
+    "liquid": "html"
+  },
+  "liquid.format.enable": true,
+  "editor.formatOnSave": true,
+  "[liquid]": {
+    "editor.defaultFormatter": "Shopify.theme-check-vscode"
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[css]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "tailwindCSS.experimental.classRegex": [
+    ["class:\\s*['\"`]([^'\"`]*)['\"`]", "['\"`]([^'\"`]*)['\"`]"]
+  ],
+  "tailwindCSS.includeLanguages": {
+    "liquid": "html"
+  },
+  "css.validate": false,
+  "files.exclude": {
+    "**/.git": true,
+    "**/.DS_Store": true,
+    "**/node_modules": true,
+    "**/.shopify": true
+  }
+}

QUICKSTART.md

@@ -0,0 +1,179 @@
+# 🚀 Quick Start Guide
+
+## Setup (первый раз)
+
+```bash
+# 1. Установить зависимости
+npm install
+
+# 2. Собрать assets
+npm run build
+
+# 3. Запустить dev сервер
+npm run dev
+```
+
+## Ежедневная разработка
+
+```bash
+npm run dev
+```
+
+Откроет:
+- Vite: http://localhost:5173 (HMR)
+- Shopify: URL из Shopify CLI
+
+## Использование TailwindCSS
+
+### В Liquid шаблонах
+
+```liquid
+<div class="container mx-auto px-4">
+  <h1 class="text-4xl font-bold text-gray-900">
+    {{ product.title }}
+  </h1>
+  <button class="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
+    Add to Cart
+  </button>
+</div>
+```
+
+### Кастомные стили
+
+В `src/main.css`:
+
+```css
+@layer components {
+  .btn-primary {
+    @apply px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700;
+  }
+}
+```
+
+### Кастомизация темы
+
+В `tailwind.config.ts`:
+
+```ts
+export default {
+  theme: {
+    extend: {
+      colors: {
+        brand: {
+          primary: '#1a73e8',
+          secondary: '#fbbc04',
+        }
+      }
+    }
+  }
+}
+```
+
+## Что где редактировать
+
+| Файл | Назначение | HMR |
+|------|------------|-----|
+| `src/main.css` | Глобальные стили + Tailwind | ✅ Да (~300ms) |
+| `src/main.js` | JavaScript логика | ✅ Да (~200ms) |
+| `sections/*.liquid` | Shopify секции | ⚠️ Reload (~3s) |
+| `snippets/*.liquid` | Многоразовые компоненты | ⚠️ Reload (~3s) |
+| `tailwind.config.ts` | Настройки Tailwind | ⚠️ Restart needed |
+
+## Перед деплоем
+
+```bash
+# 1. Собрать production assets
+npm run build
+
+# 2. Проверить что файлы созданы
+ls -la assets/main.min.*
+
+# 3. Запушить в Shopify
+npm run shopify:push
+```
+
+## Полезные команды
+
+```bash
+# Только Vite dev server
+npm run vite:dev
+
+# Только Shopify preview
+npm run shopify:dev
+
+# Build production
+npm run build
+
+# Preview production build
+npm run preview
+
+# Pull theme from Shopify
+npm run shopify:pull
+```
+
+## Troubleshooting
+
+### CSS не обновляется
+```bash
+npm run build
+# Перезагрузить страницу с Ctrl+Shift+R
+```
+
+### Vite не запускается
+```bash
+# Проверить что порт 5173 свободен
+lsof -ti:5173 | xargs kill -9
+npm run vite:dev
+```
+
+### "Module not found"
+```bash
+rm -rf node_modules package-lock.json
+npm install
+```
+
+## Примеры компонентов
+
+### Product Card
+
+```liquid
+<div class="group relative bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow duration-300">
+  <div class="aspect-w-1 aspect-h-1 w-full overflow-hidden bg-gray-200">
+    {{ product.featured_image | image_url: width: 500 | image_tag:
+      class: 'w-full h-full object-cover group-hover:scale-105 transition-transform duration-300'
+    }}
+  </div>
+  <div class="p-4">
+    <h3 class="text-lg font-semibold text-gray-900 mb-2">
+      {{ product.title }}
+    </h3>
+    <p class="text-gray-600 mb-4">
+      {{ product.price | money }}
+    </p>
+    <button class="w-full px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors">
+      Add to Cart
+    </button>
+  </div>
+</div>
+```
+
+### Modal/Dialog
+
+```liquid
+<dialog class="rounded-lg shadow-xl p-0 backdrop:bg-black/50">
+  <div class="bg-white rounded-lg max-w-md p-6">
+    <h2 class="text-2xl font-bold mb-4">Modal Title</h2>
+    <p class="text-gray-600 mb-6">Modal content goes here...</p>
+    <button class="px-4 py-2 bg-gray-200 rounded-md hover:bg-gray-300">
+      Close
+    </button>
+  </div>
+</dialog>
+```
+
+## Подробная документация
+
+- [VITE_SETUP.md](./VITE_SETUP.md) - Полная настройка Vite
+- [README.md](./README.md) - Общая документация темы
+
+Happy coding! 🎉

README.md

@@ -7,17 +7,22 @@
 
 A minimal, carefully structured Shopify theme designed to help you quickly get started. Designed with modularity, maintainability, and Shopify's best practices in mind.
 
+**Enhanced with Vite + TailwindCSS v4** for blazing-fast development with Hot Module Replacement (HMR).
+
 <p align="center">
   <a href="./LICENSE.md"><img src="https://img.shields.io/badge/License-MIT-green.svg" alt="License"></a>
   <a href="./actions/workflows/ci.yml"><img alt="CI" src="https://github.com/Shopify/skeleton-theme/actions/workflows/ci.yml/badge.svg"></a>
+  <img src="https://img.shields.io/badge/Vite-6.x-646CFF?logo=vite" alt="Vite">
+  <img src="https://img.shields.io/badge/TailwindCSS-v4-06B6D4?logo=tailwindcss" alt="TailwindCSS">
 </p>
 
 ## Getting started
 
 ### Prerequisites
 
-Before starting, ensure you have the latest Shopify CLI installed:
+Before starting, ensure you have the following installed:
 
+- [Node.js](https://nodejs.org/) (v18 or higher) – required for Vite and TailwindCSS
 - [Shopify CLI](https://shopify.dev/docs/api/shopify-cli) – helps you download, upload, preview themes, and streamline your workflows
 
 If you use VS Code:
@@ -30,30 +35,58 @@ Clone this repository using Git or Shopify CLI:
 
 ```bash
 git clone git@github.com:Shopify/skeleton-theme.git
-# or
-shopify theme init
+cd skeleton-theme
+```
+
+### Install Dependencies
+
+Install Node.js dependencies for Vite and TailwindCSS:
+
+```bash
+npm install
 ```
 
-### Preview
+### Development
 
-Preview this theme using Shopify CLI:
+Run both Vite dev server (with HMR) and Shopify CLI preview:
 
 ```bash
-shopify theme dev
+npm run dev
+```
+
+This starts:
+- **Vite dev server** on `http://localhost:5173` with Hot Module Replacement
+- **Shopify CLI** theme preview with Liquid hot-reload
+
+For more details, see [VITE_SETUP.md](./VITE_SETUP.md).
+
+### Build for Production
+
+Generate optimized assets:
+
+```bash
+npm run build
 ```
 
 ## Theme architecture
 
 ```bash
 .
-├── assets          # Stores static assets (CSS, JS, images, fonts, etc.)
-├── blocks          # Reusable, nestable, customizable UI components
-├── config          # Global theme settings and customization options
-├── layout          # Top-level wrappers for pages (layout templates)
-├── locales         # Translation files for theme internationalization
-├── sections        # Modular full-width page components
-├── snippets        # Reusable Liquid code or HTML fragments
-└── templates       # Templates combining sections to define page structures
+├── src/                # Source files (processed by Vite)
+│   ├── main.css       # TailwindCSS entry point
+│   └── main.js        # JavaScript entry point
+├── assets/             # Static assets + Vite build output
+│   ├── main.min.css   # Generated by Vite (gitignored)
+│   └── main.min.js    # Generated by Vite (gitignored)
+├── blocks/             # Reusable, nestable, customizable UI components
+├── config/             # Global theme settings and customization options
+├── layout/             # Top-level wrappers for pages (layout templates)
+├── locales/            # Translation files for theme internationalization
+├── sections/           # Modular full-width page components
+├── snippets/           # Reusable Liquid code or HTML fragments
+├── templates/          # Templates combining sections to define page structures
+├── vite.config.ts      # Vite bundler configuration
+└── tailwind.config.ts  # TailwindCSS customization
 ```
 
 To learn more, refer to the [theme architecture documentation](https://shopify.dev/docs/storefronts/themes/architecture).
@@ -143,11 +176,28 @@ When developing components defined by schema settings, we recommend these guidel
 
 ## CSS & JavaScript
 
-For CSS and JavaScript, we recommend using the [`{% stylesheet %}`](https://shopify.dev/docs/api/liquid/tags#stylesheet) and [`{% javascript %}`](https://shopify.dev/docs/api/liquid/tags/javascript) tags. They can be included multiple times, but the code will only appear once.
+### TailwindCSS v4
+
+This theme uses **TailwindCSS v4** for styling. You can use utility classes directly in your Liquid templates:
+
+```liquid
+<div class="container mx-auto px-4">
+  <h1 class="text-4xl font-bold">{{ product.title }}</h1>
+</div>
+```
+
+Customize design tokens in `tailwind.config.ts`.
+
+### Component Styles
+
+For component-specific styles, you can still use the [`{% stylesheet %}`](https://shopify.dev/docs/api/liquid/tags#stylesheet) and [`{% javascript %}`](https://shopify.dev/docs/api/liquid/tags/javascript) tags within sections. They can be included multiple times, but the code will only appear once.
 
-### `critical.css`
+### Global Styles
 
-The Skeleton Theme explicitly separates essential CSS necessary for every page into a dedicated `critical.css` file.
+Global styles are defined in `src/main.css`, which includes:
+- TailwindCSS base, components, and utilities
+- Custom base styles (similar to the previous `critical.css`)
+- Component-level styles using `@layer`
 
 ## Contributing