Warning: count(): Parameter must be an array or an object that implements Countable in /home/xs638785/agile-software.site/public_html/wp-content/plugins/rich-table-of-content/functions.php on line 490
Tailwind CSSではフォントの大きさや色、マージン、パディングなどさまざまなクラスが用意されていて、これらを組み合わせて使用します。
Utility-First
複雑なコンポーネントをつくるための単純で扱いやすい機能を集めた
<!-- 公式ドキュメントから引用 -->
<!-- class 属性に付与さているのは全て utility class -->
<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
<div class="flex-shrink-0">
<img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
</div>
<div>
<div class="text-xl font-medium text-black">ChitChat</div>
<p class="text-gray-500">You have a new message!</p>
</div>
</div>コンポーネント
ファイルやプログラムの構成要素
インストール方法
Tailwindの導入は、基本的にnodejsが必要です（nodejsで成果物CSSをビルドする）。
npm経由でインストールする
npm install -D tailwindcss@latest postcss@latest autoprefixer@latestnpx tailwindcss init -pmodule.exports = {
purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
};@tailwind base;
@tailwind components;
@tailwind utilities;CDN経由でTailwindを読み込む
以下のコードを<head>内に記述すれば使用することができます。
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
