Plugins
あおけん再利用可能なサードパーティプラグインでTailwindを拡張する。
プラグインを使用すると、CSSの代わりにJavaScriptを使用してユーザーのスタイルシートに注入する新しいスタイルをTailwindに登録できます。
最初のプラグインを始めるには、tailwindcss/pluginからTailwindのプラグイン関数をインポートします。 そして、plugins配列の中で、インポートしたplugin関数を最初の引数として無名関数で呼び出します。
// tailwid.config.js
const plugin = require('tailwindcss/plugin')
module.exports = {
plugins: [
plugin(function({ addUtilities, addComponents, e, config }) {
// Add your custom styles here
}),
]
}
プラグイン関数は1つのオブジェクト引数を受け取り、それをいくつかのヘルパー関数に分解することができる
- addUtilities(): 新しい静的ユーティリティ・スタイルを登録する
- matchUtilities(): 新しいダイナミック・ユーティリティ・スタイルを登録する
- addComponents(): 新しい静的コンポーネント・スタイルを登録する
- matchComponents(): 新しいダイナミック・コンポーネントのスタイルを登録する
- addBase(): 新しいベーススタイルを登録する
- addVariant(): カスタム静的バリアントを登録する
- matchVariant(): カスタムダイナミックバリアントを登録する
- theme(): ユーザーのテーマ設定にある値を検索する。
- config(): ユーザーのTailwindコンフィギュレーション内の値を検索する。
- corePlugins(): コアプラグインが有効かどうかをチェックする
- e(): クラス名で使用される文字列を手動でエスケープする。
あおけんOfficial plugins
私たちは、何らかの理由でまだコアに属していない人気のある機能のために、一握りの公式プラグインを開発しました。
プラグインはnpm経由でインストールし、tailwind.config.jsファイルに追加することでプロジェクトに追加できます
/** @type {import('tailwindcss').Config} */
module.exports = {
// ...
plugins: [
require('@tailwindcss/typography'),
require('@tailwindcss/forms'),
require('@tailwindcss/aspect-ratio'),
require('@tailwindcss/container-queries'),
]
}
Typography
tailwindcss/typographyプラグインは、マークダウンやCMSデータベースなどのソースから来るコンテンツブロックに、賢明なタイポグラフィスタイルを素早く追加するために使用できる散文クラスのセットを追加します。
<article class="prose lg:prose-xl">
<h1>Garlic bread with cheese: What the science tells us</h1>
<p>
For years parents have espoused the health benefits of eating garlic bread with cheese to their
children, with the food earning such an iconic status in our culture that kids will often dress
up as warm, cheesy loaf for Halloween.
</p>
<p>
But a recent study shows that the celebrated appetizer may be linked to a series of rabies cases
springing up around the country.
</p>
<!-- ... -->
</article>
Forms
tailwindcss/formsプラグインは、ユーティリティ・クラスを使ってフォーム要素を簡単にスタイルできるようにする、意見を反映したフォーム・リセット・レイヤーを追加します。
<!-- You can actually customize padding on a select element: -->
<select class="px-4 py-3 rounded-full">
<!-- ... -->
</select>
<!-- Or change a checkbox color using text color utilities: -->
<input type="checkbox" class="rounded text-pink-500" />
Aspect ratio
tailwindcss/aspect-ratioプラグインは、古いブラウザでも動作するネイティブのアスペクト比サポートに代わるもので、要素のアスペクト比を固定するために組み合わせることができるaspect-w-*とaspect-h-*クラスを追加します。
<div class="aspect-w-16 aspect-h-9">
<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
Container queries
tailwindcss/container-queriesプラグインは、@smや@mdのような新しい@{size}バリアントを追加し、ビューポートの代わりに@containerでマークされた親の寸法に基づいて要素をスタイルできるようにします。
<div class="@container">
<div class="@lg:text-sky-400">
<!-- ... -->
</div>
</div>