概要
Tailwind CSSは分かりやすい名称のため、cssが苦手な私にも優しい作りをしています。
ただインタラクティブなコンポーネントを作成する場合、class名に全て定義していくと非常に長くなり、読みにくいものになってしまいます。
そのためカスタムクラスに定義し可読性の高いコードを担保しますが、Tailwind CSS IntelliSense でも補完されないようです。そのうち解決してくれそうですが、現時点での対応策を記載します。
カスタムクラスの作り方
まず公式の通りに作成する場合は、base, component, utilitiesの3つのレイヤーがあり、それぞれに対応するCSSを定義していきます。 全体に適用する場合はbase、特定のコンポーネントに適用する場合はcomponent、特定のユーティリティに適用する場合はutilitiesを使用します（公式ドキュメント）。
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.max-container {
max-width: 1440px;
margin: 0 auto;
}
.input {
@apply text-slate-gray max-sm:border-slate-gray border pl-5 text-base leading-normal outline-none max-sm:w-full max-sm:rounded-full max-sm:p-5 sm:flex-1 sm:border-none;
}
}解決策
公式にもIssueが立っており、現時点での解決策が記載されています。
Tailwind IntelliSense does not list my custom class in @layer Utilities · Issue #227 · tailwindlabs/tailwindcss-intellisense
I have created some custom style class inside @layer utilities {}. And when I used those classes in Classname="...", Intellisense did not recommend or list them. But it still works. Example in my g...
カスタムクラスとして追加したい内容をpluginsとして追加することで、補完されるようになります。
tailwind.config.js
const plugin = require("tailwindcss/plugin");
/** @type {import('tailwindcss').Config} */
export default {
plugins: [
plugin(({ addUtilities }) => {
addUtilities({
".max-container": {
"max-width": "1440px",
margin: "0 auto",
},
".input": {
"@apply sm:flex-1 max-sm:w-full text-base leading-normal text-slate-gray pl-5 max-sm:p-5 outline-none sm:border-none border max-sm:border-slate-gray max-sm:rounded-full":
{},
},
});
}),
],
};