Tailwind CSSを使ってみた
Tailwind CSSとは
Tailwind CSSは、ユーティリティファーストのCSSフレームワークです。
定義がすでにされているクラス名を使用するので、コードを書く量が少なくなります。
ユーティリティファーストとは
CSSを使わずに、Tailwind CSSが提供している定義済みのクラス名だけを使用することをユーティリティファーストといいます。
ユーティリティファーストの考えをもとに作られるクラスのことをユーティリティファーストといいます。
実際に使ってみる
今回はTaiwind CSSを使って下の様なボタンを作ってみたいと思います。
導入方法
今回はCDNで導入しました。
head内に下の様なコードを記載します。
<script src="https://cdn.tailwindcss.com"></script>
bodyにはボタンのHTMLを記載します。
<div class='btn'>
<a href=''>クリック</a>
</div>ここまでで基礎は完成です。
ここからはTailwind CSSの定義済みのクラス名のみでボタンを完成させていきます。
こちら のurlがTailwind CSSで定義されたクラスが書いてあるチートシートサイトです。
検索機能もあるのでつけたいクラスなどを検索して、該当するものを絞り込むことができます。
任意のプロパティ
Tailwind CSSにはじぶんが欲しい様なクラスがない様な時もあります。そんな時は、[]で囲むと適用されます。
例えば、padding-top: 15px; の余白を開けたい時には[padding-top:15px] とクラスに記述すると適応されます。
注意点として、[]の中身は空白があると動かなくなります。空白はあけないようにしましょう。
hoverの使い方
hoverとはcssの擬似クラスです。
擬似クラスとは、何か特別な条件を満たしているときにする動きです。
hoverはカーソルが要素の上にあった時にする動きのことです。
hoverさせたい親要素のクラスにに group と記述して、hoverさせた時の動きのクラス名の前に group-hover: と記述するだけでhoverの動きの完成です。
例えば、bg-green-600 というクラス名をホバーしたときだけにしたいのであれば、 group-hover:bg-green-60と書くだけでホバーの動きが適応されます。
完成
出来上がったボタンがこちらです。
cssで作ったコードとTailwind CSSで作ったコードを見比べてみます。
CSS
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/modern-css-reset/dist/reset.min.css" />
<style>
.btn {
width: 50%;
line-height: 40px;
}
.btn a {
display: block;
width: 100%;
height: 100%;
text-decoration: none;
background-color: rgb(74, 222, 128);
text-align: center;
padding-top: 15px;
padding-bottom: 15px;
color: #FFFFFF;
font-size: 30px;
font-weight: bold;
font-style: italic;
border-radius: 6px;
}
.btn a:hover {
background-color: rgb(22, 163, 74);
color: #FDE68A;
margin-left: 5px;
margin-top: 5px;
box-shadow: none;
}
</style>
<title>Document</title>
</head>
<body>
<div class='btn'>
<a href=''>クリック</a>
</div>
</body>
</html>Tailwind CSS
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class='w-1/2 leading-10 group'>
<a href=''
class="block w-full h-full no-underline text-center [padding-top:15px] [padding-bottom:15px] bg-green-400 text-white text-3xl font-bold italic [border-radius:6px;] group-hover:bg-green-600 group-hover:text-yellow-200 group-hover:[margin-top:5px] group-hover:[margin-left:5px]">クリック</a>
</div>
</body>
</html>みてわかる通り、明らかにコードの量が違います。
書く量も少なくなるので作業スピードも上がると思いました。
まとめ
今回はじめてTailwind CSSを使ってみましたが、CSSを書いた時とTailwind CSSで書いた時とスピードはほぼ同じでした。
慣れているCSSと初めて使ったTailwind CSSが同じ速度なら、今後はTailwind CSSに慣れた方が断然作業スピードは上がると思います。
皆さんも是非Tailwind CSSを使ってみてはいかがでしょうか。
