The JavaScript configuration and plugin snippets here target Tailwind CSS 3. Tailwind CSS 4 uses CSS-first configuration; explicitly load a compatible legacy config with @config rather than assuming automatic discovery. Upgrade guide.

1. What is Tailwind (core idea)

Utility First (Atomic CSS)

• No (or very little) traditional CSS written
• Use class name to directly describe the style
• Class name = style semantics, not business semantics

<button class="px-4 py-2 bg-blue-500 text-white rounded">
  Button
</button>

Equivalent to:

button {
  padding: 8px 16px;
  background: #3b82f6;
  color: #fff;
  border-radius: 6px;
}

2. Core basic classification

1️⃣ Layout

display

<div class="block"></div>
<div class="inline-block"></div>
<div class="flex"></div>
<div class="grid"></div>

Flex (extremely common)

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

• flex-row / flex-col
• items-center (cross-axis)
• justify-center / between / around (spindle)

Grid

<div class="grid grid-cols-3 gap-4">

2️⃣ Spacing

margin / padding

<div class="m-4 p-2"></div>
<div class="mt-4 mb-2"></div>
<div class="px-4 py-2"></div>

Memory method:

• m / p
• t r b l x y
• Number = 4px * n

3️⃣Size

<div class="w-32 h-16"></div>
<div class="w-full h-screen"></div>
<div class="max-w-md"></div>

Commonly used:

• w-full
• h-screen
• min-h-screen
• max-w-xl

4️⃣Typography

<p class="text-sm text-gray-600"></p>
<p class="text-lg font-bold"></p>
<p class="leading-relaxed tracking-wide"></p>

• text-xs ~ text-2xl
• font-light / normal / medium / bold
• text-left / center / right

5️⃣ Color

<div class="bg-red-500 text-white"></div>
<div class="border border-gray-200"></div>

Structural unity:

{property}-{color}-{level}

Such as:

• bg-blue-500
• text-gray-700
• border-zinc-200

6️⃣ Borders & Rounded Corners & Shadow

<div class="border rounded-lg shadow-md"></div>

• rounded / rounded-md / rounded-full
• shadow / shadow-lg

7️⃣ Position

<div class="relative">
  <span class="absolute top-0 right-0"></span>
</div>

• relative
• absolute
• fixed
• sticky

3. Responsive (Tailwind is very strong)

breakpoint prefix

sm   ≥640px
md   ≥768px
lg   ≥1024px
xl   ≥1280px
2xl  ≥1536px

Usage

<div class="text-sm md:text-base lg:text-lg"></div>

📌 Mobile first

4. Status modification (very important)

hover / focus / active

<button class="bg-blue-500 hover:bg-blue-600 focus:ring-2">

group (father-son linkage)

<div class="group">
  <span class="group-hover:text-red-500"></span>
</div>

5. Dark Mode

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

tailwind.config.js：

darkMode: 'class'

6. Common combination routines (actual combat)

✅ Cards

<div class="p-4 rounded-lg shadow bg-white">

✅ Centered

<div class="flex items-center justify-center h-screen">

✅ Button

<button
  class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition"
>

7. Key points for using Tailwind in Vue

1️⃣ dynamic class

<div :class="isActive ? 'bg-blue-500' : 'bg-gray-300'"></div>

or:

<div :class="['p-4', isActive && 'bg-blue-500']"></div>

2️⃣ Avoid purging dynamic classes

❌

`bg-${color}-500`

✅

const map = {
  red: 'bg-red-500',
  blue: 'bg-blue-500'
}

8. When not to use Tailwind?

❌

• Super complex animation (recommended to cooperate with CSS / GSAP)
• Lots of repetitive components but no abstraction
• Collaboration with designers who are extremely sensitive to classes

✅

• Backstage/Midstage
• Component library
• rapid prototyping
• H5 page

9. Study sequence suggestions (for you)

1. Spacing / Flex / Typography
2. Responsive + Status Modification
3. Dark Mode
4. Tailwind Config（theme / extend）
5. Component abstraction (@apply / componentization)