TailwindCSSの概要

投稿日: 2022-04-20 2022-04-20
タグ: css

この記事では、私の個人的なお気に入りのデザインフレームワークである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 640px
md 768px
lg 1024px
xl 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を確認する前にすばらしいデザインの作成を開始できます。

getdocs

13036