TailwindCSSの概要
この記事では、私の個人的なお気に入りのデザインフレームワークであるTailwindCSSについて見ていきます。 迅速でレスポンシブなデザインを作成するための、完全にスタイルにとらわれないユーティリティベースのライブラリ。 Tailwindは非常に単純なので、命名規則とパターンを理解すれば、ドキュメントを必要とせずにほとんどの機能を推測できます。
ここで紹介するすべてのオプションについては、公式ドキュメントで詳しく調べることができます。
インストール
Gulp、postCSS、または独自のCLIなど、Tailwindを設定する方法はいくつかありますが、学習を開始するための最も簡単な方法は、unpkgのCDN URLhttps://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css
を使用することです。
または、npmまたはYarnを使用してライブラリをプロジェクトにインストールできます。
$ npm i tailwindcss # or, if Yarn is more your thing: $ yarn add tailwindcss
ボイラープレート
unpkgのTailwindを含む単純なボイラープレートHTMLファイルは次のとおりです。
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <link rel="stylesheet" href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"> <title>Tailwind CSS</title> </head> <body> </body> </html>
色
色のクラス名は常に同じelement-color-intensity
です。 したがって、赤い背景はbg-red-500
になり、数値の範囲は100から900になります。 このパターンは、境界線、背景、およびテキストに適用されます。
簡単な例を次に示します。
<h1 class="text-blue-400">Hello World</h1> <p class="text-white bg-indigo-900">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Neque, veniam.</p> <!-- Border needs to be set before the border-color can be changed --> <input type="text" class="bg-transparent text-white border border-red-600" placeholder="input...">
サイズと間隔
w
およびh
に短縮された幅と高さは、0から64までの値を取ることができます(一部の値が欠落しています。ドキュメントまたはVSCodeのIntelliSenseで確認できます。 )およびauto
、100%の場合はfull
、100vw/vhの場合はscreen
などのいくつかのキーワード。 幅は1〜6または12の分数を使用することもできるため、50 % li ke 1/2
、2/4
、3/6
、または[と書くことができます。 X121X]。
間隔は非常によく似ており、プロパティ、サイド(ダッシュなしの省略形)、そして値だけです。 したがって、padding-bottom: 2rem;
はpb-8
になり、ここでも0から64の範囲で、t
、b
、l
、r
、x
は左右、y
は上下です。
<div class="bg-green-700 h-16 w-auto mr-10"></div> <div class="bg-blue-700 h-24 w-4/6 my-16"></div> <div class="bg-red-700 h-40 w-6/12 mx-auto"></div> <div class="bg-purple-700 h-56 w-2/12 ml-48"></div> <div class="border border-white h-40 w-56 mt-10 mx-auto"> <h1 class="text-white py-16 px-16">I'm a box</h1> </div>
レイアウト
Tailwindは、フロート、位置、さらには Flexbox など、標準のCSSポジショニングの多くの快適さを提供します。 Flexboxでは、最初にflex
で初期化する必要があることを除けば、それらの使用はほぼ期待どおりです。
サイズと同様に、命名パターンはproperty-value
であるため、右フロートはfloat-right
になり、justify-content: center;
はjustify-center
になります。
<!-- Basic Navbar --> <nav class="flex justify-between items-center px-16 bg-purple-800 text-white h-24"> <h1>Title</h1> <ul class="flex justify-between w-56"> <a href="#"> <li>Link</li> </a> <a href="#"> <li>Link</li> </a> <a href="#"> <li>Link</li> </a> </ul> </nav>
タイポグラフィ
CSSですでに実行できる標準的な機能に加えて、Tailwindは、フォントファミリに不測の事態を追加するなど、他の方法では非常に面倒な作業へのショートカットをいくつか提供します。これは、font-sans
、font-serif
、またはfont-mono
で、フォントのグループが処理されます。
これまで使用してきた0-64ユニットの代わりに、font-size
(text
に短縮)はxs
、sm
、base
を取ります、lx
、およびxl
から6xl
。
これらの例外を除いて、ほとんどのテキストオプションはCSSであり、以前と同じ命名パターンで使用できます。
<p class="text-md font-mono font-bold text-white">Hello World</p> <p class="text-lg font-sans line-through text-white">Hello World</p> <p class="text-4xl font-serif text-center text-white">Hello World</p> <p class="text-6xl font-mono text-right italic font-extrabold text-white">Hello World</p>
応答性
これは、メディアクエリの必要性を減らすという点で、Tailwindが本当に輝いているところです。 これらのプレフィックスを使用すると、クラスを特定の幅より上でのみ機能するように制限できます。これまでのように、プレフィックスなしのバージョンでは、範囲外のすべてで機能します。
sm
640pxmd
768pxlg
1024pxxl
1280px
<body class="bg-gray-900 flex flex-col md:flex-row"> <div class="h-32 w-32 mt-16 mx-auto lg:bg-orange-500 md:bg-red-500 sm:bg-purple-800 bg-white"></div> <div class="h-32 w-32 mt-16 mx-auto lg:bg-orange-500 md:bg-green-800 sm:bg-indigo-300 bg-white"></div> <div class="h-32 w-32 mt-16 mx-auto lg:bg-orange-500 md:bg-blue-200 sm:bg-teal-600 bg-white"></div> </body>
結論
うまくいけば、これはこの強力な小さなライブラリへの有益な紹介でした。 Tailwindの学習曲線は非常に小さく、その構文は非常に一貫しているため、経験がほとんどなくても、CSSを確認する前にすばらしいデザインの作成を開始できます。