## 事象
> [!note]
> 前提として、サンプルコードは[[Tailwind CSS]]を使っている。
以下のコードについて
```html
<div class="space-y-3>
<NuxtLink to="/users">
<Button variant="secondary" class="w-full justify-start">
<User class="mr-2" /> ユーザー
</Button>
</NuxtLink>
<NuxtLink to="/offices">
<Button variant="secondary" class="w-full justify-start">
<Building class="mr-2" /> 営業所
</Button>
</NuxtLink>
</div>
```
[[NuxtLink]]で囲まない以下のコードと比較して、一部のスタイル (`space-y-3`) が無効化されてしまった。
```html
<div class="space-y-3>
<Button variant="secondary" class="w-full justify-start">
<User class="mr-2" /> ユーザー
</Button>
<Button variant="secondary" class="w-full justify-start">
<Building class="mr-2" /> 営業所
</Button>
</div>
```
## 原因
[[NuxtLink]]はブロックレベルの要素ではないので、要素間のスタイルは適応されないから。
## 解決方法
[[NuxtLink]]をブロック要素にする。
```diff
<div class="space-y-3>
- <NuxtLink to="/users">
+ <NuxtLink to="/users" class="block">
<Button variant="secondary" class="w-full justify-start">
<User class="mr-2" /> ユーザー
</Button>
</NuxtLink>
- <NuxtLink to="/offices">
+ <NuxtLink to="/offices" class="block">
<Button variant="secondary" class="w-full justify-start">
<Building class="mr-2" /> 営業所
</Button>
</NuxtLink>
</div>
```