Tailwind CSSとは?

Tailwind CSSは、CSSフレームワークの1つで、クラス名を使ってスタイリングを行うことができるため、HTMLコードとCSSコードの結合を防ぎ、保守性と開発効率を向上させることができます。

CSSでボタンを作る場合、以下のようにスタイルを定義する必要があります。

button.html

<button>Click me</button>

button.css

button {
background-color: blue;
color: white;
font-weight: bold;
padding: 10px 20px;
border-radius: 5px;
}

button:hover {
background-color: darkblue;
}

一方、Tailwind CSSを使用する場合、以下のようにクラス名を追加するだけで同じデザインを実現できます。

vue.js

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Click me
</button>

全文はこちら

Tailwind cssを使ってみたらCSS/Vuetifyに戻りたくなくなった
著者:@yutoun