私がブートストラップからTarwindへ切り替えた理由は、ここにあります.

こんにちは、仲間の開発者、これは私の最初のブログ記事です、そして、あなたがこの1のような経験的なブログを読むことを楽しむならば、コメントをください.)

始めましょう！

ジャンプする

So, what is bootstrap and tailwind?

My Experience of using Bootstrap

My Experience of using Tailwind

Which one is better?

What's Next?

では、ブートストラップとテールウィンドは何ですか？

Tailwind and bootstrap are CSS frameworks.

A CSS framework is a set of CSS template classes mixed with several JavaScript features that can be used to style html elements.

なぜCSSフレームワーク？

さて、もう一度、それは人の選択です.CSSフレームワークはスタイリングをスピードアップします.
最初のWebプロジェクトを作成したとき、私はそれについて知りませんでした.
これを実現した後、私はすぐにgoogledとブートストラップについて発見した.私はすぐにいくつかのYouTubeチュートリアルを見て、私の次のWebプロジェクトでそれらを使用し、結果は何ですか?私はコアの機能に多くの時間を割くことができ、また、サイトのスタイルはきれいで美しい保つ.
正直なところ、スタイルは私の最初のWebプロジェクトよりずっとよかったです.

ブートストラップの使用経験

まず、CSSフレームワークとしてブートストラップについて知っておきましょう。

ブートストラップには、ボタン、リスト、モダール、ナビゲーションバーなどのコンポーネントのためのテンプレートクラスがあります.いいね.はい.

経験

私が言ったように、私の最初のCSSフレームワークはブートストラップです.そして、それは私がより速く、よりスタイリッシュにプロジェクトを作成するのに大いに役立った.
しかし、いくつかのプロジェクトを作成した後、私はほとんどのプロジェクトのコンポーネントが似たようなスタイルを持っていることに気づいた.また、別のスタイルのボタンを必要とする場合、私はすべてのCSSを別々に書くか、またはいくつかのブートストラップクラスと私のカスタムクラスでミックスする必要があります.さて、私は2番目だった.
しばらくして、私はCSSの1000行を書くことに戻ることに気づいた.

それで、私はブートストラップについて悩みました
特に、それはコンポーネントクラスでした.時々、デフォルトのパディング、特定のコンポーネントの境界プロパティを嫌います.
それらのいくつかは:ボタン、入力フォーム、modalsなどです.
また、ユーティリティクラスを見ている場合は、各ユーティリティのオプションが限られています.
Padding(P - 1、P - 2、P - 3、P - 4、P - 5)
そのため、例えば、要素のユーティリティで特定の値を必要とする場合は、別のCSSクラスを書きます.インラインCSSスタイルを使用します❌ 推奨されない場合は、よく、あなたが疑問に思っている場合は、いずれかをGoogleすることができますか私はそれのために少しのブログを書くでしょう.
しかし、私はすべての初心者フロントエンドの開発者やデザインのビットが弱い人々にブートストラップをお勧めします.
私を信じてください、あなたのデザインスキルが弱いと思うならば、ブートストラップでいくつかのプロジェクトを作成してください、そして、ゆっくりと、しかし、着実に、あなたは各々の構成要素にスタイルに多くのデザイン基礎を学びます

私の体験談

さて、CookieフレームワークとしてTailwindについて最初に知っておきましょう。

ToowindはCSSユーティリティフレームワークです.これは、ブートストラップとは異なり、Trewindが事前に構築されたコンポーネントクラスに付属していないことを意味します.
さて、基本的には、それが提供するユーティリティクラスで、それぞれのHTML要素を独自にスタイリングするでしょう.

それでは、どうやってCookwindをCSSフレームワークとしてお手伝いしますか?
- Tailwindには、擬似要素を含むほとんどすべてのCSSクラスのユーティリティークラスがあります.
\- tailwind明示的な値をサポートする​​サポートするユーティリティクラスに.( EG : P -[ 10 px ]、width -[ 80 vw ]など).
- Tarwindは、特にダークモード用のクラスをサポートしています.

経験

私は今4ヶ月の間Tailwindを使っています、そして、私は本当にそれが好きです.
私にとっては、前にブートストラップを使ったユーティリティークラスを使っていたので、Tailwindを学ぶのは難しくなかった.
私がすぐに気づいたことは、いくつかのユーティリティクラスがブートストラップに比べて短い名前を持つことです.
例えば、

CSS -> 'display: flex' 

Bootstrap -> 'd-flex'

Tailwind -> 'flex'

//CSS-> justify-content: center

Bootstrap -> 'justify-content-center'

Tailwind -> 'justify-center' 

私はこの例を使用します.なぜならフレックスは私が自分のウェブサイトでたくさん使っているからです.
しかし、1つの事に注意すべきです.あなたのプロジェクトを迅速に完了する(大学のプロジェクトのように、期限を提出する必要があります)をしたい場合は、Tailwindは最良の選択ではない場合があります.
今私のプロジェクトは独自のスタイルを持っています.
あなたが時間があるならば、あなたは私の個人的なウェブサイトをチェックすることができます.
もう一つの注意:Tailwindが事前に構築されたコンポーネントを持っていないので、それはあなたがあなた自身すべてをコード化しなければならないことを意味しますか?コンポーネントのスケルトンとロジックをコード化したヘッドレスUI、Radix UI(プリミティブ)などの多くのコンポーネントベースのライブラリがあります.

どちらが良いですか。

To me, this is clearly Tailwind CSS. But, as I pointed out its positive and negative sides, the choice of a favorite is up to you.

Well, this is where my personal opinion about bootstrap and tailwind ends.

では、次は何ですか？

Well, there are many more CSS frameworks like Material UI (MUI), Bulma, Foundation, etc.

But there is one more thing called "CSS-in-JS", which is not a CSS framework, instead it is considered to be a better way to write CSS for the modern web applications. There are many libraries that use this, such as Styled Components, Emotion, Stitches, and so on. This is what I will try next.