Tailwind Apply Grouper

English | 日本語

English

Tailwind Apply Grouper is a VS Code extension that splits consecutive Tailwind CSS @apply utilities in CSS and SCSS source files into readable category-based declarations. It does not build Tailwind or format the entire CSS document.

Usage

In a CSS or SCSS editor, use one of the following commands:

• Tailwind Apply: Organize in the Command Palette: organizes the selection when present, otherwise the whole document.
• Tailwind Apply: Organize Document in the Command Palette: always organizes the whole document.
• Organize Tailwind @apply in the editor context menu: behaves like Tailwind Apply: Organize.

.card {
	@apply text-color8 text-center text-xl font-bold relative gap-6 px-6 py-8 rounded-lg bg-white shadow-md mx-auto flex w-7xl justify-between;
}

.card {
	@apply relative flex w-7xl justify-between;
	@apply mx-auto gap-6 px-6 py-8;
	@apply text-color8 text-center text-xl font-bold;
	@apply rounded-lg bg-white shadow-md;
}

Settings

{
	"tailwindApplyGrouper.comments": false,
	"tailwindApplyGrouper.organizeOnSave": false,
	"tailwindApplyGrouper.saveTimeoutMs": 500,
	"tailwindApplyGrouper.sortMode": "category",
	"tailwindApplyGrouper.categories": [
		{ "id": "motion", "label": "Motion" }
	],
	"tailwindApplyGrouper.categoryOrder": [
		"layout", "spacing", "typography", "appearance", "motion", "other"
	],
	"tailwindApplyGrouper.classificationRules": [
		{
			"match": { "type": "prefix", "value": "animate-" },
			"category": "motion",
			"order": 100
		}
	]
}

Enable comments to output category headings. A comment whose text matches a configured category label and immediately precedes an @apply declaration is treated as an existing generated heading, even when the declaration was edited to mix categories. This prevents an old and a new heading from being duplicated. Comments that cannot be identified this way are preserved.

With the default sortMode of category, utilities are stably sorted using the built-in group order. preserve retains the original order within each category. If Prettier or prettier-plugin-tailwindcss changes inline utility order on save and causes output to alternate, use preserve so this extension only splits categories.

Organize on save runs only when organizeOnSave is enabled. saveTimeoutMs defaults to 500 ms and accepts whole-number values from 1 to 60000. On timeout, syntax or configuration errors, or when a safe ordering cannot be determined, it makes no edit and never blocks saving.

Safety

• A group is left unchanged when unknown utilities, arbitrary properties, SCSS interpolation, or another construct prevents safe ordering from being determined.
• @apply ... !important; keeps !important on every resulting @apply declaration.
• Utilities inside @apply are never removed or renamed.
• Only CSS and SCSS are supported. HTML/PHP/JSX class attributes, embedded Vue/Svelte styles, LESS, and Tailwind CSS v3 are out of scope.

日本語

English | 日本語

Tailwind Apply Grouper は、CSS・SCSSソースファイル内で連続するTailwind CSSの @apply ユーティリティを、読みやすいカテゴリーごとの宣言に分割するVS Code拡張です。TailwindのビルドやCSS文書全体の整形は行いません。

使い方

CSSまたはSCSSエディターで、次のいずれかを実行します。

• コマンドパレットの Tailwind Apply: Organize：選択範囲があればその範囲、なければ文書全体を整理します。
• コマンドパレットの Tailwind Apply: Organize Document：常に文書全体を整理します。
• エディターを右クリックして Tailwind @apply を整理：最初のコマンドと同じ動作です。

.card {
	@apply text-color8 text-center text-xl font-bold relative gap-6 px-6 py-8 rounded-lg bg-white shadow-md mx-auto flex w-7xl justify-between;
}

.card {
	@apply relative flex w-7xl justify-between;
	@apply mx-auto gap-6 px-6 py-8;
	@apply text-color8 text-center text-xl font-bold;
	@apply rounded-lg bg-white shadow-md;
}

設定

{
	"tailwindApplyGrouper.comments": false,
	"tailwindApplyGrouper.organizeOnSave": false,
	"tailwindApplyGrouper.saveTimeoutMs": 500,
	"tailwindApplyGrouper.sortMode": "category",
	"tailwindApplyGrouper.categories": [
		{ "id": "motion", "label": "Motion" }
	],
	"tailwindApplyGrouper.categoryOrder": [
		"layout", "spacing", "typography", "appearance", "motion", "other"
	],
	"tailwindApplyGrouper.classificationRules": [
		{
			"match": { "type": "prefix", "value": "animate-" },
			"category": "motion",
			"order": 100
		}
	]
}

comments を有効にするとカテゴリー見出しを出力します。設定済みのカテゴリーラベルと同じコメントが直後の @apply 宣言を見出している場合、手編集によってクラスのカテゴリーが混在していても、既存の生成済み見出しとして扱います。これにより古い見出しと新しい見出しが重複しません。この条件で判別できないコメントは保護します。

sortMode は初期値の category では内蔵グループ順で安定ソートします。preserve では、カテゴリー内の元の順序を維持します。Prettierやprettier-plugin-tailwindcssが保存時に行内の順番を変更して結果が揺れる場合は、preserveを使い、この拡張にはカテゴリー分割だけを担当させてください。

保存時整理は organizeOnSave を有効にしたときだけ動作します。saveTimeoutMs は初期値500msで、1〜60000msの整数に変更できます。時間超過、構文・設定エラー、意味を安全に維持できない並び替えでは編集せず、保存を妨げません。

安全性

• 不明なユーティリティ、任意プロパティ、SCSS補間などにより相対順を安全に判定できない場合は、そのグループを変更しません。
• @apply ... !important; は分割後の各 @apply に !important を維持します。
• @apply 内のユーティリティを削除・改名しません。
• 対象はCSSとSCSSのみです。HTML/PHP/JSXのclass属性、Vue/Svelteの埋め込みstyle、LESS、Tailwind CSS v3は対象外です。