Tailwind CSS入門

Tailwind CSSフレームワークの使い方をご紹介します。このページ自体も Tailwind CSS を使って作っています。

Tailwind CSSとは

Tailwind CSSとは、ユーティリティファーストのCSSフレームワークです。

ほかの多くのCSSフレームワークでは、何もクラスを指定しなくても、あるいはひとつのクラスを指定するだけで、ある程度デザインを整えてくれます。

これに対して、Tailwind CSSではフォントの大きさや色、マージン、パディングなどさまざまなクラスが用意されていて、これらを組み合わせて使用します。

そのため、Tailwind CSSを利用したHTMLでは多くのクラス指定を必要とします。その代わり、柔軟にカスタマイズしやすくなっています。

Tailwind CSS
公式サイト https://tailwindcss.com/
開発者 Adam Wathan, Jonathan Reinink
ライセンス MIT
グリッド 12列
GitHub stars 52k
Twitter @tailwindcss

チートシート

Template

Background

Border

Border top

Border right

Border bottom

Border bottom

Border color

Border style

Border radius

Button

Color

Container

Display

Flexbox

Font

Grid

レスポンシブ

Link

List

Margin

Margin top

Margin right

Margin bottom

Margin left

Margin X

Margin Y

Opacity

Padding

Padding top

Padding bottom

Padding left

Padding right

Padding X

Padding Y

Shadow

Table

Text Align

Text Decoration

Width

CDN

Tailwind CSSをCDN (Contents Delivery Network) を通じて使うには、HTMLのヘッダでインポートする。

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.tailwindcss.com">
    </script>
  </head>
  <body>
    <!-- content -->
  </body>
</html>

.block

Tailwind CSS で要素をブロックレベル要素とするには、block クラスを指定する。

<div class="space-y-1">
  <span class="block bg-green-100">1</span>
  <span class="block bg-green-100">2</span>
  <span class="block bg-green-100">3</span>
</div">
1 2 3

.inline-block

Tailwind CSS で要素をインラインブロック要素とするには、inline-block クラスを指定する。

<div class="space-x-1">
  <div class="inline-block bg-green-100 px-2">1</div>
  <div class="inline-block bg-green-100 px-2">2</div>
  <div class="inline-block bg-green-100 px-2">3</div>
</div">
1
2
3

.inline

Tailwind CSS で要素をインライン要素とするには、inline クラスを指定する。

<div class="space-x-1">
  <div class="inline bg-green-100 px-2">1</div>
  <div class="inline bg-green-100 px-2">2</div>
  <div class="inline bg-green-100 px-2">3</div>
</div">
1
2
3

Shadow

Tailwind CSSには要素に影を付けるためのユーティリティクラスが用意されています。この記事では、Tailwind CSSで要素に影をつける方法をご紹介します。

.shadow

Tailwind CSSで影をつけるには、shadowクラスを指定します。

<div class="shadow">.shadow</div>
.shadow

.shadow-md

<div class="shadow-md">.shadow-md</div>
.shadow-md

.shadow-lg

<div class="shadow-lg">.shadow-lg</div>
.shadow-lg

.shadow-xl

<div class="shadow-xl">.shadow-xl</div>
.shadow-xl

.shadow-2xl

<div class="shadow-2xl">.shadow-2xl</div>
.shadow-2xl

.shadow-inner

<div class="shadow-inner">.shadow-inner</div>
.shadow-inner

.shadow-outline

<div class="shadow-outline">.shadow-outline</div>
.shadow-outline

.shadow-none

<div class="shadow-none">.shadow-none</div>
.shadow-none

.table-auto

Tailwind CSSを使って表の幅を自動にするには、<table> タグに table-auto クラスを指定する。

<table class="table-auto">
  <caption>ブレークポイント</caption>
  <thead>
    <tr>
      <th>ブレークポイント</th>
      <th>横幅</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>sm</td>
      <td>640px以上</td>
    </tr>
    <tr>
      <td>md</td>
      <td>768px以上</td>
    </tr>
    <tr>
      <td>lg</td>
      <td>1024px以上</td>
    </tr>
    <tr>
      <td>xl</td>
      <td>1280px以上</td>
    </tr>
    <tr>
      <td>2xl</td>
      <td>1536px以上</td>
    </tr>
  </tbody>
</table>
ブレークポイント
ブレークポイント 横幅
sm 640px以上
md 768px以上
lg 1024px以上
xl 1280px以上
2xl 1536px以上

.table-fixed

Tailwind CSSを使って表の幅を固定にするには、<table> タグに table-fixed クラスを指定する。また、テーブルの幅も指定する。

<table class="table-fixed w-full">
  <caption>ブレークポイント</caption>
  <thead>
    <tr>
      <th>ブレークポイント</th>
      <th>横幅</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>sm</td>
      <td>640px以上</td>
    </tr>
    <tr>
      <td>md</td>
      <td>768px以上</td>
    </tr>
    <tr>
      <td>lg</td>
      <td>1024px以上</td>
    </tr>
    <tr>
      <td>xl</td>
      <td>1280px以上</td>
    </tr>
    <tr>
      <td>2xl</td>
      <td>1536px以上</td>
    </tr>
  </tbody>
</table>
ブレークポイント
ブレークポイント 横幅
sm 640px以上
md 768px以上
lg 1024px以上
xl 1280px以上
2xl 1536px以上

.text-xs

<p class="text-xs">
  The quick brown fox jumps over the lazy dog.
</p>

The quick brown fox jumps over the lazy dog.

.text-sm

<p class="text-sm">
  The quick brown fox jumps over the lazy dog.
</p>

The quick brown fox jumps over the lazy dog.

.text-base

<p class="text-base">
  The quick brown fox jumps over the lazy dog.
</p>

The quick brown fox jumps over the lazy dog.

.text-lg

<p class="text-lg">
  The quick brown fox jumps over the lazy dog.
</p>

The quick brown fox jumps over the lazy dog.

.text-xl

<p class="text-xl">
  The quick brown fox jumps over the lazy dog.
</p>

The quick brown fox jumps over the lazy dog.

.text-2xl

<p class="text-2xl">
  The quick brown fox jumps over the lazy dog.
</p>

The quick brown fox jumps over the lazy dog.

.text-3xl

<p class="text-3xl">
  The quick brown fox jumps over the lazy dog.
</p>

The quick brown fox jumps over the lazy dog.

.text-4xl

<p class="text-4xl">
  The quick brown fox jumps over the lazy dog.
</p>

The quick brown fox jumps over the lazy dog.

.text-5xl

<p class="text-5xl">
  The quick brown fox jumps over the lazy dog.
</p>

The quick brown fox jumps over the lazy dog.

.text-6xl

<p class="text-6xl">
  The quick brown fox jumps over the lazy dog.
</p>

The quick brown fox jumps over the lazy dog.

Link

Tailwind CSSではaタグにクラスを指定しないと、作成したリンクに色がついたり、下線が引かれることはありません。

<a href="/css/tailwind/">Tailwind CSS</a>

Tailwind CSS

このままでは訪問者がリンクであることを識別しづらいので、何らかの視覚効果をつける必要があります。

もっとも簡単な方法は、リンクテキストに色をつけることです。

<a href="/css/tailwind/" class="text-blue-500">Tailwind CSS</a>

Tailwind CSS

m-0

<div class="m-0 bg-gray-300">
  m-0
</div>
m-0

m-1

<div class="m-1 bg-gray-300">
  m-1
</div>
m-1

m-2

<div class="m-2 bg-gray-300">
  m-2
</div>
m-2

m-3

<div class="m-3 bg-gray-300">
  m-3
</div>
m-3

m-4

<div class="m-4 bg-gray-300">
  m-4
</div>
m-4

m-6

<div class="m-6 bg-gray-300">
  m-6
</div>
m-6

m-8

<div class="m-8 bg-gray-300">
  m-8
</div>
m-8

m-10

<div class="m-10 bg-gray-300">
  m-10
</div>
m-10

m-12

<div class="m-12 bg-gray-300">
  m-12
</div>
m-12

m-16

<div class="m-16 bg-gray-300">
  m-16
</div>
m-16

m-20

<div class="m-20 bg-gray-300">
  m-20
</div>
m-20

m-24

<div class="m-24 bg-gray-300">
  m-24
</div>
m-24

m-32

<div class="m-32 bg-gray-300">
  m-32
</div>
m-32

上マージン

Tailwind CSSでは、上側のマージンを mt-0 から mt-64 までの17段階で指定できる。

<div class="flex flex-wrap">
  <div class="mt-0 mr-1 bg-green-100">mt-0</div>
  <div class="mt-1 mr-1 bg-green-100">mt-1</div>
  <div class="mt-2 mr-1 bg-green-100">mt-2</div>
  <div class="mt-3 mr-1 bg-green-100">mt-3</div>
  <div class="mt-4 mr-1 bg-green-100">mt-4</div>
  <div class="mt-6 mr-1 bg-green-100">mt-6</div>
  <div class="mt-8 mr-1 bg-green-100">mt-8</div>
  <div class="mt-10 mr-1 bg-green-100">mt-10</div>
  <div class="mt-12 mr-1 bg-green-100">mt-12</div>
  <div class="mt-16 mr-1 bg-green-100">mt-16</div>
  <div class="mt-20 mr-1 bg-green-100">mt-20</div>
  <div class="mt-24 mr-1 bg-green-100">mt-24</div>
  <div class="mt-32 mr-1 bg-green-100">mt-32</div>
  <div class="mt-40 mr-1 bg-green-100">mt-40</div>
  <div class="mt-48 mr-1 bg-green-100">mt-48</div>
  <div class="mt-56 mr-1 bg-green-100">mt-56</div>
  <div class="mt-64 mr-1 bg-green-100">mt-64</div>
</div>
mt-0
mt-1
mt-2
mt-3
mt-4
mt-6
mt-8
mt-10
mt-12
mt-20
mt-24
mt-32
mt-40
mt-48
mt-56
mt-64

.mb-0

Tailwind CSSでは、下側のマージンを mb-0 から mb-64 までの17段階で指定できる。

<div class="bg-green-100 mb-0">.mb-0</div>
.mb-0

.mb-1

Tailwind CSSでは、下側のマージンを mb-0 から mb-64 までの17段階で指定できる。

<div class="bg-green-100 mb-1">.mb-1</div>
.mb-1

.mb-2

Tailwind CSSでは、下側のマージンを mb-0 から mb-64 までの17段階で指定できる。

<div class="bg-green-100 mb-2">.mb-2</div>
.mb-2

.mb-3

Tailwind CSSでは、下側のマージンを mb-0 から mb-64 までの17段階で指定できる。

<div class="bg-green-100 mb-3">.mb-3</div>
.mb-3

.mb-4

Tailwind CSSでは、下側のマージンを mb-0 から mb-64 までの17段階で指定できる。

<div class="bg-green-100 mb-4">.mb-4</div>
.mb-4

.mb-6

Tailwind CSSでは、下側のマージンを mb-0 から mb-64 までの17段階で指定できる。

<div class="bg-green-100 mb-6">.mb-6</div>
.mb-6

.mb-8

Tailwind CSSでは、下側のマージンを mb-0 から mb-64 までの17段階で指定できる。

<div class="bg-green-100 mb-8">.mb-8</div>
.mb-8

.mb-10

Tailwind CSSでは、下側のマージンを mb-0 から mb-64 までの17段階で指定できる。

<div class="bg-green-100 mb-10">.mb-10</div>
.mb-10

.mb-12

Tailwind CSSでは、下側のマージンを mb-0 から mb-64 までの17段階で指定できる。

<div class="bg-green-100 mb-12">.mb-12</div>
.mb-12

.mb-16

Tailwind CSSでは、下側のマージンを mb-0 から mb-64 までの17段階で指定できる。

<div class="bg-green-100 mb-16">.mb-16</div>
.mb-16

.mb-20

Tailwind CSSでは、下側のマージンを mb-0 から mb-64 までの17段階で指定できる。

<div class="bg-green-100 mb-20">.mb-20</div>
.mb-20

.mb-24

Tailwind CSSでは、下側のマージンを mb-0 から mb-64 までの17段階で指定できる。

<div class="bg-green-100 mb-24">.mb-24</div>
.mb-24

.mb-32

Tailwind CSSでは、下側のマージンを mb-0 から mb-64 までの17段階で指定できる。

<div class="bg-green-100 mb-32">.mb-32</div>
.mb-32

.mb-40

Tailwind CSSでは、下側のマージンを mb-0 から mb-64 までの17段階で指定できる。

<div class="bg-green-100 mb-40">.mb-40</div>
.mb-40

.mb-48

Tailwind CSSでは、下側のマージンを mb-0 から mb-64 までの17段階で指定できる。

<div class="bg-green-100 mb-48">.mb-48</div>
.mb-48

.mb-56

Tailwind CSSでは、下側のマージンを mb-0 から mb-64 までの17段階で指定できる。

<div class="bg-green-100 mb-56">.mb-56</div>
.mb-56

.mb-64

Tailwind CSSでは、下側のマージンを mb-0 から mb-64 までの17段階で指定できる。

<div class="bg-green-100 mb-64">.mb-64</div>
.mb-64

左マージン

Tailwind CSSでは、左側のマージンを ml-0 から ml-64 までの17段階で指定できる。

<div class="ml-0 bg-green-100">ml-0</div>
<div class="ml-1 mt-1 bg-green-100">ml-1</div>
<div class="ml-2 mt-1 bg-green-100">ml-2</div>
<div class="ml-3 mt-1 bg-green-100">ml-3</div>
<div class="ml-4 mt-1 bg-green-100">ml-4</div>
<div class="ml-5 mt-1 bg-green-100">ml-5</div>
<div class="ml-8 mt-1 bg-green-100">ml-8</div>
<div class="ml-10 mt-1 bg-green-100">ml-10</div>
<div class="ml-12 mt-1 bg-green-100">ml-12</div>
<div class="ml-16 mt-1 bg-green-100">ml-16</div>
<div class="ml-20 mt-1 bg-green-100">ml-20</div>
<div class="ml-24 mt-1 bg-green-100">ml-24</div>
<div class="ml-32 mt-1 bg-green-100">ml-32</div>
<div class="ml-40 mt-1 bg-green-100">ml-40</div>
<div class="ml-48 mt-1 bg-green-100">ml-48</div>
<div class="ml-56 mt-1 bg-green-100">ml-56</div>
<div class="ml-64 mt-1 bg-green-100">ml-64</div>
ml-0
ml-1
ml-2
ml-3
ml-4
ml-6
ml-8
ml-10
ml-12
ml-16
ml-20
ml-24
ml-32
ml-40
ml-48
ml-56
ml-64

右マージン

Tailwind CSSでは、右側のマージンを mr-0 から mr-64 までの17段階で指定できる。

<div class="mr-0 mt-1 bg-green-100">mr-0</div>
<div class="mr-1 mt-1 bg-green-100">mr-1</div>
<div class="mr-2 mt-1 bg-green-100">mr-2</div>
<div class="mr-3 mt-1 bg-green-100">mr-3</div>
<div class="mr-4 mt-1 bg-green-100">mr-4</div>
<div class="mr-6 mt-1 bg-green-100">mr-6</div>
<div class="mr-8 mt-1 bg-green-100">mr-8</div>
<div class="mr-10 mt-1 bg-green-100">mr-10</div>
<div class="mr-12 mt-1 bg-green-100">mr-12</div>
<div class="mr-16 mt-1 bg-green-100">mr-16</div>
<div class="mr-20 mt-1 bg-green-100">mr-20</div>
<div class="mr-24 mt-1 bg-green-100">mr-24</div>
<div class="mr-32 mt-1 bg-green-100">mr-32</div>
<div class="mr-40 mt-1 bg-green-100">mr-40</div>
<div class="mr-48 mt-1 bg-green-100">mr-48</div>
<div class="mr-56 mt-1 bg-green-100">mr-56</div>
<div class="mr-64 mt-1 bg-green-100">mr-64</div>
mr-0
mr-1
mr-2
mr-3
mr-4
mr-6
mr-8
mr-10
mr-12
mr-16
mr-20
mr-24
mr-32
mr-40
mr-48
mr-56
mr-64

.mx-auto

<div class="bg-green-100 mx-auto">.mx-auto</div>
.mx-auto

左右マージン

Tailwind CSSでは、左右のマージンを mx-0 から mx-64 までの17段階で指定できる。

mx-48 以上は左右のマージンが大きすぎてスマホでは表示が崩れるため、レスポンシブデザインでは使用を避けるべきである。

<div class="mx-0 mt-1 bg-green-100">mx-0</div>
<div class="mx-1 mt-1 bg-green-100">mx-1</div>
<div class="mx-2 mt-1 bg-green-100">mx-2</div>
<div class="mx-3 mt-1 bg-green-100">mx-3</div>
<div class="mx-4 mt-1 bg-green-100">mx-4</div>
<div class="mx-6 mt-1 bg-green-100">mx-6</div>
<div class="mx-8 mt-1 bg-green-100">mx-8</div>
<div class="mx-10 mt-1 bg-green-100">mx-10</div>
<div class="mx-12 mt-1 bg-green-100">mx-12</div>
<div class="mx-16 mt-1 bg-green-100">mx-16</div>
<div class="mx-20 mt-1 bg-green-100">mx-20</div>
<div class="mx-24 mt-1 bg-green-100">mx-24</div>
<div class="mx-32 mt-1 bg-green-100">mx-32</div>
<div class="mx-40 mt-1 bg-green-100">mx-40</div>
mx-0
mx-1
mx-2
mx-3
mx-4
mx-6
mx-8
mx-10
mx-12
mx-16
mx-20
mx-24
mx-32
mx-40

上下マージン

Tailwind CSSでは、上下のマージンを my-0 から my-64 までの17段階で指定できる。

<div class="flex flex-wrap">
  <div class="bg-green-100 mr-1 my-0">my-0</div>
  <div class="bg-green-100 mr-1 my-1">my-1</div>
  <div class="bg-green-100 mr-1 my-2">my-2</div>
  <div class="bg-green-100 mr-1 my-3">my-3</div>
  <div class="bg-green-100 mr-1 my-4">my-4</div>
  <div class="bg-green-100 mr-1 my-6">my-6</div>
  <div class="bg-green-100 mr-1 my-8">my-8</div>
  <div class="bg-green-100 mr-1 my-10">my-10</div>
  <div class="bg-green-100 mr-1 my-12">my-12</div>
  <div class="bg-green-100 mr-1 my-16">my-16</div>
  <div class="bg-green-100 mr-1 my-20">my-20</div>
  <div class="bg-green-100 mr-1 my-24">my-24</div>
  <div class="bg-green-100 mr-1 my-32">my-32</div>
  <div class="bg-green-100 mr-1 my-40">my-40</div>
  <div class="bg-green-100 mr-1 my-48">my-48</div>
  <div class="bg-green-100 mr-1 my-56">my-56</div>
  <div class="bg-green-100 mr-1 my-64">my-64</div>
</div>
my-0
my-1
my-2
my-3
my-4
my-6
my-8
my-10
my-12
my-16
my-20
my-24
my-32
my-40
my-48
my-56
my-64

p-0

<div class="p-0 bg-gray-300">
  p-0
</div>
p-0

p-1

<div class="p-1 bg-gray-300">
  p-1
</div>
p-1

p-2

<div class="p-2 bg-gray-300">
  p-2
</div>
p-2

p-3

<div class="p-3 bg-gray-300">
  p-3
</div>
p-3

p-4

<div class="p-4 bg-gray-300">
  p-4
</div>
p-4

p-6

<div class="p-6 bg-gray-300">
  p-6
</div>
p-6

p-8

<div class="p-8 bg-gray-300">
  p-8
</div>
p-8

p-10

<div class="p-10 bg-gray-300">
  p-10
</div>
p-10

p-12

<div class="p-12 bg-gray-300">
  p-12
</div>
p-12

p-16

<div class="p-16 bg-gray-300">
  p-16
</div>
p-16

p-20

<div class="p-20 bg-gray-300">
  p-20
</div>
p-20

p-24

<div class="p-24 bg-gray-300">
  p-24
</div>
p-24

p-32

<div class="p-32 bg-gray-300">
  p-32
</div>
p-32

上パディング

Tailwind CSSでは、上側のパディングを pt-0 から pt-64 までの17段階で指定できる。

<div class="flex flex-wrap">
  <div class="pt-0 m-1 bg-green-100">pt-0</div>
  <div class="pt-1 m-1 bg-green-100">pt-1</div>
  <div class="pt-2 m-1 bg-green-100">pt-2</div>
  <div class="pt-3 m-1 bg-green-100">pt-3</div>
  <div class="pt-4 m-1 bg-green-100">pt-4</div>
  <div class="pt-6 m-1 bg-green-100">pt-6</div>
  <div class="pt-8 m-1 bg-green-100">pt-8</div>
  <div class="pt-10 m-1 bg-green-100">pt-10</div>
  <div class="pt-12 m-1 bg-green-100">pt-12</div>
  <div class="pt-16 m-1 bg-green-100">pt-16</div>
  <div class="pt-20 m-1 bg-green-100">pt-20</div>
  <div class="pt-24 m-1 bg-green-100">pt-24</div>
  <div class="pt-32 m-1 bg-green-100">pt-32</div>
  <div class="pt-40 m-1 bg-green-100">pt-40</div>
  <div class="pt-48 m-1 bg-green-100">pt-48</div>
  <div class="pt-56 m-1 bg-green-100">pt-56</div>
  <div class="pt-64 m-1 bg-green-100">pt-64</div>
</div>
pt-0
pt-1
pt-2
pt-3
pt-4
pt-6
pt-8
pt-10
pt-12
pt-16
pt-20
pt-24
pt-32
pt-40
pt-48
pt-56
pt-64

.pb-0

Tailwind CSSでは、下側のパディングを pb-0 から pb-64 までの17段階で指定できる。

<div class="bg-green-100 pb-0">pb-0</div>
pb-0

.pb-1

Tailwind CSSでは、下側のパディングを pb-0 から pb-64 までの17段階で指定できる。

<div class="bg-green-100 pb-1">pb-1</div>
pb-1

.pb-2

Tailwind CSSでは、下側のパディングを pb-0 から pb-64 までの17段階で指定できる。

<div class="bg-green-100 pb-2">pb-2</div>
pb-2

.pb-3

Tailwind CSSでは、下側のパディングを pb-0 から pb-64 までの17段階で指定できる。

<div class="bg-green-100 pb-3">pb-3</div>
pb-3

.pb-4

Tailwind CSSでは、下側のパディングを pb-0 から pb-64 までの17段階で指定できる。

<div class="bg-green-100 pb-4">pb-4</div>
pb-4

.pb-6

Tailwind CSSでは、下側のパディングを pb-0 から pb-64 までの17段階で指定できる。

<div class="bg-green-100 pb-6">pb-6</div>
pb-6

.pb-8

Tailwind CSSでは、下側のパディングを pb-0 から pb-64 までの17段階で指定できる。

<div class="bg-green-100 pb-8">pb-8</div>
pb-8

.pb-10

Tailwind CSSでは、下側のパディングを pb-0 から pb-64 までの17段階で指定できる。

<div class="bg-green-100 pb-10">pb-10</div>
pb-10

.pb-12

Tailwind CSSでは、下側のパディングを pb-0 から pb-64 までの17段階で指定できる。

<div class="bg-green-100 pb-12">pb-12</div>
pb-12

.pb-16

Tailwind CSSでは、下側のパディングを pb-0 から pb-64 までの17段階で指定できる。

<div class="bg-green-100 pb-16">pb-16</div>
pb-16

.pb-20

Tailwind CSSでは、下側のパディングを pb-0 から pb-64 までの17段階で指定できる。

<div class="bg-green-100 pb-20">pb-20</div>
pb-20

.pb-24

Tailwind CSSでは、下側のパディングを pb-0 から pb-64 までの17段階で指定できる。

<div class="bg-green-100 pb-24">pb-24</div>
pb-24

.pb-32

Tailwind CSSでは、下側のパディングを pb-0 から pb-64 までの17段階で指定できる。

<div class="bg-green-100 pb-32">pb-32</div>
pb-32

.pb-40

Tailwind CSSでは、下側のパディングを pb-0 から pb-64 までの17段階で指定できる。

<div class="bg-green-100 pb-40">pb-40</div>
pb-40

.pb-48

Tailwind CSSでは、下側のパディングを pb-0 から pb-64 までの17段階で指定できる。

<div class="bg-green-100 pb-48">pb-48</div>
pb-48

.pb-56

Tailwind CSSでは、下側のパディングを pb-0 から pb-64 までの17段階で指定できる。

<div class="bg-green-100 pb-56">pb-56</div>
pb-56

.pb-64

Tailwind CSSでは、下側のパディングを pb-0 から pb-64 までの17段階で指定できる。

<div class="bg-green-100 pb-64">pb-64</div>
pb-64

左パディング

Tailwind CSSでは、左側のパディングを pl-0 から pl-64 までの17段階で指定できる。

<div class="pl-0 mt-1 bg-green-100">pl-0</div>
<div class="pl-1 mt-1 bg-green-100">pl-1</div>
<div class="pl-2 mt-1 bg-green-100">pl-2</div>
<div class="pl-3 mt-1 bg-green-100">pl-3</div>
<div class="pl-4 mt-1 bg-green-100">pl-4</div>
<div class="pl-6 mt-1 bg-green-100">pl-6</div>
<div class="pl-8 mt-1 bg-green-100">pl-8</div>
<div class="pl-10 mt-1 bg-green-100">pl-10</div>
<div class="pl-12 mt-1 bg-green-100">pl-12</div>
<div class="pl-16 mt-1 bg-green-100">pl-16</div>
<div class="pl-20 mt-1 bg-green-100">pl-20</div>
<div class="pl-24 mt-1 bg-green-100">pl-24</div>
<div class="pl-32 mt-1 bg-green-100">pl-32</div>
<div class="pl-40 mt-1 bg-green-100">pl-40</div>
<div class="pl-48 mt-1 bg-green-100">pl-48</div>
<div class="pl-56 mt-1 bg-green-100">pl-56</div>
<div class="pl-64 mt-1 bg-green-100">pl-64</div>
pl-0
pl-1
pl-2
pl-3
pl-4
pl-6
pl-8
pl-10
pl-12
pl-16
pl-20
pl-24
pl-32
pl-40
pl-48
pl-56
pl-64

右パディング

Tailwind CSSでは、左側のパディングを pr-0 から pr-64 までの17段階で指定できる。

<div class="pr-0 mt-1 bg-green-100 text-right">pr-0</div>
<div class="pr-1 mt-1 bg-green-100 text-right">pr-1</div>
<div class="pr-2 mt-1 bg-green-100 text-right">pr-2</div>
<div class="pr-3 mt-1 bg-green-100 text-right">pr-3</div>
<div class="pr-4 mt-1 bg-green-100 text-right">pr-4</div>
<div class="pr-6 mt-1 bg-green-100 text-right">pr-6</div>
<div class="pr-8 mt-1 bg-green-100 text-right">pr-8</div>
<div class="pr-10 mt-1 bg-green-100 text-right">pr-10</div>
<div class="pr-12 mt-1 bg-green-100 text-right">pr-12</div>
<div class="pr-16 mt-1 bg-green-100 text-right">pr-16</div>
<div class="pr-20 mt-1 bg-green-100 text-right">pr-20</div>
<div class="pr-24 mt-1 bg-green-100 text-right">pr-24</div>
<div class="pr-32 mt-1 bg-green-100 text-right">pr-32</div>
<div class="pr-40 mt-1 bg-green-100 text-right">pr-40</div>
<div class="pr-48 mt-1 bg-green-100 text-right">pr-48</div>
<div class="pr-56 mt-1 bg-green-100 text-right">pr-56</div>
<div class="pr-64 mt-1 bg-green-100 text-right">pr-64</div>
pr-0
pr-1
pr-2
pr-3
pr-4
pr-6
pr-8
pr-10
pr-12
pr-16
pr-20
pr-24
pr-32
pr-40
pr-48
pr-56
pr-64

左右パディング

Tailwind CSSでは、左右のパディングを px-0 から px-64 までの17段階で指定できる。

px-48 以上は左右のパディングが大きすぎてスマホでは表示が崩れるため、レスポンシブデザインでは使用を避けるべきである。

<div class="px-0 bg-green-100">px-0</div>
<div class="px-1 bg-green-100">px-1</div>
<div class="px-2 mt-1 bg-green-100">px-2</div>
<div class="px-3 mt-1 bg-green-100">px-3</div>
<div class="px-4 mt-1 bg-green-100">px-4</div>
<div class="px-6 mt-1 bg-green-100">px-6</div>
<div class="px-8 mt-1 bg-green-100">px-8</div>
<div class="px-10 mt-1 bg-green-100">px-10</div>
<div class="px-12 mt-1 bg-green-100">px-12</div>
<div class="px-16 mt-1 bg-green-100">px-16</div>
<div class="px-20 mt-1 bg-green-100">px-20</div>
<div class="px-24 mt-1 bg-green-100">px-24</div>
<div class="px-32 mt-1 bg-green-100">px-32</div>
<div class="px-40 mt-1 bg-green-100">px-40</div>
px-0
px-1
px-2
px-3
px-4
px-6
px-8
px-10
px-12
px-16
px-20
px-24
px-32
px-40

.py-0

Tailwind CSSでは、上下のパディングを py-0 から py-64 までの17段階で指定できる。

<div class="bg-green-100 py-0">py-0</div>
py-0

.py-1

Tailwind CSSでは、上下のパディングを py-0 から py-64 までの17段階で指定できる。

<div class="bg-green-100 py-1">py-1</div>
py-1

.py-2

Tailwind CSSでは、上下のパディングを py-0 から py-64 までの17段階で指定できる。

<div class="bg-green-100 py-2">py-2</div>
py-2

.py-3

Tailwind CSSでは、上下のパディングを py-0 から py-64 までの17段階で指定できる。

<div class="bg-green-100 py-3">py-3</div>
py-3

.py-4

Tailwind CSSでは、上下のパディングを py-0 から py-64 までの17段階で指定できる。

<div class="bg-green-100 py-4">py-4</div>
py-4

.py-6

Tailwind CSSでは、上下のパディングを py-0 から py-64 までの17段階で指定できる。

<div class="bg-green-100 py-6">py-6</div>
py-6

.py-8

Tailwind CSSでは、上下のパディングを py-0 から py-64 までの17段階で指定できる。

<div class="bg-green-100 py-8">py-8</div>
py-8

.py-10

Tailwind CSSでは、上下のパディングを py-0 から py-64 までの17段階で指定できる。

<div class="bg-green-100 py-10">py-10</div>
py-10

.py-12

Tailwind CSSでは、上下のパディングを py-0 から py-64 までの17段階で指定できる。

<div class="bg-green-100 py-12">py-12</div>
py-12

.py-16

Tailwind CSSでは、上下のパディングを py-0 から py-64 までの17段階で指定できる。

<div class="bg-green-100 py-16">py-16</div>
py-16

.py-20

Tailwind CSSでは、上下のパディングを py-0 から py-64 までの17段階で指定できる。

<div class="bg-green-100 py-20">py-20</div>
py-20

.py-24

Tailwind CSSでは、上下のパディングを py-0 から py-64 までの17段階で指定できる。

<div class="bg-green-100 py-24">py-24</div>
py-24

.py-32

Tailwind CSSでは、上下のパディングを py-0 から py-64 までの17段階で指定できる。

<div class="bg-green-100 py-32">py-32</div>
py-32

.py-40

Tailwind CSSでは、上下のパディングを py-0 から py-64 までの17段階で指定できる。

<div class="bg-green-100 py-40">py-40</div>
py-40

.py-48

Tailwind CSSでは、上下のパディングを py-0 から py-64 までの17段階で指定できる。

<div class="bg-green-100 py-48">py-48</div>
py-48

.py-56

Tailwind CSSでは、上下のパディングを py-0 から py-64 までの17段階で指定できる。

<div class="bg-green-100 py-56">py-56</div>
py-56

.py-64

Tailwind CSSでは、上下のパディングを py-0 から py-64 までの17段階で指定できる。

<div class="bg-green-100 py-64">py-64</div>
py-64

不透明度

Tailwind CSSを使って不透明度を設定するには、次に示すクラスを指定する。

<p class="opacity-0 mt-1">opacity-0</p>
<p class="opacity-5 mt-1">opacity-5</p>
<p class="opacity-10 mt-1">opacity-10</p>
<p class="opacity-20 mt-1">opacity-20</p>
<p class="opacity-25 mt-1">opacity-25</p>
<p class="opacity-30 mt-1">opacity-30</p>
<p class="opacity-40 mt-1">opacity-40</p>
<p class="opacity-50 mt-1">opacity-50</p>
<p class="opacity-60 mt-1">opacity-60</p>
<p class="opacity-70 mt-1">opacity-70</p>
<p class="opacity-75 mt-1">opacity-75</p>
<p class="opacity-80 mt-1">opacity-80</p>
<p class="opacity-90 mt-1">opacity-90</p>
<p class="opacity-95 mt-1">opacity-95</p>
<p class="opacity-100 mt-1">opacity-100</p>

opacity-0

opacity-5

opacity-10

opacity-20

opacity-25

opacity-30

opacity-40

opacity-50

opacity-60

opacity-70

opacity-75

opacity-80

opacity-90

opacity-95

opacity-100

幅の絶対値

Tailwind CSSでは、幅の絶対値を w-1 から w-64 までの17段階で指定できる。

<div class="w-1 mt-1 bg-green-100">1</div>
<div class="w-2 mt-1 bg-green-100">2</div>
<div class="w-3 mt-1 bg-green-100">3</div>
<div class="w-4 mt-1 bg-green-100">4</div>
<div class="w-5 mt-1 bg-green-100">5</div>
<div class="w-6 mt-1 bg-green-100">6</div>
<div class="w-8 mt-1 bg-green-100">w-8</div>
<div class="w-10 mt-1 bg-green-100">w-10</div>
<div class="w-12 mt-1 bg-green-100">w-12</div>
<div class="w-16 mt-1 bg-green-100">w-16</div>
<div class="w-20 mt-1 bg-green-100">w-20</div>
<div class="w-24 mt-1 bg-green-100">w-24</div>
<div class="w-32 mt-1 bg-green-100">w-32</div>
<div class="w-40 mt-1 bg-green-100">w-40</div>
<div class="w-48 mt-1 bg-green-100">w-48</div>
<div class="w-56 mt-1 bg-green-100">w-56</div>
<div class="w-64 mt-1 bg-green-100">w-64</div>
1
2
3
4
5
6
w-8
w-10
w-12
w-16
w-20
w-24
w-32
w-40
w-48
w-56
w-64

幅の相対値

Tailwind CSSでは、親要素の幅に対する相対値で要素の幅を指定できる。幅の相対値を表すクラスを次に示す。

<div class="w-1/2 mt-2 bg-green-100">w-1/2</div>
<div class="w-1/3 mt-2 bg-green-100">w-1/3</div>
<div class="w-2/3 mt-1 bg-green-100">w-2/3</div>
<div class="w-1/4 mt-2 bg-green-100">w-1/4</div>
<div class="w-2/4 mt-1 bg-green-100">w-2/4</div>
<div class="w-3/4 mt-1 bg-green-100">w-3/4</div>
<div class="w-1/5 mt-2 bg-green-100">w-1/5</div>
<div class="w-2/5 mt-1 bg-green-100">w-2/5</div>
<div class="w-3/5 mt-1 bg-green-100">w-3/5</div>
<div class="w-4/5 mt-1 bg-green-100">w-4/5</div>
<div class="w-1/6 mt-2 bg-green-100">w-1/6</div>
<div class="w-2/6 mt-1 bg-green-100">w-2/6</div>
<div class="w-3/6 mt-1 bg-green-100">w-3/6</div>
<div class="w-4/6 mt-1 bg-green-100">w-4/6</div>
<div class="w-5/6 mt-1 bg-green-100">w-5/6</div>
<div class="w-1/12 mt-2 bg-green-100">w-1/12</div>
<div class="w-2/12 mt-1 bg-green-100">w-2/12</div>
<div class="w-3/12 mt-1 bg-green-100">w-3/12</div>
<div class="w-4/12 mt-1 bg-green-100">w-4/12</div>
<div class="w-5/12 mt-1 bg-green-100">w-5/12</div>
<div class="w-6/12 mt-1 bg-green-100">w-6/12</div>
<div class="w-7/12 mt-1 bg-green-100">w-7/12</div>
<div class="w-8/12 mt-1 bg-green-100">w-8/12</div>
<div class="w-9/12 mt-1 bg-green-100">w-9/12</div>
<div class="w-10/12 mt-1 bg-green-100">w-10/12</div>
<div class="w-11/12 mt-1 bg-green-100">w-11/12</div>
<div class="w-full mt-2 bg-green-100">w-full</div>
w-1/2
w-1/3
w-2/3
w-1/4
w-2/4
w-3/4
w-1/5
w-2/5
w-3/5
w-4/5
w-1/6
w-2/6
w-3/6
w-4/6
w-5/6
w-1/12
w-2/12
w-3/12
w-4/12
w-5/12
w-6/12
w-7/12
w-8/12
w-9/12
w-10/12
w-11/12
w-full

テキストの左寄せ

Tailwind CSSを使ってテキストを左寄せにするには、text-left クラスを指定する。

<p class="text-left">text-left</p>

text-left

テキストの中央揃え

Tailwind CSSを使ってテキストを中央揃えにするには、text-center クラスを指定する。

<p class="text-center">text-center</p>

text-center

テキストの右寄せ

Tailwind CSSを使ってテキストを右寄せにするには、text-right クラスを指定する。

<p class="text-right">text-right</p>

text-right

テキストの両端揃え

Tailwind CSSを使ってテキストを両端揃えにするには、text-justify クラスを指定する。

<p class="text-justify w-64">
  Dorothy lived in the midst of the great Kansas prairies, with Uncle Henry, who was a farmer,
  and Aunt Em, who was the farmer's wife.
  Their house was small, for the lumber to build it had to be carried by wagon many miles.
  There were four walls, a floor and a roof, which made one room; and this room contained a rusty
  looking cooking stove, a cupboard for the dishes, a table, three of four chairs, and the beds.
</p>

Dorothy lived in the midst of the great Kansas prairies, with Uncle Henry, who was a farmer, and Aunt Em, who was the farmer's wife. Their house was small, for the lumber to build it had to be carried by wagon many miles. There were four walls, a floor and a roof, which made one room; and this room contained a rusty looking cooking stove, a cupboard for the dishes, a table, three of four chairs, and the beds.

.underline

Tailwind CSSでテキストに下線を引くには、underline クラスを指定する。

<p class="underline">
  The quick brown fox jumps over the lazy dog.
</p>

The quick brown fox jumps over the lazy dog.

.line-through

Tailwind CSSでテキストに打ち消し線を引くには、line-through クラスを指定する。

<p class="line-through">
  The quick brown fox jumps over the lazy dog.
</p>

The quick brown fox jumps over the lazy dog.

.no-underline

<p class="no-underline">
  The quick brown fox jumps over the lazy dog.
</p>

The quick brown fox jumps over the lazy dog.

リスト

<ul class="list-disc">
  <li>first</li>
  <li>second</li>
  <li>third</li>
</ul>
<ul class="list-decimal">
  <li>first</li>
  <li>second</li>
  <li>third</li>
</ul>
<ul class="list-none">
  <li>first</li>
  <li>second</li>
  <li>third</li>
</ul>

.container

Tailwind CSSでコンテナを作成するには、container クラスを指定する。

.container
条件 CSS
width < 640px max-width: 100%;
640px ≤ width < 768px max-width: 640px;
768px ≤ width < 1024px max-width: 768px;
1024px ≤ width <1280px max-width: 1024px;
1280px ≤ width < 1536px max-width: 1280px;
1536px ≤ width max-width: 1536px;

他のフレームワークで使用されているコンテナとは異なり、Tailwind CSS のコンテナは自動的に中央に配置されず、水平方向のパディングも組み込まれていない。

<div class="container bg-green-100">
  .container
</div">
.container

コンテナを水平方向の中央に配置するには、mx-auto クラスを指定する。

<div class="container max-auto bg-green-100">
  .container .mx-auto
</div">
.container .mx-auto