Dark Mode на Alpine.js + Tailwind CSS (через PostCSS)

mr. Cooper • 1 неделю назад • Веб-разработка

#TailwindCSS #PostCSS #Frontend #webdevelopment #javascript #AlpineJS #DarkMode #VSCode

Dark Mode на Alpine.js + Tailwind CSS (через PostCSS)

В этом туториале мы с нуля создадим тёмную тему для сайта с помощью:

Alpine.js (для логики)
Tailwind CSS (для стилей)
PostCSS (для сборки CSS)

Что мы сделаем в итоге

У нас будет:

кнопка переключения темы 🌙 / ☀️
сохранение темы в браузере
автоматическое определение темы системы
плавный переход между режимами

Шаг 1. Открываем VS Code

Открой VS Code
Создай папку проекта, например:

alpine-dark-mode

Нажми File → Open Folder и открой эту папку

Шаг 2. Открываем терминал в VS Code

В VS Code:

👉 нажми:

Ctrl +

или

👉 верхнее меню:

Terminal → New Terminal

Шаг 3. Создаем проект npm

В терминале вставь:

npm init -y

Это создаст файл package.json — основу проекта.

Шаг 4. Устанавливаем зависимости

Теперь устанавливаем Tailwind и PostCSS:

npm install -D tailwindcss postcss autoprefixer

Шаг 5. Устанавливаем Alpine.js

npm install alpinejs

Шаг 6. Создаем Tailwind конфиг

В терминале:

npx tailwindcss init -p

После этого появятся файлы:

tailwind.config.js
postcss.config.js

Шаг 7. Настраиваем Tailwind

Открой файл:

👉 tailwind.config.js

И замени содержимое на:

module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,html}"
  ],

  darkMode: 'class',

  theme: {
    extend: {},
  },

  plugins: [],
}

Шаг 8. Создаем структуру проекта

В VS Code слева создай папки:

src/

dist/

И файлы:

index.html

src/input.css

src/app.js

Шаг 9. Добавляем Tailwind CSS

Открой файл:

👉 src/input.css

И вставь:

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

Шаг 10. Добавляем сборку CSS

Открой package.json

Найди "scripts" и замени на:

"scripts": {
  "dev": "tailwindcss -i ./src/input.css -o ./dist/output.css --watch"
}

Шаг 11. Запускаем сборку

В терминале VS Code:

npm run dev

Теперь Tailwind будет автоматически собирать CSS

Шаг 12. Подключаем CSS в HTML

Открой index.html и добавь:

<link rel="stylesheet" href="./dist/output.css">

Шаг 13. Подключаем Alpine.js

В index.html перед </body> вставь:

<script type="module" src="./src/app.js"></script>

Шаг 14. Настраиваем Alpine.js

Открой файл:

👉 src/app.js

И вставь:

import Alpine from 'alpinejs'
window.Alpine = Alpine
Alpine.start()

Шаг 15. Делаем базовую страницу

Открой index.html и вставь:

<body class="transition-colors duration-300">

Шаг 16. Добавляем Alpine state

Заменяем <body> на:

<body
  x-data="{
    darkMode:
      localStorage.getItem('darkMode') === 'true'
      || (
        !localStorage.getItem('darkMode')
        && window.matchMedia('(prefers-color-scheme: dark)').matches
      )
  }"
>

Шаг 17. Включаем dark mode при загрузке

Добавь внутрь <body>:

x-init="
  if (darkMode) {
    document.documentElement.classList.add('dark')
  }
"

Шаг 18. Создаем layout

Вставь внутрь <body>:

<div class="min-h-screen bg-white text-black dark:bg-zinc-900 dark:text-white">

  <div class="max-w-2xl mx-auto py-20 px-6">

    <div class="flex items-center justify-between mb-8">

      <h1 class="text-4xl font-bold">
        Dark Mode Tutorial
      </h1>

      <!-- кнопка -->
      <button
        @click="
          darkMode = !darkMode;
          localStorage.setItem('darkMode', darkMode);

          if (darkMode) {
            document.documentElement.classList.add('dark')
          } else {
            document.documentElement.classList.remove('dark')
          }
        "
        class="w-12 h-12 rounded-xl bg-zinc-200 dark:bg-zinc-700 flex items-center justify-center"
      >

        <span x-show="!darkMode">☀️</span>
        <span x-show="darkMode">🌙</span>

      </button>

    </div>

    <p class="text-zinc-600 dark:text-zinc-400">
      Это пример dark mode на Alpine.js + Tailwind CSS
    </p>

  </div>

</div>

Шаг 19. Добавляем dark стили

Пример:

<div class="bg-white dark:bg-black">

<p class="text-black dark:text-white">

Как это работает (очень просто)

1. Alpine хранит состояние:

darkMode: true/false

2. Tailwind смотрит на класс:

<html class="dark">

3. JS добавляет/убирает класс

Шаг 20. Проверка

Теперь:

Сохрани файл

Открой index.html в браузере

Нажми кнопку 🌙

Готовый index.html (Tailwind через PostCSS + Alpine.js)

<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <title>Dark Mode на Alpine.js + Tailwind</title>

  <!-- Tailwind CSS (собранный через PostCSS) -->
  <link rel="stylesheet" href="./dist/output.css" />
</head>

<body
  x-data="{
    darkMode:
      localStorage.getItem('darkMode') === 'true'
      || (
        !localStorage.getItem('darkMode')
        && window.matchMedia('(prefers-color-scheme: dark)').matches
      )
  }"

  x-init="
    if (darkMode) {
      document.documentElement.classList.add('dark')
    }
  "

  class="transition-colors duration-300"
>

  <div class="min-h-screen bg-white text-black dark:bg-zinc-900 dark:text-white">

  <div class="max-w-2xl mx-auto py-20 px-6">

    <div class="flex items-center justify-between mb-8">

      <h1 class="text-4xl font-bold">
        Dark Mode Tutorial
      </h1>

      <!-- кнопка -->
      <button
        @click="
          darkMode = !darkMode;
          localStorage.setItem('darkMode', darkMode);

          if (darkMode) {
            document.documentElement.classList.add('dark')
          } else {
            document.documentElement.classList.remove('dark')
          }
        "
        class="w-12 h-12 rounded-xl bg-zinc-200 dark:bg-zinc-700 flex items-center justify-center"
      >

        <span x-show="!darkMode">☀️</span>
        <span x-show="darkMode">🌙</span>

      </button>

    </div>

    <p class="text-zinc-600 dark:text-zinc-400">
      Это пример dark mode на Alpine.js + Tailwind CSS
    </p>

  </div>

</div>


  <script type="module" src="./src/app.js"></script>

</body>

</html>