コース

Tailwind CSS

HTMLにクラスを並べるだけでスタイルが決まる「ユーティリティクラス」という考え方を学びます。素のCSSと1対1で見比べながら進めるので、CSSを学んだ知識がそのまま活きます。使うと得な場面・損な場面もはっきりさせます。

はじめよう

Tailwind CSSって何?

Tailwind CSS・レッスン 1 / 7

まず動かしてみる全2レッスン

  1. 01Tailwind CSSって何?p-*bg-*rounded-*font-bold
  2. 02自分のプロジェクトに入れるnpm install tailwindcss @tailwindcss/cli@import "tailwindcss";--watch@theme

書き方をおぼえる全2レッスン

  1. 03クラス名の読み方p-*px-*text-*w-fullp-[13px]
  2. 04FlexboxとGridをクラスで組むflexjustify-betweenitems-centergrid-cols-*gap-*

状態と画面幅に反応させる全2レッスン

  1. 05画面幅で切りかえる(md:とlg:)md:lg:hidden
  2. 06状態に反応させる(hover:とfocus:)hover:focus-visible:dark:grouptransition

使いどころを判断する全1レッスン

  1. 07使うと得な場面・損な場面@apply