【Next.js/TailwindCSS】Tailwind.cssを触ってみる | Next.js Tutorial #2 - CSS Styling

Tailwind CSSとは

• Tailwindはコードの中に直接ユーティリティクラスを指定することでビルドの速度を向上させられるCSSフレームワークで、たとえば"text-blue-500"のように、クラス名をスタイル要素に指定することで、<h1>要素を青色にすることが出来ます。

Tailwind is a CSS framework that speeds up the development process by allowing you to quickly write utility classes directly in your React code.
In Tailwind, you style elements by adding class names. For example, adding "text-blue-500" will turn the <h1> text blue:

• CSSクラスがグローバルなファイルであっても、それぞれのクラスはそれぞれの要素にだけ適用される。これによって要素を追加したり削除しても、スタイルシートを分離させたり、スタイルの衝突だったり、CSSのファイルの大きさを気にする必要がなくなった。

Although the CSS styles are shared globally, each class is singularly applied to each element. This means if you add or delete an element, you don't have to worry about maintaining separate stylesheets, style collisions, or the size of your CSS bundle growing as your application scales.

所感

• あらかたTailwindの中でcssプロパティが決まっていてそれぞれのHTML要素にプロパティの名前を付与するだけでよさそうと認識した。メンテナンスコストを下げるという面では非常に良さそうだけど、BootStrapに高速レンダリング機能を持たせたもの？くらいのイメージしか湧いていない。

実際にサンプルコードを書いてみよう

// page.tsxに追記
export default function Page() {
  return (
    <main className="flex min-h-screen flex-col p-6">
+      <div
+        className="relative w-0 h-0 border-l-[15px] border-r-[15px] border-b-[26px] border-l-transparent border-r-transparent border-b-black"
+      />
      <div className="flex h-20 shrink-0 items-end rounded-lg bg-blue-500 p-4 md:h-52">
        {/* <AcmeLogo /> */}
      </div>

• 追記してから起動したサイトを見ると、特定の図形が描画されていることが分かる。（tutorialのquizの答えになるため割愛）

参考