Глоссарий
What is Tailwind CSS?
Подробно
From its 2017 launch to 2026, Tailwind has become the most-installed CSS framework on npm (Bootstrap declined in 2022). Philosophy: do not write custom CSS — instead compose utility classes (mt-4 = margin-top: 1rem). Result: design tokens in HTML, no class-name burnout, automatic dead-CSS elimination.
v3 → v4 (2025): (1) **Engine rewrite** — Lightning CSS, 5× faster builds. (2) **Native CSS variables** — hsl(var(--color-blue-500)). (3) **Container queries first-class** — @container (min-width: 400px). (4) **3D transforms** — rotate-x-12, scale-z-95. (5) **CSS @import-style imports** — @import "tailwindcss" replaces tailwind.config.js. Migration v3 → v4: 2-8 hours typical project.
Class categories: (1) **Layout** — grid, flex, container. (2) **Spacing** — m-{0..96}, p-{0..96}. (3) **Typography** — text-sm, font-bold, leading-relaxed. (4) **Colors** — bg-blue-500, text-red-600 (50-950 scale). (5) **Borders** — border, border-2, rounded-lg, ring-2. (6) **Effects** — shadow-md, blur-sm, opacity-50. (7) **Responsive** — sm:, md:, lg:, xl:, 2xl: prefixes. (8) **State** — hover:, focus:, active:, disabled:. (9) **Dark mode** — dark: prefix.
For Georgian context: full Latin + Georgian Unicode support. Font stack: font-sans (Inter) + Georgian fallback (Noto Sans Georgian). RTL support: dir-rtl: prefix. Component libraries: Headless UI (accessibility), Radix (primitives), shadcn/ui (copy-paste components).
Craftwebstudio default 2024-2026: Tailwind v3 (stability) → v4 migration in 2026 H2. All 770+ pages styled with Tailwind. Custom theme: prismatic accent palette (purple/turquoise/coral/yellow) + Inter + Noto Sans Georgian.
Examples
- 1Card component: <div className="rounded-2xl border bg-white p-6 shadow-md">
- 2Responsive flex: flex flex-col md:flex-row gap-4
- 3Dark mode: bg-white dark:bg-gray-900 — automatic toggle
- 4Custom theme: tailwind.config.js theme.extend.colors → brand palette
- 5Bundle size: production build with dead-CSS removed → 8-15kb gzipped final
Связанные термины
Responsive Design
Responsive Design is a design approach that automatically adjusts layout to the visitor's screen size — mobile, tablet, …
React
React — JavaScript-библиотека для создания пользовательских интерфейсов от Meta. Основана на компонентах, виртуальном DO…
Next.js
Next.js — React-фреймворк для production-приложений: server-side rendering, статическая генерация, App Router, edge func…
Related services
Частые вопросы
Doesn't Tailwind make HTML messy with all those classes?▾
At first yes — 5-10 classes per element is common. Solution: extract repeating patterns into components (React/Vue). Component-based codebase stays clean.
Tailwind vs CSS-in-JS (styled-components)?▾
Tailwind: build-time CSS, 0 runtime overhead, smaller bundle. CSS-in-JS: dynamic theming, props-based styling, larger bundle. 2026 trend: Tailwind wins (RSC era — no runtime CSS).
Tailwind v3 vs v4 — when to migrate?▾
v4 is stable since Q4 2025. Migration: 2-8 hours typical project. We recommend waiting 6 months for stability vs immediate migration. Craftwebstudio v3 → v4 plan: 2026 H2.
Готовы к бесплатной консультации?
Напишите нам — ответим в течение 24 часов с предварительной оценкой проекта.