Tailwind CSS — это современный CSS-фреймворк, который позволяет быстро и удобно стилизовать сайты, не тратя время на написание «с нуля» длинных стилей. Он основан на утилитарных классах: вы просто добавляете их в HTML, и сразу получаете готовый результат.

Навигация по статье

Запуск без установки: Play CDN

Если вы хотите попробовать Tailwind прямо в браузере, без установки и сборки, используйте Play CDN. Это супер-удобный способ для обучения и экспериментов. Но важно: Play CDN предназначен только для разработки, в продакшене он не подходит.

Подключение Tailwind

Откройте ваш HTML-файл и вставьте этот скрипт в <head>:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

Теперь вы можете использовать классы Tailwind. Например, сделаем заголовок и кнопку:

<h1 class="text-4xl font-bold text-blue-600 mb-4">
  Добро пожаловать в Tailwind 🚀
</h1>

<button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600">
  Нажми меня
</button>

Установка в проект (с Vite)

Если вы хотите использовать Tailwind в реальном проекте, лучше всего подключить его через Vite.

Создаём проект

npm create vite@latest my-project
cd my-project

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

npm install tailwindcss @tailwindcss/vite

Настраиваем Vite

В файле vite.config.ts добавляем плагин:

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [tailwindcss()],
})

Импортируем Tailwind в CSS

📢 Подписывайтесь на наш Telegram-канал.

Там вы найдете анонсы обучающих статей и видео, готовый код для ваших проектов и увлекательные курсы. Ничего лишнего — только практика, вдохновение и развитие.

👉 https://t.me/codelab_channel

В файле style.css пишем:

@import "tailwindcss";

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

npm run dev

Используем стили

Сначала подключите скомпилированные стили в <head>:

<link href="/src/style.css" rel="stylesheet">

Теперь можно стилизовать элементы прямо в HTML. Например:

<h2 class="text-3xl font-semibold text-purple-600 mb-3">
  Привет из Tailwind ✨
</h2>

<p class="text-gray-700 mb-4">
  Это простой абзац с базовым стилем.
</p>

<a href="#" class="px-3 py-2 bg-purple-500 text-white rounded hover:bg-purple-600">
  Ссылка-кнопка
</a>

Как работает Tailwind CSS?

Tailwind сканирует все ваши HTML, JavaScript и шаблонные файлы, ищет в них классы и автоматически генерирует нужные стили.
В итоге создаётся компактный CSS-файл, в котором есть только те стили, что реально используются.

Быстро — меньше лишнего кода.
Удобно — всё в HTML, не нужно искать стили по разным файлам.
Надёжно — никакого «магического» поведения, всё предсказуемо.

Итоги

Хотите просто попробовать Tailwind? — используйте Play CDN.
Нужен рабочий проект? — ставьте Tailwind через Vite или PostCSS.

Tailwind удобен, потому что стили можно писать прямо в разметке: меньше отвлекаешься на отдельные CSS-файлы и быстрее видишь результат.

Tailwind — это словно «лего для стилей»: берёте готовые блоки и быстро собираете дизайн сайта, будь то простая визитка или полноценное веб-приложение.