大ちゃんの駆け出し技術ブログ

RUNTEQ受講生のかわいいといわれるアウトプットブログ

Tailwind

はじめに

こんにちは!大ちゃんの駆け出し技術ブログです!

毎日投稿をしていたので6日ぶりの投稿でもかなり久しぶりの投稿と感じてしまいます、、!

現在PFを開発中で隙間時間にVueJSを学習しています。 PF開発への集中やVueJSの楽しさにかまけてブログの投稿をさぼってしまう気持ちが強くなってしまっていますね。

いや、だめだ!!!!!!!!!!!!!!!!!!!!!

せっかく発信する習慣を2月で身につけられたのにその習慣がなくなってしまう、、、💦

ということで今回は久しぶりの発信として、現在のPF開発でお世話になっている「Tailwind」について発信していきます!

Tailwindとは

「Tailwindってなんぞや????」

そう思われる初学者は多いと思います。 半年間ほどプログラミングを学習している自分も初めて聞いた言葉でした。

一言でいうと、

"Bootstrapとは別のCSSフレームワーク"です!

【公式サイト】

tailwindcss.com

Bootstrapと同様にクラスを付与することでスタイルを付けることができます。

例えば以下のような感じです。

= link_to 'ログイン', login_path, class: 'bg-green-700 py-4 px-8 rounded-lg ext-white'

[ボタンのデザイン]

https://i.gyazo.com/ab77abdfced89984c04f752e45377e40.png

このようにBootstrapと同じように指定のクラスを付与する方法でデザインを施していきます。

しかし、Bootstrapよりも付与するクラスの数はとても多いと思いませんか?

Bootstrapは使っている方も多いため共感してくれる人が多いと思いますが、1, 2つのクラスを付与するだけでスタイルが完成します。 例えばよく使われるボタン系のクラスの場合、以下のようにクラスを付けるだけで完成です。

= f.submit 'ログインする', class: 'btn btn-primary'

[ボタンのデザイン]

https://i.gyazo.com/32a4528181c8ec4321af65578180ca0e.png

これはBootstrap側で用意されているコンポーネントをそのまま利用しているためです。コンポーネントとは部品という意味で、既に完成させれらたものというイメージです。そのため、開発者側がいろいろと考えてスタイルを付ける必要はなく、簡単にデザインを施すことができます。

では、なぜTailwindを使う必要があるのでしょうか。 それは、独自のオリジナルデザインの作りやすさにあります。

Bootstrapはコンポーネントの便利さの反面、スタイルが似通ってしまうというデメリットもあります。コンポーネントという特性のために開発者側がスタイルを細かく自由に定義できないため、開発者側が表現できるデザインの幅は狭くなってしまいます。そのため、他のBootstrapを使うアプリやWebサイトと似たようなデザインにどうしてもなってしまうのです。自分のアプリに合わせたデザインも制限されてしまいます。

「自分のアプリに合わせてレイアウトを整えたい!」

そんな方のためにTailwindをお勧めします!!

上記のボタンをTailwindでも表現しようとすると、以下のようなコーディングになります。

クラスをたくさん付与していますね。。。 これはつまり、クラスに対応する元々のCSSスタイルの数自体も少ないという意味です。

下記Tailwindのチートシートのリンクに遷移してみて下さい。

nerdcave.com

御覧のようにTailwindのクラスに対応するCSSのスタイルが見れるかと思います。

1つ1つのクラスに対応するスタイルの数は1つである場合がほとんどだと思います。 例えば、Flexboxのflexクラスはdisplay: flex; のスタイルのみしか適応されないんですよね。

それに対して、Bootstrapの.btn-primarのCSSスタイルは以下の3つです。

  • color: #fff;
  • background-color: #007bff;
  • border-color: #007bff;

コンポーネントの部分でも説明しましたが、すでに出来上がっているスタイルを適用するということなんですよね。

まとめると、BootstrapとTailwindの違いは

Bootstrap・・・元々完成されているCSSの組み合わせをクラスを付与することで適用する Tailwind・・・CSSの単一のスタイルを簡易的にクラスで付与することで適用する

このイメージで間違いないと思います!!

Railsへの導入

ではRailsアプリに実際にTailwindを導入していきます。 このブログでは繰り返しになりますが、使用するアプリケーションは現場Railsの「Taskleaf」を使用します。

基本的には以下の公式の導入方法に従って進行して行きます。

rails/tailwindcss-rails

まずは下記コマンドを実行して行きましょう。

$ bundle add tailwindcss-rails

すると下記エラーが表示されたのではないでしょうか。

Bundler could not find compatible versions for gem "rails":
  In snapshot (Gemfile.lock):
    rails (= 5.2.4.5)

  In Gemfile:
    rails (~> 5.2.4, >= 5.2.4.4)

    tailwindcss-rails was resolved to 0.3.3, which depends on
      rails (>= 6.0.0)

Running `bundle update` will rebuild your snapshot from scratch, using only
the gems in your Gemfile, which may resolve the conflict.

これは自分も知らなかったんですけど、このtailwindcss-railsは最近追加されたもののようですね。プルリクエストのページからもわかるのですが、1番古いプルリクエストが最近です。

rails/tailwindcss-rails

そのため、対応しているRailsのバージョンが>= 6.0.0以上でないと使えないようです。

解決方法として、GemfileにあるRailsのバージョンしている箇所を修正しましょう。

# Gemfile
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '>= 6.0.0'

この状態でbundle updateをしてみましょう。

$ bundle update

これで再度下記コマンドを実行しましょう。

$ bundle add tailwindcss-rails
Fetching tailwindcss-rails 0.3.3
Installing tailwindcss-rails 0.3.3

無事インストールされたみたいですね。では下記コマンドを実行します。

$ bin/rails tailwindcss:install
✨  Done in 4.79s.
      append  app/javascript/packs/application.js
Configuring Tailwind CSS
      create  app/javascript/stylesheets
      create  app/javascript/stylesheets/application.scss
         run  npx tailwindcss init from "."

複数のファイルが作成されました。

[作成されたファイル]

// app/javascript/stylesheets/application.scss
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
// app/javascript/stylesheets/tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

自分の場合、作成時点でslimに移行していたために以下のような警告が出ました。

insert  postcss.config.js
Default application.html.erb is missing!
Add <%= stylesheet_pack_tag "application", "data-turbo-track": "reload" %> within the <head> tag in your custom layout.

application.html.erbに追加しようとした記述があったが、application.html.slimに切り替えていたため、追記できなかったと書いてあります。

以下の記載をapplication.html.slimに追記しましょう。

/ app/views/layouts/application.html.slim
doctype html
html
  head
    title
      | ShowProfile
    = csrf_meta_tags
    = csp_meta_tag
    / = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
    = stylesheet_pack_tag "application", "data-turbo-track": "reload"
    = javascript_pack_tag 'application', 'data-turbolinks-track': 'reload'
  body
    = yield

これでインストールは完了です!!!!

Bootstrapか、Tailwindか

繰り返しますが、TailwindはCSSファイルを使わずにCSSを付与しているので、より自分にあったデザインを施すことができます。 しかし、その反面、コンポーネントを使わずに一から自分でデザインを施すのでBootstrapと比べてスタイリングの手間はかなり重いかなと思います。

便利さのBootstrapを選ぶのか、自由さのTailwindを選ぶのか。

殊PF開発においては、自分はTailwindを推したいと思っております! デザインを似通ったものにしたくないからです。

Bootstrapはいまだに多くの人が使っていると予想しています。 初学者がデザインを調整するのにかかる時間が節約できますし、デザイン自体に自信のない方が簡単にデザインを調整できるので学習コストも下げることができます。

しかし、上述したようにBootstrapは見た目が似通ってしまうというデメリットがあります。

PFを見る企業の人はこれまでに何度も未経験者のPFを見ています。目が肥えているといった方がいいでしょう。 そして、初学者でどれだけPFにポートフォリオを使っている割合は、定かではありませんが少なくはないと思っています。

自分のPFを見た企業の人が最初にあなたのPFを見たとき、第一印象が他のWebサイトで似通っているデザイン、はたまた、あなたが時間をかけて作り上げた独自のデザイン、どちらがより印象に残ると思いますか?

当然前者の方が印象に残るかと思います。

もちろんデザインは整ったものにしないと、逆にデザインのセンスなしという烙印を押される可能性がなきにしもあらずなので、しっかりとデザイン周りに気をつける必要はあります。しかし、あらかじめユーザーに使ってもらってFBを得ておくことで改善は可能だと思います。

終わりに

今回の内容はいわゆるポジショントークなやつなのかなと思っています。

Bootstrapそのままのデザインはあまり快く思われていないということからTailwindの方を使うべきだというのはまさにポジショントークなやつなのかなと、、、

なのでここまで書いておいてなんですが、Bootstrapが好きな方はそのまま使ってもいいと思います。否定はしません!

デザインの好みは人それぞれですし、Bootstrapでのデザインで十分自分好みに実装できるということであれば問題ないです!

Tailwindで実装したいという方は自分と一緒に実装頑張って行きましょう!

以上、大ちゃんの大ちゃんの駆け出し技術ブログでした!