Skip to content

Tailwind, Vite начало работы

CDN

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- <script src="https://cdn.tailwindcss.com"></script> -->
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Привет мир!
  </h1>
</body>
</html>

CLI установка

Инициализация фронтенд проекта

npm init -y

После создания проекта будет создан файл packege.json, который описывает все глобальные характеристики проекта

Устанавливаем tailwind

npm install -D tailwindcss

добавляется католог node_modeles который содержит все существующие библиотеки проекта. package-lock.json формируется автоматически, он содержит перечень версий всех реально установленных пакетов и пакетов, установленных по зависимостям.

Инициализируем проект как tailwind

npx tailwindcss init
# или
npx tailwindcss-cli@latest init

cli - это название вашего проекта Создается файл tailwind.config.js с глобальными настройками для tailwind

Согласно инструкции с официального сайта tailwind изменим только что появившийся файл и добавим строчку content: ["./src/**/*.{html,js}"], которая говорит о том что tailwind будет использоваться только в каталоге src, и применен ко всем файлам html и js.

Создадим каталог source

mkdir src

Согласно пункта 3 установки создадим новый файл src/input.css с содержимым

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

Данный файл является сбросом и установкой стандарных CSS стилей

Соглано шагу 4 предлагается преобразовать код из input.css в настоящие CSS стили, но данную команду мы будем выполнять другим образом.

npx tailwindcss -i ./src/input.css -o ./src/output.css --watch

Перейдем в файл package.json и в разделе script кодавим следующую строчку

  "scripts": {
    "start": "npx npx tailwindcss-cli@latest -i ./src/input.css -o ./src/css/output.css --watch"
  }

параметр --watch будет отслеживать изменения в файле input.css и преобразовывать в стили.

Для сощдания файла ./src/css/output.css теперь в терминале потребуется выполнить команду npm run start

Для проверки корректности работы с tailwind создадим в src файл index.html и подключим стили

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="./css/output.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Привет мир!
  </h1>
</body>
</html>

Проверь корректность работы через live server.

Особое внимание следует уделить проверки путей которые устанавливали для файлов указанных в инструкции.

Work javascript

Подключение к javascript происходит стандартным образом. Создадим каталог js и файл в нем файл script.js.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind + JS</title>
  <!-- Подключение скомпилированного CSS -->
  <link rel="stylesheet" href="./css/output.css">
</head>
<body class="bg-gray-100 p-4">
  <div id="app" class="max-w-md mx-auto bg-white shadow-lg rounded-lg p-6">
    <h1 class="text-2xl font-bold text-center">Hello, Tailwind + JS!</h1>
    <button id="btn" class="mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">Click Me</button>
  </div>

  <!-- Подключение JavaScript -->
  <script src="./js/script.js"></script>
</body>
</html>

document.addEventListener('DOMContentLoaded', () => {
  const button = document.getElementById('btn');
  button.addEventListener('click', () => {
    alert('Button clicked!');
    button.classList.toggle('bg-red-500');
  });
});

Убедимся что все работает через live server

Напоминатие про проверку протисанных путей в файлах

Проверим работу сторонних библиотек javascript на примере axios

npm i axios

Если пакет установился корректно, то он должен появиться в файле packege.json в разделе dependencies.

Пакет axios является очень важной составной частью любово ИТ проекта так, как он позволяет связать фронтенд и бекенд через api, со стороны фронтенда

Сборщик Vite

Для локальной разработки без docker можно использовать локаный сборщик vite

Заменим блок scripts в package.json

  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },

Создадим конфигурационный файл для vite в корне проекта vite.config.js с содержимым.

import { defineConfig } from 'vite';

export default defineConfig({
  css: {
    postcss: {
      plugins: [
        require('autoprefixer'), // Добавьте autoprefixer для поддержки старых браузеров
      ],
    },
  },
});

Установим дополнительнын библиотеки

npm install vite
npm install -D autoprefixer

Терепь сделующие команды позволят собирать проект

  npm run dev        # Запуск режима разработки
  npm run build      # Сборка production-версии
  npm run preview    # Предпросмотр production-сборки

Для проверки в предпросмотра production-сборки необходимо сначала выполнить команду npm run build, а потом npm run preview. В случае если вы изменили проект повторите команды заново

Build docker

Для сборки проекта перенесем index.html в корень проекта

и добавим в package.json строку

"build": "npx tailwindcss-cli@latest -i ./src/input.css -o ./src/css/output.css --minify"

Конфигурация отличается параметром --minify — это простой инструмент для оптимизации CSS в Tailwind CSS. Он автоматически минимизирует размер выходного файла, что особенно важно для продакшен-среды, где каждый байт имеет значение.

Создадим Dockerfile с содержимым

# Базовый образ
FROM nginx:alpine

# Копируем конфигурацию Nginx
COPY nginx.conf /etc/nginx/nginx.conf

# Копируем статические файлы в директорию /usr/share/nginx/html
COPY . /usr/share/nginx/html

# Запуск Nginx
CMD ["nginx", "-g", "daemon off;"]

создадаим конфигурационный файл nginx

events {}

http {
    include       mime.types;
    default_type  application/octet-stream;

    server {
        listen       80;
        server_name  localhost;

        location / {
            root   /usr/share/nginx/html;
            index  index.html;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   /usr/share/nginx/html;
        }
    }
}

Создадим docker-compose.yml в корне проекта

version: '3.8'

services:
  web:
    build: .
    ports:
      - "8080:80"
    volumes:
      - .:/usr/share/nginx/html

Запустим проект

docker compose up -d