【AstroJS】 Tailwind CSS のクラス名を自動的にソートする 【VSCode】

heroImage

1. はじめに

Tailwind CSS は、クラス名を自動的にソートしてくれる Prettier Plugin 1 を公式が提供してくれています。React 系のプロジェクトでは、prettier パッケージと prettier-plugin-tailwindcss パッケージをインストールして設定することで、クラス名を自動的にソートすることが出来ます。更に、VSCode と組み合わせることで、ファイル保存時に自動的にクラス名をソートする開発環境も構築することが出来ます。

AstroJS + Tailwind CSS + VSCode の組み合わせで、クラス名を自動的にソート機能を有効にするには、prettier パッケージと prettier-plugin-tailwindcss パッケージに加えて prettier-plugin-astro パッケージの導入が必要など、追加の設定が必要になります 2 。本記事では、その手順について記述します。また、本記事は Node.js と Yarn がインストールされている前提で記述しています。

Terminal window
1
$ node -v
2
v20.11.0
3
$ yarn -v
4
1.22.21

2. テンプレートを生成する

まず初めに、公式ドキュメント 3 4 に従って AstroJS と Tailwind CSS の環境を構築します。具体的には yarn create astroyarn astro add tailwind を実行するだけで、自動的にテンプレートを生成してくれます。

Terminal window
1
$ yarn create astro
2
yarn create v1.22.21
3
[1/4] Resolving packages...
4
[2/4] Fetching packages...
5
[3/4] Linking dependencies...
6
[4/4] Building fresh packages...
7
8
success Installed "create-astro@4.7.3" with binaries:
9
- create-astro
10
[########################################] 40/40
11
astro Launch sequence initiated.
12
13
dir Where should we create your new project?
14
./whole-meteor
15
16
tmpl How would you like to start your new project?
17
Include sample files
18
19
ts Do you plan to write TypeScript?
20
Yes
21
22
use How strict should TypeScript be?
23
Strict
24
25
deps Install dependencies?
26
Yes
27
28
git Initialize a new git repository?
29
No
30
Sounds good! You can always run git init manually.
31
32
Project initialized!
33
Template copied
34
TypeScript customized
35
Dependencies installed
36
37
next Liftoff confirmed. Explore your project!
38
39
Enter your project directory using cd ./whole-meteor
40
Run yarn dev to start the dev server. CTRL+C to stop.
41
Add frameworks like react or tailwind using astro add.
42
43
Stuck? Join us at https://astro.build/chat
44
45
╭─────╮ Houston:
46
Good luck out there, astronaut! 🚀
47
╰─────╯
48
$ cd whole-meteor
49
$ yarn astro add tailwind
50
yarn run v1.22.21
51
warning package.json: No license field
52
$ astro add tailwind
53
Resolving packages...
54
18:32:24
55
Astro will run the following command:
56
If you skip this step, you can always run it yourself later
57
58
╭───────────────────────────────────────────────────────╮
59
yarn add @astrojs/tailwind@^5.1.0 tailwindcss@^3.4.1
60
╰───────────────────────────────────────────────────────╯
61
62
Continue? yes
63
Installing dependencies...
64
18:32:27
65
Astro will generate a minimal ./tailwind.config.mjs file.
66
67
Continue? yes
68
18:32:28
69
Astro will make the following changes to your config file:
70
71
astro.config.mjs ─────────────────────────────╮
72
import { defineConfig } from 'astro/config';
73
74
import tailwind from "@astrojs/tailwind";
75
76
// https://astro.build/config
77
export default defineConfig({ │
78
integrations: [tailwind()]
79
});
80
╰───────────────────────────────────────────────╯
81
82
Continue? yes
83
18:32:29
84
success Added the following integration to your project:
85
- @astrojs/tailwind
86
Done in 8.09s.

3. パッケージをインストールする

次に、パッケージをインストールします。具体的には、prettierprettier-plugin-tailwindcssprettier-plugin-astro をインストールします。Yarn を使ってインストールする場合は、以下のコマンドでパッケージをインストールすることが出来ます。

Terminal window
1
$ yarn add --dev prettier prettier-plugin-tailwindcss prettier-plugin-astro

prettier-plugin-tailwindcssprettier-plugin-astro は Prettier のプラグインなので、パッケージをインストールだけでは動作しません。プラグインを読み込むために、.prettierrc というファイルを AstroJS が生成したディレクトリの直下に作成し、以下のコードを追加します。

Terminal window
1
$ touch .prettierrc
2
$ ls -la
3
total 244
4
drwxrwxr-x 6 root root 4096 Feb 18 18:44 .
5
drwxr-xr-x 7 root root 4096 Feb 18 18:30 ..
6
-rw-r--r-- 1 root root 229 Feb 15 23:11 .gitignore
7
-rw-r--r-- 1 root root 0 Feb 18 18:44 .prettierrc
8
drwxrwxr-x 2 root root 4096 Feb 18 18:30 .vscode
9
-rw-r--r-- 1 root root 2360 Feb 15 23:11 README.md
10
-rw-r--r-- 1 root root 181 Feb 18 18:32 astro.config.mjs
11
drwxr-xr-x 400 root root 20480 Feb 18 18:32 node_modules
12
-rw-r--r-- 1 root root 408 Feb 18 18:32 package.json
13
drwxrwxr-x 2 root root 4096 Feb 18 18:30 public
14
drwxrwxr-x 5 root root 4096 Feb 18 18:30 src
15
-rw-r--r-- 1 root root 176 Feb 18 18:32 tailwind.config.mjs
16
-rw-r--r-- 1 root root 41 Feb 18 18:30 tsconfig.json
17
-rw-r--r-- 1 root root 183602 Feb 18 18:32 yarn.lock

prettier-plugin-astroprettier-plugin-tailwindcss の順番を逆にすると正常に動作しないので、順番も大事です。

.prettierrc
1
{
2
"plugins": ["prettier-plugin-astro", "prettier-plugin-tailwindcss"]
3
}

4. VSCode を設定する

ここからは、VSCode 上での作業になります。まず、VSCode 拡張機能の Prettier をインストールします。本記事では、拡張機能の具体的なインストール手順については割愛します。次に、VSCode の設定ファイル (settings.json) に以下のコードを追加します。以下のコードを追加することで、.astro ファイルのデフォルトコードフォーマットを Prettier に設定する + Prettier が .astro ファイルをコードフォーマット対象と認識するように設定出来ます。

settings.json
1
{
2
// .astro ファイルのデフォルトコードフォーマットを Prettier に設定する
3
"[astro]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
4
// Prettier が .astro ファイルをコードフォーマット対象と認識する
5
"prettier.documentSelectors": ["**/*.astro"]
6
}

5. おわりに

以上で作業は全て完了です。あとは、適当な .astro ファイル内に Tailwind CSS のコードを記述して、ソート機能が正常に動作するか確認してください。もし正常に動作しない場合は、以下のリストで抜けが無いか確認してみてください。


  1. GitHub, tailwindlabs/prettier-plugin-tailwindcss:https://github.com/tailwindlabs/prettier-plugin-tailwindcss

  2. Setup Astro 3.0 with Tailwind CSS Prettier Plugin:https://webreaper.dev/posts/astro-prettier-tailwind-setup/

  3. Astro Docs, Install Astro with the Automatic CLI:https://docs.astro.build/en/install/auto/

  4. Astro Docs, @astrojs/tailwind:https://docs.astro.build/en/guides/integrations-guide/tailwind/