追い風CSS(tailwindcss)が結局楽かも

追い風CSS(tailwindcss)が結局楽かも

  • 2021-04-29  最終更新日:2021-04-29

最初にtailwindcssのv1が出た頃はまだbootstrapで良いかな。 htmlに入れるクラスタグが多過ぎと思っていました。あまり良い印象はなかったです。 時は過ぎいろいろと触っているとなんだかんだでtailwindの方が楽なんじゃないかと思った次第です。

なぜかというとbootstrapで書いても結局自前でCSSを記載していくことになります。かなり手間と時間もかかります。 Tailwindならクラス名とか考えなくて良いし、htmlにタグをどんどん入れていくだけで割と出来てしまうので、それならと導入してみたら結果良かったので紹介します。まだ慣れが必要ですが結構気に入りました。bootstrapのgrid + tailwindcssにして使ってます。

現バージョンはv2.1.2


最初はサイトを見ながら書くと良いです。 練習用は以下のようにCDNで読み込んで使ってみると良いです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Tailwind-TEST</title>
  <link rel="stylesheet" href="https://unpkg.com/tailwindcss@2.1.2/dist/tailwind.min.css">
</head>
<body>
<div class="flex">
  <div class="flex-none w-48 relative">
    <img src="/classic-utility-jacket.jpg" alt="" class="absolute inset-0 w-full h-full object-cover" />
  </div>
  <form class="flex-auto p-6">
    <div class="flex flex-wrap">
      <h1 class="flex-auto text-xl font-semibold">
        Classic Utility Jacket
      </h1>
      <div class="text-xl font-semibold text-gray-500">
        $110.00
      </div>
      <div class="w-full flex-none text-sm font-medium text-gray-500 mt-2">
        In stock
      </div>
    </div>
    <div class="flex items-baseline mt-4 mb-6">
      <div class="space-x-2 flex">
        <label>
          <input class="w-9 h-9 flex items-center justify-center bg-gray-100 rounded-lg" name="size" type="radio" value="xs" checked>
          XS
        </label>
        <label>
          <input class="w-9 h-9 flex items-center justify-center" name="size" type="radio" value="s">
          S
        </label>
        <label>
          <input class="w-9 h-9 flex items-center justify-center" name="size" type="radio" value="m">
          M
        </label>
        <label>
          <input class="w-9 h-9 flex items-center justify-center" name="size" type="radio" value="l">
          L
        </label>
        <label>
          <input class="w-9 h-9 flex items-center justify-center" name="size" type="radio" value="xl">
          XL
        </label>
      </div>
      <div class="ml-auto text-sm text-gray-500 underline">Size Guide</div>
    </div>
    <div class="flex space-x-3 mb-4 text-sm font-medium">
      <div class="flex-auto flex space-x-3">
        <button class="w-1/2 flex items-center justify-center rounded-md bg-black text-white" type="submit">Buy now</button>
        <button class="w-1/2 flex items-center justify-center rounded-md border border-gray-300" type="button">Add to bag</button>
      </div>
      <button class="flex-none flex items-center justify-center w-9 h-9 rounded-md text-gray-400 border border-gray-300" type="button" aria-label="like">
        <svg width="20" height="20" fill="currentColor">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" />
        </svg>
      </button>
    </div>
    <p class="text-sm text-gray-500">
      Free shipping on all continental US orders.
    </p>
  </form>
</div>
</body>
</html>

本番環境は重すぎるので導入作業は必須です。 tailwind.config.jsに設定を記載します。 webpackと合わせて使ってます。

メリット

  • ほぼCSSを書かなくて良い
  • クラス名を考えなくて良い
  • パージすれば使った分のCSSサイズになるので軽い
  • カスタム可能

デメリット

  • 覚えるのが大変
  • 導入の敷居が高い
  • パージしなければCSSサイズが重い

参考サイト

参考になれば幸いです。


∞Tadashi Suyama∞

tailwind css
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

サイト内検索

最近の投稿

アイキャッチ
そろそろvuejs始める

最近はjQueryよりvueで書いた方が楽ではないかと思い学習中です。 そもそもVuejsはドキュメントが日本語対応なので試しやすいし情報も豊富なので学習しやすいです。 3大フレームワークと呼...

02 May 2021

アイキャッチ
追い風CSS(tailwindcss)が結局楽かも

最初にtailwindcssのv1が出た頃はまだbootstrapで良いかな。 htmlに入れるクラスタグが多過ぎと思っていました。あまり良い印象はなかったです。 時は過ぎいろいろと触っていると...

29 Apr 2021

アイキャッチ
エラー処理について

COJPドメンを取得する際に「登記年月日」という項目があります。 その項目通り登記した年月日を入れる訳ですが、なぜかエラーが出ました。 半角英数字にして下さいというよくあるエラーです。当然半角英...

24 Jan 2021

アイキャッチ
javascriptのundefinedの判定

jqueryで高さの数値をとって足し算をしていたらエラーも出ずに動かないということになったので調べてみました。 ワードプレスで管理画面のアドミンバーが一度ログインするとフロント画面でも表示される...

17 Jan 2021

アイキャッチ
Webpack5にアップデートしてエラーの対処方法2つ

webpack4(4.41.5)から webpack5(5.12.1)にあげました。 特に難しい設定は行っておらず主にscssと共通モジュールの設定だけで使っているのですがそれでもエラーが出たの...

09 Jan 2021

著者

ウェブエンジニアの須山のブログです。

WEBに関することや個人的に関心のあることについて書きます。主に技術系ブログです。

タグクラウド

tailwind css
フッターイメージ