技術用語

Tailwind CSS

テールウィンドシーエスエス

HTML の class に小さなクラスを並べてスタイルを組む CSS フレームワークです。

体験区分：触った推奨読者レベル：Level 2-4

`flex p-4 text-sm` のように用途別の小さなクラスを並べて UI を組みます。別途 CSS ファイルを書かず、HTML の class 属性だけでスタイルが整います。

v0（B-9）や Bolt.new（B-11）が生成する UI コードに多く使われます。shadcn/ui（F-15）も前提採用しており、AI の出力を読む場面で登場します。

Before / After

2026.04·ready

「v0 が吐く UI コードはほぼ Tailwind なので、最低限の作法を押さえると読みやすいです。」

Tailwind CSSの見方

299

この用語の見どころ

役割

HTML の class にユーティリティを並べてスタイルを組む CSS フレームワークです。

うれしさ

CSS ファイルやクラス名の管理が要らず、AI 出力のコードも読みやすくなります

注意点

class 属性が長くなりがちで、放置すると可読性が下がることがあります。

どこで役立つか

AI 生成 UI の読解や、shadcn/ui を使う React プロジェクトで役立ちます。

はじめに

`p` `m` `flex` `text` `bg` など、よく使うクラスの命名ルールを把握するところから始めます。

深掘り先

CSS, shadcn/ui, Prettier

非エンジニアのつまずき

私のコメント

開発フローでの位置

初期設定

→

クラスを記述

→

AI 出力を読む

→

整理

→

ビルド